こんにちは、ニシムラ(@nissy421)です。
本日は、
ブログの文字（フォント）の大きさと行間の広さを変えて文章をもっと読みやすくする方法
をご紹介します！
ブログを読んでいると、読みやすいブログと読みにくいブログがありますよね。
内容はもちろんですが、ブログの読みにくさの原因のひとつは、実は文字の大きさと行間の広さにあるんです。
文字の大きさと行間をちょこっと変えるだけで、あなたのブログが劇的に読みやすくなりますよ^^
１００万PVブロガーのブログはなぜ読みやすいのか？
先日、尊敬する月間１２０万PVプロブロガーのヨスさん(@yossense)のブログを読んでいたときのこと。
[voice icon=”https://keiichinishimura.com/wp-content/uploads/2016/08/2be065fba117d055c107a3de970c5227-e1474158722917.jpg” name=”にしむー” type=”l”]ヨスさんのブログってどうしてこんなに読みやすいんだろうなあ・・・
内容がわかりやすいのはもちろんだけど、何かそれ以上の秘密がある気がする[/voice]
・
・
・
「あ！文と文の間の行間が広い！！」
ヨスさんのブログは、そのわかりやすさに大変定評があるのですが、よく読んでみると、ほかのブログにくらべて行間が広いことに気がつきました。
他にも秘密はないかと、おなじく大人気ブロガーのももねさん(@momonestyle)のブログを読んでみると、やっぱりふつうのブログとはちがう特徴が。
「文字が大きくて読みやすい！！」
ももねさんのブログは、行間はそれほど広くないけれど、代わりにフォントのサイズが大きくて、特にスマホで見たときにとっても読みやすいんです。
なるほど。
プロブロガーは文章の内容だけじゃなく、デザインの読みやすさにもきちんとこだわっているんですね。
さっそく私も文字の大きさと行間の広さを調整することにしました。
WordPressのフォントの大きさと行間の広さを調整する方法
今回の方法は、WordPressでフォントの大きさと行間の広さを調整する方法です。
[aside type=”normal”]にしむらぼ ではopencage社製のWordPressテーマ『ハミングバード』を使用しており、テーマによってはこの通りでない場合もあります。またテーマの編集には、子テーマやFTPソフトを利用するなど十分注意して行ってください！[/aside]
フォントの大きさを調整する
WordPressでフォントと行間を調整するには、CSSを編集します。
[voice icon=”https://keiichinishimura.com/wp-content/uploads/2016/10/13419286_1115230595184808_5624871928558133347_n.jpg” name=”新米猫ブロガーのメイさん” type=”r”]CSSというのは「カスケーディングスタイルシート」と言って、ブログのデザインを調整することができるプログラミング言語のことね！[/voice]
まずWordPressの管理画面から
【外観】 → 【テーマの編集】
をえらんで、テーマの編集画面をひらきます。
すると、右のほうに
【スタイルシート（style.css)】
というリンクがあるので、ひらいてみましょう。
CSSの編集画面があらわれましたね。
次にCSSを編集する記述を探します。
パソコンで【ctrl】+【F】キーを押すと、検索窓が出てくるので、ここに GENERAL STYLES とコピペして検索してみてください。
font-size と記述されている部分が見つかりましたね！
*********************
GENERAL STYLES
*********************/
body {
font-family: "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 100%;
line-height: 1.5;
color: #545B63;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-wrap: break-word;
}
この font-size の数字を調整するとフォントの大きさを変えることができます。
[aside type=”normal”]フォントサイズ(font-size)や行間（margin-bottom)が記述されている場所はテーマによってちがいます。もし GENERAL STYLES で見つからない場合は各テーマの変更方法をご参照ください。[/aside]
数字は％かpxのどちらかで変更可能です。
ハミングバードの場合、デフォルトが１００％になっていたので、20pxに変更してみました。
好みで調整していただいてかまいませんが、だいたい18pxから20pxくらいが読みやすいかと思います^^
行間の広さを調整する
つづいて行間の広さも調整してみましょう。
行間の広さは、line-height という記述の数値を変更することで調整することができます。
さきほどと同じように【ctrl】+【F】で検索窓をひらいて、
今度は entry content を探してみましょう。
すると、すぐ下のほうに .entry-content p という記述が見つかったと思います。
/* entry content */
.entry-content {
padding: 0 0 0.5em;
overflow: hidden;
}
.entry-content p {
margin: 0 0 3.6em;
line-height: 1.8;
}
.entry-content table {
width: 100%;
font-size: 0.85em;
border: 1px solid #efefef;
margin-bottom: 1.5em;
}
この中に、line-height という記述があるので、この数値を変更します。
数値が大きいほど、行間が広くなります。
ちなみに私は 1.8 に設定しています。
以上で完成です！
うまくできましたか？
もしわからなければ、この記事のコメント欄かTwitter、Facebookからお気軽にお問い合わせくださいね^^
まとめ
本日は、
もっと読みやすいブログにするための、フォントサイズと行間のカスタマイズ方法
をご紹介しました。
より読者さんによろこばれるブログを目指してどんどんカスタマイズしてみましょう♪
