自分のブログの昔の記事「WordPress投稿画面のフォントを変更する」を見てみると、コアファイルを編集してビジュアルエディタ(投稿画面)のフォントを変更するというムチャクチャなことが書いてあったので、懺悔の意味も込めて正しいビジュアルエディタのスタイルの変更方法を書き留めておきます。

add_editor_style() 関数を使う

ビジュアルエディタ(TinyMCE)のスタイルをカスタマイズするための仕組みはちゃんとWordPressに備わっております。add_editor_style() 関数は、ビジュアルエディタに指定したスタイルシートを関連づけることができる関数です。

参考: WordPress Codex

add_editor_style( $stylesheet );

$stylesheet で指定したCSSファイルがビジュアルエディタに反映されます。引数のデフォルト値は「editor-style.css」です。使用しているテーマディレクトリからの相対パスかもしくはURLで指定することができます。

スタイルの変更方法

functions.phpを編集

使用しているテーマのfunctions.phpに以下のコードを追加します。

/* functions.php */
function my_add_editor_style() {
    add_editor_style();
}
add_action( 'after_setup_theme', 'my_add_editor_style', 20 );

ファイル名やディレクトリを変更したい場合は適宜書き換えてください。

テーマディレクトリにスタイルシートを追加

add_editor_style() で指定したスタイルシート(上記のコードの場合は使用中のテーマディレクトリ直下にeditor-style.css)を作成します。

内容はそれぞれですが、たとえば…

/* editor-style.css */
body {
    color: #0a0a0a;
    font-family: 'Futura', Verdana, 'Hiragino Sans', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', '游ゴシック', 'Yu Gothic', 'メイリオ', sans-serif;
    line-height: 1.8;
    max-width: 740px;
}

的なね。これで、WordPressビジュアルエディタのスタイルを変更することができました。