雑記ブログ卒業

生活に役立つ雑記ブログ

はてなブログの文字サイズを変更するカスタマイズが超簡単です。

どうも。「ざっきぶろぐ」です。

 

つい先日。とあるニュースサイトで、はてなブログに関する豆知識を知りました。

それは、「はてなブログの文字サイズは小さ過ぎる」という話。

 

実際に自分のブログをスマホで見てみてみると…確かに小さいです。

そこで今回、はてなブログの文字サイズを大きくしてみました。

 

f:id:zakkiblog:20180527225938j:plain

 

文字サイズを変更する方法

はてなブログの文字サイズを変更するには、はてなブログのカスタマイズ画面から、デザインCSSにコードを入力します。

 

f:id:zakkiblog:20180527230248j:plain

 

貼り付けるコードは以下の通りです。

 

.entry-content {
font-size:17px;
}

 

このコードをデザインCSSに入力し、保存するだけで完成です。17pxの所のサイズを変えることで、色々な文字サイズに変更できます。

 

文字サイズは16pxが定番?

色々調べてみましたが、最近は16px以上が良いようです。以下の記事がとても参考になりました。フォントサイズに関して、有名なウェブサイトを色々比較しているので、面白いです。

 

【検証】スマートフォンで読み易いfont-sizeとは? | SEO対策なら株式会社ペコプラ

 

あまりにも小さ過ぎると読みづらいですし、大き過ぎると読むのに時間が掛かります。それで一番定番なのが16pxなんだそう。ちなみにブロガーの中には20pxを使っている人もいました。

逆に文字が大き過ぎるのも、意外とインパクトがあって良いのかもしれません。

 

スマホの文字サイズを変更する場合

スマホの文字サイズを変更する場合、レスポンシブデザインなら、変更する必要はありません。スマホ専用のカスタマイズの場合はコードが必要になります。ポイントは、前後に<style></style>で挟むだけ。

 

f:id:zakkiblog:20180527231521j:plain

 

スマホカスタマイズの、ヘッダ > タイトル下 に以下のコードを記述したところ、上手くいきました。

 

<style>
.entry-content {
font-size:17px;
}
</style>

 

このコードをスマホカスタマイズのタイトル下に貼り付けます。

17pxの所を変更すると文字のサイズを変えることができます。

 

まとめ「読みやすくなった」

文字のサイズを変更すると、格段に読みやすくなります。特に、はてなブログの「Minimalism」などのテーマはシンプルなデザインが持ち味のため、文字も小さめに設計されています。

 

私のブログも文字が小さかったんだなあ…と実感しました。もし悩んでいる方は、特にスマホ画面で自分のサイトを確認してみてください。意外と文字が小さい事があるかもしれません。

 

そんな感じで今日はおしまいです。

 

by ざっきぶろぐ