【Cocoon】ビジュアルエディタの段落(pタグ)部分をカスタマイズしよう【WordPress】

はじめに

今回はWordPressのビジュアルエディタの段落(pタグ)部分をカスタマイズするやり方について紹介していきます。

デフォルト状態のビジュアルエディタではどこの段落(pタグ)部分にカーソルが当たっているか分からなくなるときがありますよね。

cssを少し編集するだけでカーソルがどこの部分に当たっているか分かりやすくなるので参考にしてください。

対象者

ビジュアルエディタのカスタマイズまとめについてはこちら。

それでは説明に移ります。

目指す形は以下です。

段落(pタグ)部分が変更されているのが分かりますね。

編集中の箇所が分かりやすくなっているかと思います。

それではビジュアルエディタをカスタマイズしていきましょう。

ビジュアルエディタの段落(pタグ)部分をカスタマイズするにはeditor-style.cssを編集していきます。

editor-style.cssの編集方法は以下参考にしてください。

本記事ではWordPressのVer.5.8で説明していきます。

Ver.5.8より低いバージョンでは指定方法が異なりますのでご注意ください。

それではeditor-style.cssを編集していきましょう。

.block-editor-block-list__block.is-selected {
  color: inherit;
  background-color: tomato;
}

上記編集をすることでビジュアルエディタの段落(pタグ)部分が変更されます。

色の指定はご自身のお好みでかまいません。

変更が完了したらビジュアルエディタ側を確認しましょう。

以下のようになっているはずです。

1つの例として私のスタイリングを載せておきます。

特にこだわりはないですがどこがどのように変更されるか参考になるかと思います。

.block-editor-block-list__block.is-selected {
  color: inherit;
  background-color: rgba(43, 50, 49, 0.1);
}

ビジュアルエディタ側は以下のようになります。

ちなみにすべてのスタイリングを反映した場合はこんな感じ。

他のカスタマイズ箇所を知りたい方はこちら

以上WordPressのビジュアルエディタの段落(pタグ)部分をカスタマイズするやり方について紹介しました。

いかがだったでしょうか。

cssを少し編集するだけでビジュアルエディタのカーソルがどこの部分に当たっているか分かりやすくなるので参考にしてください。