WordPressの投稿画面(編集画面)にCSSをあててカスタマイズする方法

WordPressの投稿画面を実際の表示画面と同じようにすると使いやすさが上がります。
制作会社等でお客様のWEBサイトを納品する際、お客様にとっても何を入力すれば、何が反映されるのかが分かりやすく、喜んで頂けるかと思います。

今回はWordPressの投稿画面(編集画面)にCSSをあててカスタマイズする方法をご紹介したいと思います！

add_editor_style()を使って管理画面のブロックに独自のスタイルを当てる

WordPressの投稿画面と実際の表示画面と同じ見え方にするには、以下のコードをfunctions.phpに記述します。

// 投稿編集画面のスタイリング
function editor_style() {
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' ); // editor-styleの部分は任意のファイル名を付けて下さい
}
add_action( 'after_setup_theme', 'editor_style');

editor-style.cssを用意する

次に、CSSファイルを新規作成し、今回は名前を「editor-style.css」とします。
※ファイル名は任意で名前を付けて下さい。

見出しやリスト等、スタイリングしたい要素にスタイルを設定します

CSSファイルが用意できましたら、見出しや表、リスト等、スタイリングしたい要素にスタイルを設定してきます。

h2{
/*  ここに任意のプロパティを追加します  */
}
h3{
/*  ここに任意のプロパティを追加します  */
}
h4{
/*  ここに任意のプロパティを追加します  */
}
ul{
/*  ここに任意のプロパティを追加します  */
}
li{
/*  ここに任意のプロパティを追加します  */
}

スタイルを設定する際の注意点

editor-style.cssでスタイリングする際には以下の注意が必要です。

表示画面と同じスタイルを当てるには、表示画面のスタイルを継承する必要があるので、表示画面のスタイルをコピペすれば良いかと思います。
ただし、WordPressの投稿画面には表示画面と同じスタイル名や要素が無いので、コピペしてそのまま使うと反映されない場合があります。

表示画面のスタイルをコピーして、editor-style.cssにペーストしたら、不要な先祖要素は削除すると良いでしょう。

 /* .contentsというスタイル名や先祖要素はありませんので削除しましょう */
.contents h2{
  font-size: 3rem;
}

実際にスタイルをあててみた結果

実際に表示画面と同じような見栄えになるようにスタイルを当ててみました。

投稿画面(編集画面)のキャプチャ

表示画面のキャプチャのキャプチャ

上記の画像を比べてみると、どちらの表示も同じような表示になり、これであればどの見出しを入れれば、どうように表示がされるのかが分かりやすく、WordPressを初めて触るユーザーにとっても使いやいのではないでしょうか。

まとめ

WordPressの投稿画面(編集画面)にCSSをあててカスタマイズする方法についてご紹介いたしましたが、いかがだったでしょうか？

お客様へ納品する際はCMSの使い勝手の良さも、喜んで頂けるかと思いますので、ご興味がある方は是非お試し下さい！