WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

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

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

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

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

良い点

  • phpを触らないで済む。

悪い点

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

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

スポンサーリンク

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

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

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

  1. Windowsの場合『Ctrl』+『Shift』+『C』キーの同時押し
  2. Macの場合のショートカット『control』+『option』+『C』キー

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

  1. Elementsのタブが開かれてたら、Sourceのタブをクリック

    要素の検証画面

    Sourcesをクリックする

  2. editor-style.cssを探したいので、フォルダが見えるように画面を広げる

    画像の赤線を右へ広げる

    画像の赤線を右へ広げる

  3. 「wp-content」→「themes」→「今使ってるテーマ」と順にダブルクリック→「editor-style.css」をクリック
    editor-style.csswp-mce-の探し方
  4. editor-style.cssが右に出てくるので、最終行に1などと書き込みドラックして反転させる
    editor-style.cssの要素の検証画面
  5. コードを貼り付ける。
    body.mceContentBody {
      font: 16px 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
      margin: 20px 30px;
      line-height: 170%;
      width: 628px;
    }
  6. 貼り付け前:字が小さく改行されてない
    字が小さい、コンテンツ幅に合わせて改行されてない状態の投稿画面
  7. 貼り付け後:ブログと同じ「フォントサイズ」「コンテンツの幅」になり改行される。
    フォントが大きくなって、改行された投稿画面:ビジュアルエディタ

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

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年版|それからデザイン スタッフブログ

ラインの外側に余白をつけるマージン

marginは、外側の余白です。margin: 20px 30px;ってなると、外側の余白は、上下20px左右が30pxとなります。

margin: 20px 25px 30px 35px;でしたら、外側の余白は、20px、25px、30px、35pxとなりますよっ!って意味なので上から時計回りって覚えておくと忘れないですねっ。F

外側の余白は好みなので、投稿画面のマージンの有りなしで比較してみますねっ、結果Fは下記の通りです。

マージンなしの投稿画面

マージンなしの投稿画面

マージンありの投稿画面

マージンありの投稿画面

ラインハイトline-heighは行間のサイズ指定

行間に指定がないと文字を大きくした時に文字と文字の一部がかさなってしまうんですねっ。そこで行間の高さを指定してあげたら問題ないけどここであまり関係ないので。。比較だけしとておきましょう。

line-height: 170%;の有り無し比較。

line-heigh指定なし

line-heigh指定なし

line-heigh指定あり

line-heigh指定あり

行間に高さを指定した方が見やすくなってるのもわかりますねっ。

自分のブログのコンテンツの幅widthの調べ方

コンテンツの幅は、CSSを見れば解りますけど、どこに書いてたか。。探すのも面倒なので要素の検証でサクッっと調べる方法です。手順は下記で要素の検証の開きかたは上述の通り。段落などコンテンツ部分にマウスオーバーすれば幅が表示されます。

ただし、PC画面をサイドバーまでしっかり表示してください。

ブログの表示をサイドバーまでガッツリ表示させる。

ブログの表示をサイドバーまでガッツリ表示させて調べる。

Gush2のコンテンツ幅は604px

段落を表示させると604pxとわかる。

Gush2は、604pxとわかる

Gush2は、604pxとわかる

gush4のコンテンツ幅は、628px

p段落 628pxと解る

gush4のp段落 628pxと解る

gush4のp段落 628pxと解る

pは段落ですけど、コンテンツの幅はsectionと指定されてます。もちろんコンテンツの幅の事ですので628px。

gush4のコンテンツはsectinで幅628pxと解る。

gush4のコンテンツはsectinで幅628pxと解る。

stinger5のコンテンツの幅は、580px

デフォルトの状態ですので、段落pを見たとき下記。

stinger5は580px

stinger5は580px

stinger5のコンテンツ部分は、sectionで同様580px。

stingerのコンテンツはsectionで580pxだとわかる

さいごに

要素の検証で一度試してみて、実際にカスタマイズしたくなったらWordPressの投稿画面の文字が小さいのでカスタマイズ、劇的に見やすくなる方法をどうぞ。

ビジュアル画面ではなく、テキストエディタのカスタマイズは下記を^^

WordPress投稿のテキスト画面を見やすくするCSSカスタマイズ:アイキャッチ

LINKWordPress投稿のテキスト画面が、超見やすいCSSカスタマイズ!スマホ・タブレットでミスタップを防ぐコード

それではっ、かうたっくでした♪

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
カスタマイズ
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました