WordPressのビジュアルエディタを見やすくCSSで色をつける方法

CSSの不一致があった場合は、少しだけカスタマイズが必要な場合があります。まず、有効化しているテーマの直下に「editor-style.css」ファイルを作ります。最初はファイルの中は空で構いません。

有効化しているテーマ直下のfunctions.phpに以下のコードを追加します。

//ビジュアルエディタにCSSを適用する
add_editor_style('editor-style.css');

「editor-style.css」にCSSを記述していきます。好きな配色にしていきます。ビジュアルエディタの表示背景に色をつけておくと、Wordpress のブロックエディタの”まとまり”がわかりやすくなります。

editor-style.css 参考

/*ビジュアルエディターのスタイルを書く*/

/*背景色*/
.editor-styles-wrapper,
.editor-styles-wrapper,
div.editor-styles-wrapper ,
.is-root-container {
  padding: 10px 0;
  background-color: #e0eff4;
}

/*基本の太さ*/
element.style {
  font-weight: 300;
}

/*テキスト*/
.block-editor-rich-text__editable,
.rich-text{
  font-weight: 300;
  margin: 2rem auto;
  display:block;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", HiraginoSans-W3, メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  display:block;
}

/*-ブロック要素-*/
.block-editor-block-list__block{
  border: solid 1px  #c6edfa;
  background-color: #fff;
}

h2.block-editor-block-list__block{
  display:block;
  background-color:#6fdbff;
  font-weight: 600;
}

h3.block-editor-block-list__block{
  display:block;
  border:solid 1px #6fdbff;
  border-bottom:solid 3px #a9bef7;
  border-left:solid 4px #a9bef7;
  font-weight: 600;
  background-color:#d3ddfa;
  font-size:20px;
}
h4.block-editor-block-list__block{
  display:block;
  border:solid 1px #6fdbff;
  border-bottom:solid 3px #787b85;
  border-left:solid 4px #9396a0;
  font-weight: 600;
  background-color:#b7c9fa;
  font-size:18px;
}

/*コードエリア*/
pre code,
.wp-block-code {
  background-color: #bbc8dc;
  padding:0 10px;
}
p + code{
  margin:0;
  padding:0 5px;
  background-color: #cbeaf7;
}

CSSを適用したら以下のような配色になります。使いやすいようにカスタマイズしてください。