今回はスマホの文字サイズと行間をカスタマイズしていく方法を紹介していきます。
ナオログで使用しているWordPressテーマ『TEH THOR』はAMPにも対応しており、SEO的には間違いのないテーマで気に入っています。
しかし、唯一気に入らないのがスマホでの文字のサイズや行間です。控えめに言っても最悪。離脱率高くなるんじゃね?って思ってしまいます。せっかく良い記事書いても見づらいと読んでもらえないのでカスタマイズしていきます。
スマホでの最適な文字サイズは?行間は?
スマホでの最適な文字サイズについては、正解はありません。
それならば、大手のSEOサイト(バズ部やLIGなど)が選択しているサイズが参考になるだろうと考えググってみました。(自分で調べるのは面倒なのでそんなときはググちゃえ)
世の中面倒な作業をしてくれる人・会社は必ずあります。【検証】スマートフォンで読み易いfont-sizeとは?という、私の望んだ答えを調べてくれているサイトを発見!!
ペコプラさん28社(Yahoo!やLIG、バズ部含む)の調査によると次のとおりです。
- スマホ本文の文字サイズは16px
- スマホ本文の文字行間は1.5
- スマホの場合ジャンプ率が低い
28社調べてくれたペコプラさんに感謝です。28社の集計かなり時間かかるよね。。。
追加cssで一気に変更
ペコプラさんの結果をもとにフォントサイズと行間を変更していきます。
コピペしてもらって問題ありませんが、カスタマイズは自己責任でお願いします。
/*スマホ表示時のフォント調整*/ @media screen and (max-width:750px) { .content h2{ font-size:19px; padding: 10px; } .content h3{ font-size:18px; padding: 10px; } .content h4{ font-size: 17px; padding: 10px; } ep-box, p, li{ font-size: 16px; line-height: 1.5; padding-left: 10px; } }
文字サイズを基本16pxに設定し、H4→H3→H2の順に1pxずつ大きくしていってますが、H2をもう少し大きくしたいときなどは自由に変更して使ってください。
ついでに見出しだけパディングが広く設定されていたので、本文の文字と合わせるようにして読み進めていく違和感を無くすようにしています。
スマホの文字サイズと行間のカスタマイズ:まとめ
Googleからはモバイルファーストでブログ運営しろよと叫ばれ続けているので、スマホユーザーからも読みやすい表示にすることはSEO上めっちゃ大切です。
追加cssで簡単に変更できるので試してGoogleに評価してもらいましょう!
スマホの文字サイズと行間のまとめ
- スマホ本文の文字サイズは16px
- スマホ本文の文字行間は1.5
- スマホの場合ジャンプ率が低い