WordPressビジュアルエディターの文字サイズを大きくしたい！

WordPressのバージョンを更新したら、なぜか編集画面の文字が小さくなってしまいました。見づらくてたまりません…。文字サイズを大きくして、もっと見やすくしましょう！

その後、この現象はCocoonのアップデート（バージョン2.1.3.1から2.1.4.1へ）によって元に戻りました！

今回の現象をもっと詳しく

今回の現象をもっと詳しく書いておきます。WordPressのビジュアルエディターの投稿画面というか編集画面で、段落、引用、リスト（番号あり、なし、両方とも）の中に書く文字サイズが無茶苦茶小さいんです。だいたい12ピクセルぐらい。上の画像は段落の中に書いた文字なんですが、見えねーよ!! これじゃぁまるで画像の注釈じゃん！これをだいたい18ピクセルぐらいのサイズにしたいんですわ。

環境はこんな感じ

念のために書いておくと、今回の環境は以下の通りです。

• WordPressバージョン：5.4
• ビジュアルエディター：Gutenberg
• テーマ：Cocoon 2.1.3.1
• ブラウザ：Chrome 80.0.3987.149
• PHPバージョン：7.2.27

ちなみに、当ブログでは以下のプラグインを使っているんですが、今回の件には一切関係ありませんでした。

• Akismet Anti-Spam 4.1.4
• Better Delete Revision 1.6.1
• Google XML Sitemaps 4.1.0
• Revive Old Posts 8.5.4
• WP-Appbox 4.1.27
• WP Multibyte Patch 2.8.4

ビジュアルエディターの文字サイズを大きくする方法

ではいよいよビジュアルエディターの文字サイズを大きくしてみましょう。

「外観」→「テーマエディター」を押す

WordPressの「ダッシュボード（＝管理画面）」を開いて、左側のメニューにある「外観」→「テーマエディター」の順に押します。

「ビジュアルエディターのスタイルシート」を押す

「テーマの編集」という画面になったら、右端の「ビジュアルエディターのスタイルシート」を押します。

文字サイズのコードを書き足す

「Cocoon Child: ビジュアルエディターのスタイルシート (editor-style.css)」の画面が開いたら「選択したファイルの内容」の中に以下のコードを書き足します。

/*編集画面のデフォルト文字サイズを大きくする*/

/*段落と引用の文字サイズ*/
p{
font-size:18px;
}

/*リストの文字サイズ*/

/*番号なし*/
ul{
font-size: 18px;
}

/*番号あり*/
ol{
font-size: 18px;
}

「ファイルを更新」を押す

必要なコードを書き足したら、下の方にある「ファイルを更新」を押します。これをやり忘れると、せっかくの変更作業が反映されません。このボタンを押すのを忘れないで下さいね。

ファイルの編集に成功すればオーケー

画面の下に「ファイルの編集に成功しました。」と出たら、どれでも構いません、ブログの記事を開いてみましょう。

文字サイズが大きくなったか確認する

実際に文字サイズが大きくなったか確認してみます。

ビフォー

アフター

段落の中に書いた文字サイズは、明らかに変更前より大きくなりました！文字サイズはもっと大きくしてもいいんですが、試してみたら見出しの文字サイズとのバランスが悪くなります。今回はこの18ピクセルで行くことにしました！

これまではこんなこと１度もなかったのに、不思議だなぁ…。