ReRICK

忘れるな、いつか必ずそれは来る

ブログデザインの微調整:フォントサイズや余白、行間を調整して読みやすく

f:id:c-miya:20170220230548j:plain 基本的なテーマを変更してからも、細かい調整を続けています。今日はちょうどほかのブログで読みやすくするとかそういう話題を見かけたので、最近の私が気をつけている「読みやすさのためのcss」について。

ちなみに読んだのはこのブログ記事ですが、今回の記事内容はこちらで言及されている内容とはあまり関係ありません。

…と言うかこのブログ、突っ込みどころがけっこうありますね。そういうの狙ったサイトなんでしょうか…。せめてタイトルタグくらいまともに付けて欲しかった。

余白とフォントサイズの調整

f:id:c-miya:20170220231641j:plainf:id:c-miya:20170220231646j:plain

調整したのはスマホ版のことです。左が以前の状態で、右が今の調整後の状態です。スマホ版(というか横幅が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;の場合

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)

まとめ

どうでしょうね。好みやら何やらありますが、ある程度は行間に余裕があったほうが、やはり読みやすいと思います。

文字の大きさについては、このブログは意図的に「ちょっと小さめ」にしています。もう少し大きい方が読みやすいと言えば読みやすいんですけどね。このあたりの調整は今後も随時行っていきますが、なかなか難しいですね。