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ピクセルで行くことにしました!

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

コメント

  1. 名無し より:

    この記事のおかげで問題を解決することができました!!

    突然エディターが変わってしまってほとほと困り果てていたところです。

    本当に助かりました!

タイトルとURLをコピーしました