ヒトリゴト こんにちは！はまちょうです。
最近HTMLとCSSの勉強をしたこともあって、ブログの読みやすさについて色々と研究しています。
下の記事がその第一弾です。今回は第二弾として文字の大きさに着目していきます。
文字の装飾やデザインについてはこだわりがあっても、文字の大きさまで変更してみようと思う方は、意外と少ないのではないでしょうか。
この記事では、記事内における文字の大きさの重要性と、その変更方法まで丁寧にお伝えしていきます！
前回同様、誰でもできるように解説していくので、苦手な方もご安心ください。もし記事を読んでもやり方がわからなければ、ご質問も大歓迎です！
なぜ文字の大きさが大事なのか
ブログの読みやすさを勉強する中で上の記事がとても参考になりました。時間がない方のために記事内容を要約すると
- 文字が小さいとSEO上不利になる可能性がある
- はてなブログで人気のあるテーマのうち、ほとんどがその基準を満たしていない
「SEO上不利」とは、検索されにくくなってしまうことです。その基準として16px（pxは文字の大きさの単位）以上がどうかがポイントになるとのこと。せっかく書いた記事だから、できれば多くの方に読んでもらいたい。。
一方ではてなブログの人気テーマのうち、そのほとんどが16px未満になっているという事実。。。
長い間一番人気のデザインである「Minimalizm」もこの基準を満たしていません。
「自分のサイトの文字の大きさは何pxなんだろう？」と不安になった方！
自サイトの文字の大きさについては、GoogleChromeのデベロッパーツールを使えば一発でわかります。
デベロッパーツールの使い方がわからない方は、この記事の方法で実際に文字の大きさを16pxに設定してみてください。
設定前後の文字の大きさを比較して、自分のサイトの文字の大きさが16px以上かどうか確認できるでしょう。
もしもよくわからない方は、コメント欄orはてなブックマークでコメントしていただければ、気づいたタイミングで僕が調べてご回答します。（ブックマークの方がうれしいです！）
その際は、フォントの文字サイズを確認してほしい旨とブログのURLを教えてください。
文字の大きさを変える方法
文字の大きさを変えるために設定が必要な場所
まずは設定が必要な場所を紹介します。はてなブログのダッシュボードから設定＞デザインと進んでいき（左側マーカー部分）
デザインをクリックするとこの画面になるので“工具”マーク＞デザインCSSと進んでいきます。
デザインCSSと書いてある下の部分に文字入力できる箱があります。今回設定が必要な部分はこの部分です。
具体的な設定方法
gist832006418fdb7f7f8d30b33d23fd9749
このコードを、先ほど紹介した箇所に貼っていきます。その際に黄色いマーカー部分の数字で文字の大きさを調整することが出来ます。貼り付ける場所は一番最後でいいと思います。
現在の設定は17px。こちらは今読んでいただいているこのブログと同じ大きさです。実際に自分のブログに適用してみて、いろいろな大きさで試してみてください。
また、貼り付けた後にさきほどの画面左上にある「変更する」ボタンを押して保存するのを忘れないようにしてください。
今回の文字サイズ変更は、記事部分のみに適用されます。はてなブログの仕様上、記事部分の設定変更は一度保存してからでないとみることが出来ないので少々面倒ですがご了承ください。
現在の設定が崩れることが不安な方は念のためバックアップを取ってから作業をすることをお勧めいたします。
間違えて今まであったコードを消してしまったりした場合は、「変更する」を押さずにそのままそっと閉じましょう。笑
そして落ち着いて最初からやり直してみてください！
最後に、念のため一連の作業を下のGIFでおさらいしておきます。
※クリックで動きます。
おわりに
自分のブログを書いているときは、文字の大きさが気になることはあまりありません。しかし、人のブログを読んでいて「読みやすい！」と感じる記事のフォントサイズを調べてみると、どれも16px以上はあることに気づきました。
読み手が疲れてしまうほど文字が小さいと、せっかく頑張って書いた記事も最後まで読んでもらえずもったいない！
ということで、皆さんも今一度自分のブログの文字サイズを確認してみてください！
今回はブログを読みやすくするテクニックの第二弾として、文字サイズの変更をご紹介しました。第一弾の以下の記事もお勧めなので、ぜひご覧ください！！
以上です！ここまで読んでいただきありがとうございました！
コメントを残す