はてなブログのテーマのフォントサイズって小さいものが多いと思いませんか？
はるなぴはどうも小さすぎるように思うのでCSSカスタマイズで大きくしてみました。
今回はブログの読みやすさについても深堀りして考えてみました。
一行の文字数とフォントサイズ、行間、文字間隔など読者が読みやすくなるCSS設定について考えていきます。
はてなブログのテーマInnocentのフォントサイズ設定が小さい
はてなブログを開設してみて、特にスマホで見たときにブログの文字が小さすぎて見にくいなぁと思っていました。
はるなぴは、iPhone6S Plusを使っているのですが、画面が広く見える分、フォントサイズは非常に小さく見えます。読むのに苦労するブログも多いです。
PC版の文字サイズもなんだか小さめに見えますね。もう少し大きい方が読みやすいのではないかなぁ。
そこでpタグ内のフォントサイズを調べてみました。
今Innocentというテーマを使っていますがオリジナルのフォントサイズ設定は16pxでした。スマホでは15px。これは小さいです。もっと大きくして読みやすくしたいと思います。
そこでPC版は17px、スマホはだいたい17.6px、とします。
一行の文字数をどのくらいにしたら読みやすいブログになるのか
なぜPC版は17px、スマホは17.6pxというフォントサイズにするのか？
それは一行の文字数をどの程度にしたら読みやすいのかを考えた結果なのです。
印刷物の場合ですが横書きの場合、1行15文字から35文字が読みやすいそうです。Webサイトの場合もこれに準じて考えます。
PCでの横書き表示は1行35文字までが読みやすい
はるなぴははてなブログのテーマにInnocentを使用しています。PC版ではフォントサイズを17pxに設定すると、ちょうどWindows10のChromeブラウザ35文字に収まるのです。
多くのブログは40文字以上ありますが、これだと少し読みにくいと思います。なるべく改行を多く入れて、1行がパッと一度で目に入るようにすること。これがポイントです。視線移動が少なくなるため、とても読みやすくなるのです。
普通16pxのフォントサイズがPC版の標準サイズと考えられているようですが、読みやすさを考えたら17px以上であっても良いとはるなぴは考えています。
iPhoneでは一行15文字から21文字程度が読みやすい
スマホではどうでしょうか？
日本ではiPhoneのシェアが異常に高いので、まずはiPhone基準で考える必要があります。
iPhone6/7/8Plusは横幅414px、iPhone6/7/8/Xは375px、iPhone5/SEが320pxとなっています。
| 機種 | 横幅 |
|---|---|
| iPhone6/7/8Plus | 414px |
| iPhone6/7/8/X | 375px |
| iPhone5/SE | 320px |
スマホのフォントサイズを17.6pxにすると一行の文字数は大体以下のようになります。
| 機種 | 文字数 |
|---|---|
| iPhone6/7/8Plus | 21文字 |
| iPhone6/7/8/X | 19文字 |
| iPhone5/SE | 15文字 |
はるなぴがスマホのフォントサイズ17.6pxを推奨する理由がここにあります。
スマホの場合はPCより更にシビアです。
パッと見て一行がなるべく視線移動なしに目に入るようにする必要があります。要は読んでいるという感覚ではなく、見ているという感覚に近づける必要があるわけです。
iPhone5系の場合、一行の文字数が15文字となり、これは長文ではスクロール量が多くなります。却って読みにくい場合もあるかもしれません。しかしきちんと読んでくれる読者がいればページの滞在時間が延びてSEO的には効果があるかもしれません。
今はまだiPhone5系のシェアが残っていますが、それも今年ぐらいまでではないかと考えています。画面サイズはだんだん大きいものが好まれるようになってきています。
JKも今はコンパクトサイズではなく大きめのサイズを好むようです。これはInstagramなど画像、映像に関わるアプリが好評を博していることも影響しているのではないかと思っています。
行間や文字間隔についても考えてみる
ブログで表示される文章の行間や文字間隔についても考えてみましょう。
行間は少なすぎると上下の文字が詰まってとても読みにくくなります。しかし逆に行間が広すぎるのもまた読みにくいものです。
多くのブログでは行間に1.7を指定していることが多いと思います。はてなブログのテーマInnocentも1.7です。
はるなぴが確認してみたところスマホではフォントサイズを大きくしても1.7ぐらいが読みやすいと感じました。しかしPC版ではフォントサイズを普通より少し大きくしていますので行間も1.8に変更した方が良いと考えています。
行間の指定はCSSではline-heightプロパティを使用します。いろいろな流儀がありますが、はるなぴはパーセント指定やem、rem指定ではなく倍率の数字そのものを指定するのがお勧めです。
例えば、line-height: 1.8などとします。
文字間隔についても同様です。PC版ではletter-spacing: .4pxとして文字どうしの間隔を少しあけ、読みやすく調整します。
letter-spacingプロパティは文字の間隔を指定する時に使用します。
外部CSSファイルを使用するメリット
フォントサイズのカスタマイズは外部CSSファイルを使って修正していきます。
外部CSSを当てることのメリットとして、テーマのCSSよりも後に効くということがあります。
つまり同じCSSプロパティがあれば外部CSSの方が優先順位が高くなり上書きされていきます。
外部CSSを使わずに「デザインCSS」の窓を使ってCSSカスタマイズを施そうとするとテーマのCSSプロパティとの優先順位が問題になることがあります。つまりCSSを書いてもうまく働かない場合もあるということ。
きちんと効かせるためには優先順位を精密に計算する必要も出てきます。しかしこれは面倒くさいです。（CSSの勉強にはなるかもしれませんが）ですので外部CSSを当てることがお勧めです。
こちらの記事を参照してみてください。簡単ですしスマホでも効きます。
テーマInnocentのfontsizeを大きくするCSSカスタマイズ
それではCSS設定を見ていきましょう。
外部CSSファイルに次の設定を書き込みます。
p {font-size: 1.1733em}もとのテーマInnocentのフォントサイズ設定はbodyで15pxを指定していますから、15×1.1733＝～17.6pxと計算されます。
スマホではこのくらいの大きさがあった方が見やすいと思います。15pxではつぶれそうなくらい小さく見えます。
はてなブログの他のテーマもそうなんですが何故かスマホのフォントサイズのデフォルトが15pxあたりです。どのテーマを適用しても非常に小さく見えます。もっと大きい方が良いと思います。
更にファイルの下の方に次のメディアクエリを書きます。
@media screen and (min-width: 980px) {
p {font-size: 1.1333em;
letter-spacing: .4px;
line-height: 1.8}
}横幅が980px以上のサイズの画面では17pxの大きさで表示されます。PC版では16pxでフォントを表示させているブログが多いと思います。しかし前にも書いたようにフォントは（ホントは）もっと大きめのサイズの方が読みやすいと思います。
これでレスポンシブかつモバイルファーストなCSSの記述ができました！
ハズキルーペが売れる理由はブログの文字が小さすぎだからでは？
ハズキルーペが売れているようですね。
渡辺謙さんと菊川怜さんのCMもなかなかインパクトがあります。でもハズキルーペが売れている理由は実はブログの字が小さすぎて読めないからでは（笑）
今では50代、60代の方でもスマホを持っているのは当たり前の時代になりました。だからスマホで文字が小さすぎると老眼で読めない方が増えます。これは困ったことです。
皆さんも自分のブログの表示を一度スマホで確認してみてくださいね。
文字が小さくて読みにくいと思ったらCSSを書き換えてカスタマイズするのがお勧めです！