どうも、Monagaです。
記事の対象者は以下のような方を想定しています。
記事の内容
- cocoonでブロックエディタを無効にし、TinyMCE Advancedを使う
- エディタメニューに「スタイル」を表示する
cocoonは無料で使えるテーマとして非常に優秀ですよね。
このcocoonが提供している機能は個人で1から用意するには結構な時間がかかってしまいます。
また、元からブログで欲しい素材を用意してくれているので、何をスタイル的に追加しなければいけないのか？をあまり考えなくても良いのは大きいです。
僕はまだまだブログ初心者なので、どういったスタイルを用意すべきか？をあまり理解しておらず、このcocoonというテーマは僕にとってとても便利です。
ただ、たしかにデフォルトでは少し使いづらい部分があるのも事実で、今回はこのエディタ部分がデフォルトでは使いにくいので早速カスタマイズしてみたいと思います。
cocoonでブロックエディタを無効にする方法
まずブロックエディタを無効にしてしまいましょう。
以下の通りにクリックしていき、エディタ設定まで行きます。
「Gutenbergエディターを有効にする」のチェックを外し「変更をまとめて保存」
TinyMCE Advancedのインストールと有効化
説明不要と思いますが念の為記載します。
プラグイン->新規追加より「プラグインの検索にて」TinyMCE Advancedを検索&インストール
エディタメニューに「スタイル」表示
設定->TinyMCE Advancedより設定画面に移動
Classic Editorタブにて、「使用しないボタン」部分より「スタイル」をドラッグ&ドロップで上のエディタ部分の好きな場所に配置し、「変更を保存」する
実際に使用してみる
このように「スタイル」を押すとドロップダウンメニューが表示され様々なスタイルを選択することが可能になります。
とても便利ですね。
僕が使いそうなものをパッとあげるとこんな感じでしょうか。
ボックス案内
と少し列挙しただけでこれほどあります。もちろん色もそれぞれ変更可能です。
「スタイル」以外にも「ショートコード」といって欲しい情報を表示できる仕組みや、「テンプレート」といって自分がよく使うスタイルをテンプレート化しておけるなどとても便利な機能がcocoonにはあります。
これは初心者には嬉しい限りですね。
これからもcocoonの便利なカスタマイズ方法等あれば発信していくのでよければ見てください。
