WordPressブログについて ライティング講座

どの大きさが読みやすい?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に全く詳しくない私でもできたので、ぜひやってみてくださいね♪

 

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

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

***

-WordPressブログについて, ライティング講座
-, ,

Copyright© アフィリエイト初心者でも稼ぐコツを教えます。主婦アフィリエイターまかろんのブログ , 2017 All Rights Reserved Powered by AFFINGER4.