基本的なテーマを変更してからも、細かい調整を続けています。今日はちょうどほかのブログで読みやすくするとかそういう話題を見かけたので、最近の私が気をつけている「読みやすさのためのcss」について。
ちなみに読んだのはこのブログ記事ですが、今回の記事内容はこちらで言及されている内容とはあまり関係ありません。
…と言うかこのブログ、突っ込みどころがけっこうありますね。そういうの狙ったサイトなんでしょうか…。せめてタイトルタグくらいまともに付けて欲しかった。
余白とフォントサイズの調整
調整したのはスマホ版のことです。左が以前の状態で、右が今の調整後の状態です。スマホ版（というか横幅が540px以下の場合）はPC版ChromeのデベロッパーツールやPC版Firefoxのレスポンシブデザインビューを使って表示確認しているのですが、その時は余白にあまり気が向いてなかったんですね。
実際に自分の記事をスマホで見ていたら、横の余白が少なすぎて詰まった感じというか、スマホの画面端に置いた指にテキストがかかるような気がしました。これはなんだか狭い印象があったので、余白を広げることにしました。
ついでに、テキストサイズも少し大きくしました。（というより小さくしていたのをやめました。）これでスマホでは（機種にもよりますが多くの場合は）横22文字程度になったと思います。PC版だと46-48文字程度でしょうか。
もちろん人によって環境によって変わりますが。一般に日本語の場合は1行あたり40-43文字程度が読みやすいとされています。今回の私の場合はそれを少しオーバーしていますね。これが50文字を超えると、もう明らかに読みにくいというか、右端から次の行の左端へ行くのに視線移動が大きく、その間にどの行を読んでいたのか見失う危険があります。
テキストサイズが小さいとなんだかクールっぽい感じになるのでそうしているサイトもありますが、読みやすさとのバランスは難しいですね。
行間の調整
これはとりあえず現在のテーマにしたときからですが、記事本文の行間はcssでline-height:1.8;と設定しています。ここが詰まっていると、なんだか文章自体も詰まって大きな塊に見えます。読む気が失せてくるんですよね…。
この行間、アルファベットの場合はうろ覚えですが150％くらいが良いとされていて、日本語だともう少し広いほうが？と言われています。なので私がテーマを作り始めた時は1.7設定だったのですが、のちに1.8に変えました。適当に例を見せてみましょう。
line-height:1.2;の場合
line-height:1.5;の場合
line-height:1.8;の場合
line-height:2.1;の場合
まとめ
どうでしょうね。好みやら何やらありますが、ある程度は行間に余裕があったほうが、やはり読みやすいと思います。
文字の大きさについては、このブログは意図的に「ちょっと小さめ」にしています。もう少し大きい方が読みやすいと言えば読みやすいんですけどね。このあたりの調整は今後も随時行っていきますが、なかなか難しいですね。
