WordPress案件のクライアントワークでも、お客さんからのご要望として時々上がってくるのが、エディタ内にもスタイルを適用させる、エディタースタイルを使うケースなのですが、ついつい忘れがちになるので備忘録として残しておきたいと思います。   エディタースタイルは、WordPressのエディタ内で適用させるCSSのことで、該当するCSSファイルを用意して、指定することで適用されるようになります。まず、エディタースタイルが適用されていない場合、つまりデフォルトの表示ではこのようになります。   編集する人のリテラシーによっては、なかなか取っ付きにくいと思われるかもしれませんね。そこで、このエディタ内の表示にもCSSが適用されるようにしていきます。まずは「functions.php」に下記の通り記述し、エディタースタイルを有効化させます。この時に独自のCSSを使う場合には該当するファイルのパスとファイル名を直接引数へと指定します。 【functions.php】

add_editor_style();

// 独自ディレクトリおよびファイルを指定
add_editor_style('PATH/FILE_NAME.css');

  ちなみにですが、デフォルトの場合はテーマファイル直下の「editor-style.css」を参照する形になっています。ここではデフォルトの仕様で進めていきます。そこで、下記のようにテーマファイル直下に「editor-style.css」を用意します。

wp-content
　┗ themes
　　┗ USER_THEME
　　　┗ editor-style.css

  「editor-style.css」には実際にエディタ内で適用させるスタイルを記述していきます。この時に確実に適用させるためにも、WordPressのエディタ要素に付与されているclass名をセレクタに追記しておくことをオススメします。下記の例では「.wp-editor」になります。 【editor-style.css】

.wp-editor h1 {
  background: #ccc;
  font-weight: bold;
  margin-bottom: 30px;
}

  これで改めてエディタを確認すると、、こんな感じでCSSが適用されて、よりブログのイメージに近づけることができます。（サンプルはモノクロのため少しわかりにくいのですが、、）  

---

  エディターには比較的簡単にスタイルを適用させることができますので、必要に応じて気軽に対応できそうですね。   （参考にさせて頂いたサイト） Editor Style - WordPress Codex 日本語版