どの大きさが読みやすい?WordPressで文字の大きさを全体的に変更する方法

文字サイズ変更-9

「老眼なので、ブログの文字の大きさ(フォントサイズ)をもっと大きくしたいんですけど、どこを変えていいのかわからないんです…」

という声をお聞きしました。

実は、私も”超”がつくド近眼で、小さい文字は見にくく感じるため、自分のブログの文字は大きめにしています。

スタイルシート(CSS)というものを変更しなければいけないので、はじめはとまどいましたが、数字を変えればいいだけなので、なんとか私にもできました。

今回は、文字の大きさの設定方法について、お話をします。

 

文字の大きさ(フォントサイズ)はどのくらいが適当なのか

いくつかのサイトのフォントサイズを調べてみたところ、だいたい14~16pxあたりの大きさが多いようでした。

読者層が若い年齢なら、小さめの文字(14~15px)でもいいですが、高齢の方が多いようなら、大きめ(16~17px)にすると親切ですね。

このブログでは「16px」に設定しています。

 

文字の大きさを設定する方法

スタイルシート(style.css)というのを変更していきます。

はじめにバックアップをとっておきます

①「外観」→②「テーマの編集」とクリックします。

文字サイズ変更

失敗したときに元に戻せるよう、変更する前には、必ずバックアップをとっておきましょう。スタイルシート(style.css)を全選択してコピーし、メモ帳やテキストエディタなどに貼り付けて置いておきます。

文字サイズ変更-6

こうしておけば、もし編集に失敗しても、このメモ帳に貼り付けておいたものを、スタイルシートにコピー&ペーストしなおせば、編集前に戻すことができます。

「>」や「}」みたいな記号が抜けるだけでも、表示が崩れたりすることがあるので、面倒でもやっておいた方が安心です。

 

文字の大きさの設定

「body{」ではじまる部分の「font-size」の値を変えると、文字の大きさが変わります。

文字サイズ変更-2

お使いのWordpressのテーマによって異なるようで、Wordpressにもともと入っている「Twenty Sixteen」は、「textarea{」となっていました。

もし、「body」が見つからなければ、「Ctrl」を押しながら「F」キーを押すと、検索窓が出てきます。そこに、「font-size」と入力して、それっぽい部分を変更してみましょう。
(変になってしまったら、バックアップしておいたものに戻せばいいです。)

文字サイズ変更-5

このブログで使っている「FMテンプレート」は、初期設定が「14px」だったので、私は「16px」に変更しました。

文字サイズ変更-4

 

他の文字の大きさにも注意

以上で終わっても良いと思いますが、以下は念のため。

「body」ではじまる部分の「font-size」の値を変えたことによって、本文の大きさが変わりましたが、同時に見出しなどの大きさも変わってしまうことがあります

「FMテンプレート」の場合ですが、body部分の文字サイズの単位は「px」になっていますが、h1~h6の見出し部分の単位は「em」となっています。

文字サイズ変更-7

「px」という単位は「絶対単位」と呼ばれるもので、変更した個所のみにしか影響しませんが、「em」や「%」などの単位は「相対単位」といって、「絶対単位」の値と比べて○倍などという使われ方をするようです。

px 絶対単位 そのままのサイズで表示
em 相対単位 他の文字サイズを基準にして計算される
% 相対単位 他の文字サイズを基準にして計算される

なので、h3見出しが「1.5em」となっていれば、変更前は14pxの1.5倍サイズだったのが、変更後は16pxの1.5倍サイズになってしまうということです。

別にこのままでいいやと思うなら、変更しなくてもいいし、大きすぎると感じるなら、h1~h6の見出し部分も変更してみてください。

私は、全て「1.4em」にしてみました。

 

行間を設定する方法

文字サイズを変更するだけだと、行間が詰まってしまったり、逆に空いてしまったりする場合があるので、行間も設定しなおした方がいい場合があります

行間は「line-height」で表される部分です。

文字サイズ変更-8

この「line-height」の値の単位が、上でも出てきた「%」や「em」などの「相対単位」であれば、文字の大きさを基準にして、自動的に行間も大きくなったり小さくなったりしてくれますので、特に変更しなくても大丈夫です。

、「px」になっている場合は、自動的に変わってはくれないので、読みやすいように自分で設定値を変える必要があります

 

まとめ

自分のブログの読者層に合わせて、文字サイズを大きくしたり、小さくしたりすれば、より読みやすくなります。

CSSに全く詳しくない私でもできたので、ぜひやってみてくださいね♪

 

ブログ記事を読みやすくする方法について、他にもいくつか記事を書いていますので、よかったら併せて読んでみてください。

最後まで読んでいただき、ありがとうございました。

***

Comment

  1. ナミ より:

    マカロンさんおはようございます!
    ナミです^^

    なるほど。。

    読む方にとっては記事の大きさも
    考えないといけないですよね・・

    ブログの記事や内容にばかり
    気を取られていてこういった
    心遣い、やさしさの部分を
    少し見落としていた気がします^^;

    マカロンさんの記事は本当に、
    いつも大変勉強になります^^

    貴重な学びを有難うございます!

    応援して帰りますね!

    • まかろん より:

      ナミさん、こんばんは。
      いつもありがとうございます。

      中身が一番大事なんですけど、
      文章力は、文章を書かないと向上しないと思うので、
      とりあえず形から入ってたり(^_^;)

      参考になったなら幸いです。
      また、伺いますね。
      どうもありがとうございました。

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

まかろんのプロフィール



ハンドルネーム:まかろん
2児を子育て中の主婦兼アフィリエイターです。

このブログでは、知識も実績もゼロの初心者がアフィリエイトで稼ぐための情報をお伝えしていきます。
少しでもあなたのお役に立てたら幸いです。

詳しくはこちらから

ブログランキングに参加しています


人気ブログランキングへ
ポチっと応援クリックしてもらえるとうれしいです♪

当ブログで使用しているテンプレート

初心者でも、ブログの作成が簡単にできる工夫がいっぱいのテンプレート

詳しくはこちらから

アーカイブ

こちらのサイトの素材を使わせていただいてます

Re:vre