薬剤師とザリガニの奮闘記

~薬ザリ(yakuzari)の備忘録~

minimalismの文字サイズを本気で考えてみた

【スポンサーリンク】

記事の文字サイズ

唐突ですが、このブログは読みやすいですか?読みにくいですか?

読みやすさという点を考えると「文章の構成がしっかりしているか」「広告が多すぎないか」などが脳裏をよぎりますが、もうひとつ大きな要素があると僕は考えています。

それは文字のサイズです!

minimalismに限らず…文字サイズが重要!!

例えば、極端に小さい文字で書かれているブログってどう思いますか??

いかに内容が濃くてためになる記事であっても、読んでいる途中に「読みにくいな…」と思うことありませんか??

どこからが小さい文字で、どこからが大きい文字と捉えるかは読者判断となりますが、少なくても自分が読みやすい文字サイズに変更してあげるのが一番だと思います。

特に「はてなブログ」では多種多様なデザインが用意されていますが、どれも文字サイズが小さく設定されていると言及されている方もいらっしゃいます。

ちなみに、かのgoogleさんの推奨サイズは16px以上と言われています。

これはSEOにも影響するのではないかとも言われているためしっかりと対応した方が良さそうです。

minimalismのデフォルトの文字サイズは?

ちなみに当ブログでも使用させていただいているminimalismですが、初期設定ではPCで15pxとなっており16px以下となっています。そのためか、初めてminimalismに設定した時に

「文字が小さくて読みにくい!」

というのが第一印象でした。

当ブログ(minimalism)の文字サイズ

初期設定では15pxですが、当ブログでは17pxで表示させるように設定しています。正直人それぞれの好みかとは思いますが、16px以上のサイズで自分が一番見やすいサイズということで17pxとしています。

minimalismの文字サイズの変更方法

設定はいたって簡単です!

デザインCSS
ダッシュボード→デザイン→スパナ→デザインCSS

お馴染み(?)のデザインCSSに下記のCSSをコピペするのみです。

/*フォントサイズ*/
.entry-content p {font-size: 17px;}

17となっている数字を適宜16や18などと書き換えてあげれば自分好みの文字サイズに設定することができます。

文字サイズ変更後の注意

上記の方法で設定は簡単に終わるかと思いますが、実際に記事を書いてみると次のような現象に悩まされました。

見出し直下の文字サイズが小さい
見出し直下の文字は小さく、次の段落は大きい

なぜか見出し直下の文章の文字サイズが小さく、次の段落では大きくなる現象に見舞われました。

僕は「はてな記法」で記事を作成し、見出しについては<h2></h2>などと記載して指定しています。
→理由はこちらの記事
【はてなブログ】見出しタグ「h2」行方不明事件 - 薬剤師とザリガニの奮闘記
をご覧ください。

上の記事の実際の記事の編集画面を見てみるとこんな感じです。

編集画面
実際の編集画面

「見出し」を設定した次の行から本文を書き始めています。しばらく原因が分からなかったのですが、なんとか打開策を見つけることが出来ました!

それは、見出しの次の行も改行してから本文を書き始めるという方法です。

見出しの次の行を改行
見出しの次の行も改行

見出しの次の行を改行した結果
見出し直下の段落もOK

minimalismの文字サイズについて

無駄な改行を入れすぎるとSEO的に良くないとの噂も聞きますが、文字サイズが統一されない方が個人的には嫌なので今回紹介したような方法で設定・対応してみました。

読者の方も自分も読みやすい文字サイズを見つけられると良いですね。