【Cocoon】ビジュアルエディタのバッジ部分をカスタマイズしよう【WordPress】

はじめに
目指す形
カスタマイズのやり方
editor-style.cssを編集しよう
ビジュアルエディタ側を確認しよう
おわりに

はじめに

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

バッジは文章を強調するのに便利です。

ただしデフォルト状態のビジュアルエディタでは編集中にバッジをアクティブにすると文字が透明になってしまい非常に使い勝手が悪いです。

cssを少し編集するだけでバッジ編集中の文字が見えるようになるので参考にしてください。

対象者

WordPressのカスタマイズをしたい方
スペーサーのカスタマイズ方法を知りたい方

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

【Cocoon】ビジュアルエディタのカスタマイズまとめ【WordPress】

WordPressのCocoonテーマを使った場合のビジュアルエディタをカスタマイズする方法を紹介していきます。ビジュアルエディタのカスタマイズをして記事の作成効率を上げていきましょう。

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

目指す形

ビジュアルエディタのバッジの通常状態はこちらです。

それではバッジを編集状態にしてみましょう。

バッジ編集中(変更前)

カスタマイズ前の状態ではバッジの文字が透明になって何が書いてあるか分かりませんよね。

バッジ編集中(変更後)

変更後はバッジの中の文字が分かるようになりました。

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

カスタマイズのやり方

ビジュアルエディタのスペーサーをカスタマイズするにはeditor-style.cssを編集していきます。

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

【Cocoon】WordPressのeditor-style.cssを編集してビジュアルエディタをカスタマイズしよう

WordPressのeditor-style.cssを編集して自分のサイトをカスタマイズするやり方について説明します。editor-style.cssが編集できるようになると、ご自身のサイトのデザインを好きなように変えることができます。管理画面から編集する方法とエディタから編集する方法の2つのやり方を紹介しています。

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

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

editor-style.cssを編集しよう

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

.rich-text:focus.is-selected .badge[data-rich-text-format-boundary],
.rich-text:focus.is-selected .badge-red[data-rich-text-format-boundary],
.rich-text:focus.is-selected .badge-pink[data-rich-text-format-boundary],
.rich-text:focus.is-selected .badge-purple[data-rich-text-format-boundary],
.rich-text:focus.is-selected .badge-blue[data-rich-text-format-boundary],
.rich-text:focus.is-selected .badge-green[data-rich-text-format-boundary],
.rich-text:focus.is-selected .badge-yellow[data-rich-text-format-boundary],
.rich-text:focus.is-selected .badge-brown[data-rich-text-format-boundary],
.rich-text:focus.is-selected .badge-grey[data-rich-text-format-boundary] {
  color: black;
}

上記編集をすることでビジュアルエディタのバッジ編集中の色が変更されます。

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