WordPress 投稿画面のビジュアルエディター・テキストエディター・テーマの編集のフォントサイズを変更するいちばん簡単な方法

2019年7月11日

WordPressの投稿画面のエディターの文字が小さくて読みにくいので、大きくしようといろいろ試してみましたがなぜか上手くいかず、面倒なのでFireFoxのアドオン「Stylusで変更しました。ついでにフォントも変更して読みやすくします。

Stylusをインストールするとツールバーにアイコンが表示されるので、クリックして 管理 > 新しいスタイルを作成 をクリック。タイトルを適当に入力し、コード入力欄に下記のCSSをコピーして貼り付け、 保存 をクリックすればOK。
フォントやフォントサイズ、色はお好みに応じて変更してください。

/* テキストエディター */
textarea#content.wp-editor-area {
 font-family: '源ノ角ゴシック code JP';
 font-size: 16px;
 color: #444;
}
/* TinyMCE ビジュアルエディター */
#tinymce.mce-content-body {
 font-family: '源ノ角ゴシック code JP';
 font-size: 16px;
 color: #444;
}
/* テーマの編集 */
textarea#newcontent{
 font-family: 源ノ角ゴシック code JP N ;
 font-size: 15px;
 color: #444;
}

 

僕の環境ではこれくらいがいい感じ。
(ビジュアルエディターはTinyMCE用です)

もし反映しない場合はページのソースを見るかブラウザーの開発ツール(F12)を使ってidやらクラスやらを探して変更してみてください。
源ノ角ゴシックがインストールされていない場合はここからダウンロードしてください。

Firefoxでビジュアルエディター画面に反映しない場合はセレクターの括弧の前に * を入れてみてください。

#tinymce.mce-content-body *{

※以前は「Stylish」を使っていましたが、開発者が変わって個人情報を収集するようになったとかいう話があったのでほぼ同機能のStylusに乗り換えました。
Firefox版はまだベータ版ですがWebExtensionで開発されているのでFirefox57以降でも使用できます。