はてなブログ 文字サイズと行間を変更して読みやすくカスタマイズする方法
どうも、マサ（@masa5care）です
当ブログは「Minimalism」という人気のデザインテーマを使わせていただいております
シンプルでなんかシュっとしてて概ね満足しているのですが、当初からちょっと文字サイズが小さいよなぁと思ってました
だったら大きくしたらいいんじゃね？
ってことで、文字サイズを大きくする方法を調べてみましたので気になっている方は参考になさってください
また、その他、読みやすいブログにするために心掛けていることにもちょこっと触れています
テーマ「Minimalism」
人気のデザインテーマです
唯一気になる文字サイズをCSSでいじって大きくしてみます
こちらのブログ記事を参考にさせていただきました
文字サイズが直接読みやすさに関係してくるからでしょうか、SEO的にも結構重要という記載もあります
確かに、え、これ、え？、なんて書いｔ、読まれへん みたいな小さい文字のブログもあることはあります
せっかく書いた記事ですから、こういうことが原因で途中から読まれなくなったら悲しいわけですよ
文字サイズだけでも大きくしておきましょう
変更手順
コピペで簡単です、下記に特定のコードを貼り付けるだけです
コピペする場所に元々何か入っている場合は、その一番下に追記する形で追加してください
デザインCSS
「デザイン」→「カスタマイズ（スパナアイコン）」→「デザインCSS」に下記のコードをコピペしてください
.entry-content { font-size:17px; line-height:1.7; }
以上です
簡単に説明しますと
font-size:17px; →文字サイズの指定
line-height:1.7; →行間の指定
となってます
もしこのカスタマイズをしてバランスがおかしくなったら、ここの数値をいじって調整してください
数字を小さくすれば文字サイズも行間も小さくなります
ただ、Googleが推奨するフォントサイズというものがあって、それは16px以上だそうです
ですので、できるだけ16以上の数値を指定したほうがいいようです
さて、これでどれだけ見た目変わるのか、スクショ撮ってみましたので比較してみます
慣れない手付きで2秒ごとにBefore←→Afterで画像が切り替わるGIFアニメを半泣きになりながら作ってみましたので是非ご覧ください
パソコンでの見た目
モバイルでの見た目
読みやすいブログにするために
たった数行加えるだけでだいぶ印象変わりましたね
今回の文字サイズや行間の変更以外に、読みやすいブログにするために自分なりに心がけていることがありますので、ちょっと書いておきます
見出しを付ける
話が切り替わるタイミングで大中小の見出しを付けています
だらーっと文章を書いていると、息継ぎができない感じがして、自分で読んでいてもしんどいんですよね
一文が長くなりすぎない
パソコンでしか確認してませんが、長くても3行程度に収まるくらいで文章を区切ってます
ある意味リズムですよね、長文になればなるほど結構重要な要素かと思います
文字の大きさは変更しない
大事な部分やインパクト欲しいところなんかは文字を大きくしてもいいかもです
ただ、必要以上にコロコロ文字サイズ変えると読みにくいので最小限にしてます
文字フォント
手書きフォントで表示されているブログをたまに見かけますが、あれ、標準に戻したほうが良いと思います
見た目おしゃれですけど、結構読みにくいんですよね
色を多用しない
たまに、エレクトリカルパレードか！みたいなブログありますよね
目がチカチカしてダメですわあれ
普通の文章は黒、重要な部分だけ赤にするとか太字にするとか下線引くとか、その程度でいいと思います
こうすることで、本当に重要な部分ってのがより一層目立つようになります
っといろいろ書きましたが、全部しっかりできているかどうかはツッコまんといてください
私みたいな文才皆無な人間は、こういうところから心掛けていくのが大事かなと思ってます
最後に
ということで、今回は文字サイズを変更する方法でした
ちなみに、Minimalismはレスポンシブデザインですので一箇所設定すればパソコンもモバイルも一気に変更できますが、レスポンシブ対応していないテーマの場合は、パソコンとスマホ、両方のデザインCSSに設定する必要があります
ブログはじめたての方は、真っ先にこの確認とカスタマイズをやるべきやと思います
私もついこの前やりました（おそっ！）
それではまた
