ブログカスタマイズ｜文字サイズ・行間の最適化 PCとスマホの設定方法｜はてな初心者

ブログカスタマイズ文字サイズ・行間隔の最適化 PC・スマホの設定方法

数ある中から当ブログを訪問していただきありがとうございます

ブログを運営する目的って訪問者が楽しく読んでもらえる様な記事作りを目指しますよね。記事の内容は特に気を使っているはずです。

ですが記事の内容がどんなに有益であっても文字サイズや行間隔がアンバランスであれば、訪問者からすると読みにくい記事となってしまいます。

今回の記事では

文字サイズ・行間隔についての考え方と、PCとスマホのそれぞれの整え方を分り易く解説していきます。

1回しっかりと整えておけば、後は記事に集中できますのでブログを立ち上げたばかりの方は最初にしっかりと準備をしましょう。

こんな方におすすめ

訪問者が読みやすいブログサイトにしたい
文字サイズと行間隔の変更方法を知りたい
スマホでの設定方法が知りたい
文字サイズはSEO効果がある

適正な文字サイズと行間隔
- 文字サイズイメージ
- 行間イメージ
CSSコード追加でデザイン変更
スマホからの見え方も意識しましょう
『文字色』にも注意！
まとめ

適正な文字サイズと行間隔

適正のフォントサイズは16pxが標準になります
理由はGoogleが推奨するモバイルフレンドリーとしてフォントサイズをチェックしているからです。フォントサイズが15px以下だと文字が小さすぎると判断されて検索結果の順位も下げられる可能性があります

フォントサイズ：16px以上ならSEO的にOKです

あとは実際に自分のサイトデザインに併せて訪問者が読みやすい文字サイズにすると良いでしょう。

ちなみにブログ堂は文字サイズ：18px　行間：1.8に設定しています。

文字サイズイメージ

文字サイズは16pxから17pxに設定されている方が多いみたいです。

文字16px 行間1.5

文字17px 行間1.5

文字18px 行間1.5

行間イメージ

行間は一般的に1.7から2.0に設定されている方が多いみたいです。

文字16px 行間1.5

文字16px 行間1.7

文字16px 行間2.0

CSSコード追加でデザイン変更

文字サイズの変更CSS

行間の変更CSS

行間隔に単位は指定しない

単位を em などで指定しているブログもありますが文字サイズを変更する場合は注意が必要です。

単位を指定した場合、文字サイズによっては文字同士が重なることがある
単位を指定しない場合、文字サイズ基準で行間隔を開けてくれるので、文字サイ文字同士が重なるような事故を防ぎます。

文字サイズと行間隔のコードを合わせたコード

どちらも変更する場合は合わせたコードにした方が管理しやすくなります

おすすめ HTML5＆CSS3デザインレシピ集

はてなブログにCSSコードの追加

※CSSコードに追記しますので、あらかじめバックアップを取ることをお勧めします

CSSコード追加

【デザイン】⇒①【カスタマイズ】
②｛｝デザインCSSをクリックします
③コードを追加します
④変更を保存するをクリックします

f:id:hato4268:20201012151608j:plain

スマホからの見え方も意識しましょう

＜超重要＞

CSSコードでデザインを変えた後はスマホからどう見えるのかもチェックしましょう

『ブログ堂』の訪問者は4割はスマホからの流入です。ブログのジャンルによっては5割を超えています。今後スマホからの流入が加速します。

PCで文字サイズを大きく、行間隔を広くしたのであればスマホでも同じ状況になります。
スマホの狭い画面では文字サイズ・行間隔を大きくすることで表示される文字数が少なくなり、かえって読みにくくなる場合があります。
※スクロール回数が増えることはGoogleはユーザビリティが低いと判定する場合があります。