ストレスフリー生活研究ラボ

ストレスフリー生活研究ラボ

全てのサラリーマンのための、心と体が整うストレスフリーな生き方探し

はてなブログは文字が小さすぎて読めない!【リスクと解決方法】

こんにちは!【ストレスフリーの探求者】チャオ酢です。
今回は、はてなブロガーのあなたに役立つ情報です。

ブログ記事を書いた後、PCとスマホでちゃんと記事の表示チェックしてますか?

この記事は、以下の項目が当てはまる方にオススメです。

    ✔︎はてなブログのカスタマイズに興味があるが、難しい技術はわからない
    ✔︎自身のブログをみて、「字、小さくない?」と思っている
    ✔︎ちゃんとユーザーが読みやすい記事にしたい

スマホでサクッと情報を得たい多くのユーザーが、細かい文字が羅列された記事に当たったら、普通はさっさと閉じて次の記事に移ります。

だって、難しそうで読む気が失せちゃいますもん

なのに、僕は「小さいなー」と思いつつ、記事を書いたことに満足して、約5ヶ月間放置していました笑

せっかく良い記事を書いて、検索上位に来てクリックしてもらっても、今のままだとユーザーにはまともに読んでもらえません。
もったいないです

この記事では、文字サイズが小さいことのデメリットとともに、具体的な解決策(カスタマイズ方法)を紹介します。

 

まずは違いを実感してください

はじめに、僕が文字サイズを直す前と後でどれぐらい変わったかを実感していただきましょう。

僕の過去記事ブログが書けない!そんなあなたを確実に救う方法を元に、実際の変化をご覧ください。

<修正前>
文字サイズ修正前

<修正後>
文字サイズ変更後

ちょっと縮小がかかっていますが、相当印象が変わりませんか?

これが今回のゴールです。

僕のブログのデザインテーマは「Minimalism」を使っていますが、今回の話ははてなブログのほとんど全てのテーマ共通の問題です。

 

 

文字が小さいとSEO的にもマイナスです

google
文字サイズの小さいと、SEO的にもマイナスです。実はGoogleが推奨する文字サイズがあるのをご存知でしょうか。

それが16px(ピクセル)以上です。※px…大きさの単位だと思ってください
これ、PCでもスマホでも同じです。

Googleが出したSEOチェックのためのChrome拡張機能Lighthouseでも文字のサイズについて「ページ内の75%以上の文字が16px以上」であることをチェックする項目があります。

これはつまり、Googleの検索上位に上がるために、文字サイズが重要ポイントの1つになっているということを示しています。

Googleはユーザーである検索者が、正しく・わかりやすいサイトにスムーズに辿り着けるようにすることを使命としています。
ユーザーにとって使いやすい検索サービスユーザーが多く集まるサービス広告価値が高い媒体として、ビジネスが成り立っているわけです。
なので、「読みやすい文字サイズ」も重要な要件になるようですね。

 

 

なのに、はてなブログときたら・・・

文字が小さい

SEO的に重要な文字サイズですが、はてなブログは公式テーマがPC・スマホ共に14pxの設定になっています。

そして、恐ろしいことに公式以外のカスタマイズテーマのほとんども14pxの設定になっています。

ですので、僕が使っている人気No.1テーマ「Minimalism」も当然14pxですが、今は17pxにカスタマイズ(方法は後ほど)しています。見た目の差は、先ほどの比較画像の通りです。

はてなブログは、何もしなければ読みにくい文字が小さい記事が仕上がる構造になっているんです。

 

 

トップブロガーさんのサイトを見てみましょう 

トップブロガー

では、トップブロガーさんたちの文字サイズはどうなっているでしょうか。
今回はChrome拡張機能WhatFontを使って調べてみました。

クロネのブログ講座

ブログ初心者のための教科書的存在として有名なブログですが、こちらは17px
(僕は勝手に師匠と崇めているので、同じ17pxにしました)

クロネのブログ講座|趣味ブログで自分の好き・得意・趣味を自動販売機化する方法

manablog

マナブさんも有名な方ですね。今では海外移住して生活されているとか。こちらのブログもなんと17px
manablog

マクリン

マクリンさんもガジェット系のアフィリエイターとしてトップクラスの方です。このサイトも17pxです。 

マクリン | ガジェット8割・家電2割のレビューブログ

これはもう17pxで決まりですね!
では、お待ちかねの「文字サイズの変更方法」をご紹介します。

 

 

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

文字サイズを変更する方法を2パターン紹介したいと思います。
どちらも簡単なので、目的に合わせて使い分けてください。

[1]デフォルトの文字サイズを変更(デザインCSS

こちらはデフォルトを上の設定でした上で、記事の文字サイズにもう少し遊びを入れるためのテクニックです。
方法は簡単。「デザインCSS」にこのコードを入れるだけです。

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

<設定方法>
・上のコードをコピーして、「デザイン」の編集画面へ

・下記の手順で「デザインCSS」の編集画面へ行き、コードを貼り付け

スマホ版の設定もこれで変わるはずですが、うまくいかなかった場合は以下のコードも貼ってみてください。

@media screen and (max-width: 480px){.entry-content p {font-size: 17px;}}

 

[2]都度、ちょうど良いサイズに調整(編集モード)

こちらは記事の文字サイズを[1]で設定でした上で、記事の内容に合わせて文字サイズを微調整するためのテクニックです。 
一般的な方法だと、編集モードで文字サイズを大きくしようとすると、中(150%)しか選べず、はちゃめちゃな大きさになってしまいます。
このテクニックを使えば、以下のような文字サイズの微調整ができます。

文字サイズ

文字サイズ

文字サイズ

文字サイズ

<設定方法>
・ブログの編集画面で変更したい文字をドラッグし、文字の大きさを選択設定画面1
・「標準」以外を選択
設定画面2
・「HTML編集」で、コードの「○○%」の部分を変更する
設定画面3

 

気付いたらすぐに変更しましょう

本当に簡単なことで劇的に見た目が変わりました。なんで今までやってこなかったんだろうと反省しています。

すぐに気付いたあなたはラッキーです。

文字サイズを大きくして、今すぐブログの見やすさをUPさせましょう!

 

他にもはてなブログのカスタマイズに関する記事を書いているので、気になるものがあればチェックしてみてください。

ブログランキング・にほんブログ村へにほんブログ村