どうも！フジグチです！
今回はブログの基本に返って記事を読みやすくするカスタマイズを確認したいと思います。
この設定はブログを書き始める時に出来るだけ早くやると、記事の書き方のルールを固めることが出来るので早めにすることをお勧めします。
100記事超えてから変更するとリライトに苦労するかも。。。
珍しく長い記事となっていますが、各項目の説明をした後に当ブログで設定しているコードを紹介しているので、最後までお付き合いください。
フォントサイズ
まずはフォントサイズです。
cssでの指定はfont-size:値○○;になります。
ブラウザのデフォルトの値は16pxになっていますが、フォントサイズはテーマ毎に指定されたりもしています。
フォントサイズの実例
はてなブログの人気テーマのフォントサイズを見ながら確認してみます。
15px
16px
17px
Googleの推奨フォントサイズは16px「以上」とありますが、あまり大きすぎるとスマホ表示時に何度も改行され目の動きが多くなり逆に読みづらくなるので、16px前後で好みで決めて良いと思います。
真面目な固い文なのにフォントが大きすぎても不恰好ですし、明るく楽しい記事なのにフォントが小さいと楽しさ半減⤵のようにブログの雰囲気にも影響してくると思うので、ご自身のブログのコンセプトに合わせて決めると良いです。
行間
実は文字の大きさ以上に読みやすさに関わってくる重要な部分。
cssでの指定はline-height:値○○;になります。
行間の実例
実際にline-heightの例を挙げて見てみましょう。
line-height:1の場合
line-height:1の場合
line-height:2の場合
line-height:2の場合
近すぎるのは当然のことながら、あまり広すぎるのも一つの段落として捉えづらくなってしまいます。
行間について詳しく知りたい方はサルワカさんのこの記事が分かりやすいです。
この記事を読んだら、分かりやす過ぎて行間について詳しく書く気がなくなりました（笑）
【CSS】line-heightで行間を調整する方法：おすすめの値は？
段落の余白
段落の終わりに下に出来る余白です。記事を書く際にenterキーを押した時に段落が変わります。その段落間の余白です。
CSSでの指定方法は色々ありますが、ここではp margin-bottom:値○○;とします。
ちなみにこの文章は自分のお気に入りの記事の一部を抜粋したものです。
改行で余白の調整をしない
ここで注意して欲しいことがあります。
下の画像はメインブログの記事の一部を抜粋したものですが、一見すると余白がしっかり取れているように見えます。
しかし文章を反転させてみると、段落を空欄にして余白を無理やり作っているのが分かります。
この無駄な改行をなくす為にCSSで余白の調整を行うのです。
ちなみにこの記事は私のブログについて妻が書いた記事です。よかったらお読みください。
話を戻して、この時のHTMLの状態を見てみます。
<p></p>タグの間に「●」があるのが分かりますでしょうか？この「●」の正体は （ノーブレークスペース）というものです。
これは空白を作ろうとしてenterキーを連続して押すと空の<p>タグが生成され、その空の状態を補完するために自動で挿入されたものです。
「 の多用はseo的に不利になる」という記事や▽
【HTML】SEO的にNG？やってはいけない「改行」を”2つ”紹介するよ！ | nuconeco
「Googleのお偉いさんがそのことについては否定している」という記事もあります。▽
正しいHTMLは検索順位に影響する？ | アレグロのSEOブログ
興味のある方は上のサイトを参考にしてみてください。
段落間の実例
ノーブレークスペースを使わないでも、段落間の余白を確保するためにCSSで段落下の余白の調整を行います。
実際に見てみましょう。
p margin-bottom: 1em;の場合
標準的な段落の余白です。
段落間1emは1文字分という意味です。
p margin-bottom: 2em;の場合
少し広めの段落の余白です。
段落間2emは2文字分という意味です。
これは好みで構わないと思いますが、上述した行間を広くした場合は、段落間の余白も広くしないと段落が変わったことが分かりづらくなるので、合わせて調節してください。
余白は少し広めのほうが読みやすい気がしますが、過剰に大きくしすぎると無駄なスクロールが増え、読者としてはストレスに感じるかもしれません。バランスを大事にしましょう。
字間
字間は1文字ごとの文字同士のスペースです。
cssでの指定はletter-spacing:値○○;になります。
はてなブログの人気テーマTOP10の中で調べると、字間の指定がされているのは4つのテーマでした。
中でも一番広かったのは当ブログでも使用している【UnderShirt】です。
何も指定しない０の状態のテーマも多いですが、UnderShirtのデフォルトの状態は0.08emという値が指定されています。
字間の実例
これも実際に見てみます。
letter-spacing: 0の場合
letter-spacing: 0.08emの場合
差が小さすぎて分かりづらいかもしれませんが、文字と文字の間のスペースが違います。
その違いによって改行の位置が変わり、文章の終わる場所も違います。
例はほんの35文字程度ですが、1記事3000文字と仮定するとその差はかなり大きいものになります。
またemという単位は1文字に対しての相対的な値なので、フォントサイズを大きくした場合、合わせて字間も広くなってしまうので注意が必要です。
人気テーマの設定確認
はてなブログの人気テーマトップ10の設定はどうなっているか見てみましょう。
このリストは6/18時点で当ブログで確認したものです。ランキングは頻繁に変わっています。
画面サイズによってフォントサイズを変えているテーマもあるので、スマホ表示時の設定で比較しています。
比較しやすいように勝手に単位を変えているもの（例：Minimalismの行間34px⇒2.26）もあるのでご了承ください。
| はてなブログ人気テーマ設定早見表 | ||||
| テーマ | フォント | 行間 | 段落間 | 字間 |
|---|---|---|---|---|
| Minimalism | 14px | 2.26 | 1em | 0 |
| UnderShirt | 16px | 1.6 | 0.08em | |
| Brooklyn | 1.7 | 0 | ||
| Haruni | 1.6 | |||
| Innocent | 15px | 1.7 | 1.5em | |
| SOHO | 14.6px | 2 | 1em | 0.04em |
| Blank | 16px | 1.7 | 1.6em | 0 |
| JOURNAL. | 15px | 1.85 | 1.5em | 0.03em |
| DUDE | 14.4px | 1.8 | 1em | 0 |
| ZENO-TEAL | 1.5em | 0.01em | ||
テーマ毎に設定がかなり違いますね。Minimalismの行間の広さが際立っています。
おすすめ設定
最後に当ブログの設定コードをご紹介します。
まずCSSを貼る場所を確認しておきます。
続いてコードです。
/*-----記事本文の設定-----*/
.entry-content p {
font-size: 17px; /*フォントサイズ*/
line-height: 1.7; /*行間*/
margin-bottom: 1.8em; /*段落の余白*/
letter-spacing: 0; /*文字間*/
}「段落の余白」の部分は今までの記事でenterキーによる改行でスペースを確保してきた方はデザインが大きく崩れる可能性がありますのでご確認ください。
お使いのテーマや先に入れたCSSと干渉してうまく反映されないことがあります。
その場合は「;」の前に!importantと付けることで反映することが出来ると思います。
例：font-size: 17px!important;必ず半角で入力してください。
長くなりましたが、自分の書いた記事を快適に読んでもらうために必要なカスタマイズだと思いますので、参考にしてみてください。
最後までお読み頂きありがとうございました。
