2016/02/06

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. コードを貼り付ける。
  6. 貼り付け前:字が小さく改行されてない
    字が小さい、コンテンツ幅に合わせて改行されてない状態の投稿画面
  7. 貼り付け後:ブログと同じ「フォントサイズ」「コンテンツの幅」になり改行される。
    フォントが大きくなって、改行された投稿画面:ビジュアルエディタ

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

cssの解説

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

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

「body.mceContentBody」って何

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

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

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

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

body.mceContentBody {

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

}

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

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

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

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の投稿画面が見やすくなったら、カスタマイズやりたくなりますよねっ!カスタマイズの前にFTPソフトでバックアップとってたら、ブログ画面が真っ白になっても、バックアップから復元すれば元に戻ります。

参考ブログが真っ白!エラー原因は全角・閉じ忘れ・親子テーマの競合!?2通りの復元方法&今後の対策!!

参考初心者必見!WordPressのバックアップ方法、記事のエクスポートする手順&ファイル内の説明

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

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

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー