Cocoonでビジュアルエディターのスタイル(CSS)を変更する方法

この記事は約2分で読めます。

WordPressテーマ「Cocoon」では、記事を入力する画面で使うビジュアルエディターに、実際のブログ画面と同じスタイルシート(CSS)を反映してくれています。

これはものすごく便利なのですが、CSSの種類によっては、記事作成の邪魔になることがあります(後述)。

そんな時のための、WordPress管理画面の変更方法です。

具体的なケース

筆者が実際にあったのが、リストタグ(<ul><li>~</li></ul>)用のCSS。

とあるブロックで、<li>にインラインブロックの指定をして、横並びになるように設定しました。

ところがビジュアルエディターで、そのリストを編集する時。

通常はキーボードのEnterで、新しいリストが増えていくのですが、CSSのせいか、挙動がおかしくなってしまいました。

エディタースタイルをオフにする

解消方法としては、2つあります。

一つは「Cocoon設定」からエディターの設定を変更すること。

「Cocoon設定」にあるタブから「エディター」を選び、エディター設定を表示します。

その中の「エディタースタイル」のチェックを外すと、テーマスタイルがビジュアルエディターに反映されなくなります。

チェックを外したら、「変更をまとめて保存」のクリックを忘れないように。

editor-style.cssを編集する

もう一つは、ビジュアルエディターのスタイルシート(editor-style.css)を編集する方法。

editor-style.cssはビジュアルエディターのみに適用されるスタイルなので、ここにトラブルを解消するためのCSSを記載します。

この方法であれば、実際の見た目を極力維持したまま、当該部分のみを修正できます。

Cocoonでは、editor-style.cssがあらかじめ準備されています。便利。

子テーマのテーマファイルから、「ビジュアルエディターのスタイルシート」を開きます。

今回のケースでは、inline-blockを指定したリストタグに、サイドblock指定をします。

これでビジュアルエディター上では、リストが縦並びになり、Enterキーでの項目追加が可能となります。

まとめ

以上、Cocoonでビジュアルエディターのスタイル(CSS)を変更する方法、でした。

普通のテーマであれば、多少の工夫が必要な部分でも、WordPressテーマCocoonでは既に用意されている。本当に便利なテーマです。ありがたや。

コメント

タイトルとURLをコピーしました