WordPressの投稿画面の文字が小さいっ！「phpを触らず」フォントサイズを「一時的に」大きくする方法

WordPressの投稿画面って、フォントサイズが小さいって感じた事ありませんか？ビジュアルエディターのスタイルシートを読み込む為にphpを触るのは、ちょっと嫌だし面倒だなぁって思ってるなら一度試して頂きたいっ！

要素の検証を使って簡易的にではありますけど、下書き保存の更新をしない限りフォントサイズを大きくしてブログのコンテンツの幅の通りで折り返すようにできます。

要素の検証から「editor-style.css」にコードをコピペするだけでphpを触らずに一時的に投稿画面のビジュアルモードが見やすくなるんですけど、良し悪しは下記。

良い点

phpを触らないで済む。

悪い点

更新「下書き保存」したらまた要素の検証を開いてコードを貼り付けないとダメ

PCでビジュアル画面のフォントを見やすくして更に、コンテンツの幅を指定してすればブログと同じ場所で改行しますっ。phpを触るのが嫌な人に試してもらいたいので手順を書いていきますねっ。

投稿画面の要素の検証でeditor-style.cssにコードを追記すると一時的に画面が見やすくなる。
cssの解説
さいごに

投稿画面の要素の検証でeditor-style.cssにコードを追記すると一時的に画面が見やすくなる。

ビジュアルエディターを開いたまま、要素の検証を開き投稿画面のスタイルシートeditor-style.cssにコードを追記するだけで、画面が一段と見やすくなります。

要素の検証の開き方は下記。

Windowsの場合『Ctrl』＋『Shift』＋『C』キーの同時押し
Macの場合のショートカット『control⌃』＋『option⌥』＋『C』キー

以下、手順を順番に書いていきますねっ。

Elementsのタブが開かれてたら、Sourceのタブをクリック
Sourcesをクリックする
editor-style.cssを探したいので、フォルダが見えるように画面を広げる
画像の赤線を右へ広げる
「wp-content」→「themes」→「今使ってるテーマ」と順にダブルクリック→「editor-style.css」をクリック
editor-style.cssが右に出てくるので、最終行に1などと書き込みドラックして反転させる

コードを貼り付ける。

body.mceContentBody {
  font: 16px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
  margin: 20px 30px;
  line-height: 170%;
  width: 628px;
}

貼り付け前：字が小さく改行されてない
貼り付け後：ブログと同じ「フォントサイズ」「コンテンツの幅」になり改行される。

これで、見やすくなりましたねっ♪

cssの解説

簡単にコードを貼り付けたら出来ますけど、意味も知りたいですから解説していきますねっ。

body.mceContentBody {
  font: 16px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
  margin: 20px 30px;
  line-height: 170%;
  width: 628px;
}

body.mceContentBody、font、margin、line-height、widthを簡単に説明しますねっ。

「body.mceContentBody」って何

これは、htmlタグ「body」の中にある、class名「mceContentBody」を装飾しますよ投稿画面のビジュアルのhtmlのコードを簡略化したものが下記です。

・・追記・・

editor-style.cssがあるかどうか、読みこまれているかどうかはテーマに依存します。。でも、要素の検証でCSSにコードを書けば出来るブログがほとんどです。セレクタ「body.mceContentBody 」は変わってきますけど。。。

<body id="tinymce" class="mce-content-body editor-area mceContentBody webkit wp-editor wp-autoresize html4-captions" data-id="content" contenteditable="true" style="overflow-y: hidden;"><p>文字</p></body>

もっと簡単にしたものが下記。

<body class="mce-content-body・・・">
</body>

htmlタグ「body」の中にある、class名「mceContentBody」の装飾をしますよっ。{ここから、}ここまで。

body.mceContentBody {

何を: どんな風にするか;

}

「body.mceContentBody」のことをCSSで「セレクタ」
「何を」の部分を「プロパティ」
「どんな風にするか」の部分が「値」って言います。

フォントサイズを指定の仕方

2行目、font: 16pxのところにブログ本文と同じフォントサイズを入れて、コンテンツの幅を入力します。

body.mceContentBody {
  font: 16px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
  margin: 20px 30px;
  line-height: 170%;
  width: 628px;
}

font-familyである「’Lucida Grande’,’Hiragino Kaku Gothic ProN’,Meiryo, sans-serif」通常は、『font-family: フォントの種類；』と書くイメージがありますが、editor-style.cssはこのように書かれていました。

複数書いてあるのは、使ってるPCやスマホなどによってインストールされてないものがある場合用に複数あります。好みがあるのであれば、左の方に好きなフォントを入れて置くのも良いですねっ。詳しい事は下記リンクがわかりやすいです。

参考Font−familyのベストな書き方 2015年版｜それからデザインスタッフブログ