はるなぴログ

ブログ・WEBサイト作成技術研究

ブログの文字が小さいのでフォントサイズをCSSで大きくしてみた

ブログの文字サイズって小さいことが多いと思いませんか?

今回は一行の文字数とフォントサイズ、行間、文字間隔など、読者が読みやすいCSS設定について考えていきます。

1行の最適な文字数を元にブログの読みやすさについて深堀りしてみました。

デフォルトの文字サイズサイズが小さい設定で読みにくいように思えたのでCSSカスタマイズで大きさを調整し、最適なブログデザインを目指します。

f:id:hal7pi:20190720171431j:plain

はてなブログテーマの文字サイズ設定が小さい

はてなブログを開設してみて、スマホで見たときにブログの文字サイズが小さすぎて見にくいなぁと思っていました。

はるなぴは、iPhone6S Plusを使っているのですが、スマホの画面が広く見える分、フォントサイズは非常に小さく見えます。読むのに苦労するブログも多いです。

PC版のブログの文字サイズもなんだか小さめに見えますね。もう少し大きい設定の方が読みやすいのではないかなぁ。

pタグのフォントサイズを調査

pタグのフォントサイズを調べてみました。

フォントサイズなどCSS設定を調査するにはCSSViewer(CSSビューワ)というChromeブラウザの拡張機能を使用するのが超便利です。カーソルを当てるだけでピクセルサイズがすぐに分かります。

こちらの記事で紹介していますので是非インストールしてみてください。

www.halu7.com

さて結果は?

はてなブログのテーマInnocentを使っていますが、オリジナルのフォントサイズ設定は16px(16ピクセル)でした。スマホでは15px。これは小さいです。もっと大きくして読みやすくしたいと思います。

そこでPC版は18.2px、スマホはだいたい17.6pxとします。

1行の文字数をどのくらいにしたら読みやすいブログデザインになるのか

なぜPC版は18.2px、スマホは17.6pxというフォントサイズにするのか?

それは一行の文字数をどの程度にしたら読みやすいのかを考えた結果なのです。文字サイズの最適値がこのくらいと割り出しました。

印刷物の場合ですが、横書きの場合、1行15文字から35文字が読みやすいそうです。Webサイトの場合もこれに準じて考えます。

ブログでの横書き表示は1行35文字ぐらいが読みやすい

はるなぴははてなブログのテーマにInnocentを使用しています。PC版ではフォントサイズを18.2pxに設定すると、ちょうどWindows10のChromeブラウザ表示で1行が35文字に収まるのです。→Googleアドセンスの広告をダブルレクタングルで配置するためカスタマイズして少し幅を広げたので今は一行が36文字になっています。

アドセンス広告をダブルレクタングル配置(横に2つ並べる)するデザインについてはこちらの記事をご参照ください。

www.halu7.com

多くのブログは40文字以上ありますが、そうしたデザインだと少し読みにくいと思います。なるべくパッと一度で目に入るようにすること。これがブログを読みやすくするポイントです。視線移動が少なくなるため、とても読みやすいのです。1行の文字数が多いと行の中を視線移動しながら文字を辿っていくので読みにくいということになります。

普通16pxのフォントサイズがPC版の標準サイズと考えられているようですが、ブログの読みやすさを考えたら文字サイズは18px以上であっても良いとはるなぴは考えています。

スマホでは1行15文字から20文字程度が読みやすい

スマホではどうでしょうか?

日本ではiPhoneのシェアが異常に高いので、まずはiPhone基準で考える必要があります。→と思っていましたが、どうも状況が変わってきたようでAndroidのシェアがiPhoneを抜いたとのこと。iPhoneのシェアが高いのは女性、特に10代女性ということなので、はるなぴも今後は2台目としてAndroid端末も購入する必要が出てきました。

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 20文字
iPhone6/7/8/X 18文字
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設定をしてみましょう。

スマホでは以下のようになります。フォントサイズの指定にはfont-sizeを使います。

p {
  font-size: 17.6px;
  letter-spacing: .4px;
  line-height: 1.7
}

タブレットより大きい端末ではメディアクエリを使って次のように書けばレスポンシブに設定することが可能です。

@media screen and (min-width: 768px) {
  p {
  font-size: 18.2px;
  line-height: 1.7
  }
}

はてなブログテーマInnocentのフォントサイズを大きくするCSSカスタマイズ

はてなブログテーマInnocentのCSS設定をする場合を見ていきましょう。

はるなぴは外部CSSファイルを設定していますので次のCSSを書き込みます。

p {font-size: 1.1733em}

もとのテーマInnocentのフォントサイズ設定はbodyで15pxを指定していますから、font-sizeは15×1.1733=~17.6pxと計算されます。

スマホではこのくらいの大きさがあった方が見やすいと思います。15pxのフォントサイズではつぶれそうなくらい小さく見えます。

はてなブログの他のテーマもそうなんですが何故かスマホのフォントサイズのデフォルトが15pxあたりです。どのテーマを適用しても非常に小さく見えます。スマホではもっと大きい文字サイズの方が読みやすいと思います。

更にCSSファイルの下の方に次のメディアクエリを書きます。

@media screen and (min-width: 980px) {
p {font-size: 1.1375em;
  letter-spacing: .4px;
  line-height: 1.8}
}

横幅が980px以上のサイズの画面では18.2pxの大きさで表示されます。PC版では16pxでフォントを表示させているブログが多いと思います。しかし前にも書いたようにフォントは(ホントは)もっと大きめのサイズの方が読みやすいデザインになると思います。

これでレスポンシブかつモバイルファーストなCSSの記述ができました!

はてなブログのCSSカスタマイズは外部CSSファイルを使うと非常に簡単に修正ができます。はるなぴはDropboxに置いて使っています。詳しいことはこちらの記事をご参照ください。

www.halu7.com

まとめ

ハズキルーペが売れる理由はブログの文字サイズが小さすぎだからでは?

ハズキルーペが売れているようですね。渡辺謙さんと菊川怜さんのCMもなかなかインパクトがありました。でもハズキルーペが売れている理由は実はブログの文字サイズが小さすぎるのが原因では?(笑)

今では50代、60代の方でもスマホを持っているのは当たり前の時代になりました。だからスマホで文字が小さすぎると老眼で読めない方が増えます。これは困ったことです。

皆さんも自分のブログの表示を一度スマホで確認してみてくださいね。

文字が小さくて読みにくいと思ったらCSSを書き換えてフォントサイズをカスタマイズするのがお勧めです!読みやすいブログデザインで読者ファーストを目指しましょう。

それと、スマホで見ているとPC版のデザインが表示されるブログがたまにあります。PC表示をスマホで見ると文字サイズが小さいのでとても読めたものではありません。いちいち拡大するのも読みにくいのですぐに閉じてしまうことが多いです。レスポンシブなテーマにしていない方はスマホでも読みやすいデザインとなっているかどうか確認されることをお勧めします。