今回の記事では、はてなブログの記事内で表示される文字の大きさ(フォントサイズ)や、文章の余白部分などを変えるカスタマイズ方法をご紹介したいと思います。
はてなブログをカスタマイズする上では超基礎的な部分になりますが、とても重要なので、ぜひカスタマイズしてみてください。
はてなブログで文字の大きさや文章の行間の高さを変える方法【はてなブログのカスタマイズ】
文字の大きさ(フォントサイズ)を変える方法
文字の大きさを変える際のCSSコード
はてなブログの記事内の文字は、.entry-content というクラス属性になっています。下記のようにフォントサイズを指定すれば、文字の大きさを変えることができます。
.entry-content {
font-size: 16px; /* 記事内の文字の大きさ */
}
最適なフォントサイズは16px（Google推奨）
上のCSSコードでは文字の大きさを 16px と指定していますが、これは、Googleが文字の大きさでは16pxを推奨しているからです。あまりにも小さすぎるとGoogleからマイナス評価を受けてしまい、検索結果に自分のサイトが表示されにくくなってしまいます。
フォントサイズの大きさ一覧
| 12px | あいうえお |
| 14px | あいうえお |
| 16px | あいうえお |
| 18px | あいうえお |
| 20px | あいうえお |
| 22px | あいうえお |
文章の行間の高さを変える方法
文章と文章の間に生まれる行間の高さを変える方法です。行間は、 .line-height というプロパティなので、下のCSSコードのように記述すれば文章の幅を変えることが可能です。
ちなみに、下のCSSコードでは、文字の大きさに対して、1.8倍の行間ができるように指定しています。
.entry-content {
font-size: 16px; /* 記事内の文字の大きさ */ line-height: 1.8em; /* 記事内の行間の幅 */
}
適切な行間は1.6emから2.0em程度
文章の行間の高さが1.6emの場合
吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶やかんだ。その後ご猫にもだいぶ逢あったがこんな片輪かたわには一度も出会でくわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。どうも咽むせぽくて実に弱った。これが人間の飲む煙草たばこというものである事はようやくこの頃知った。
文章の行間の高さが2.6emの場合
この書生の掌の裏うちでしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗むやみに眼が廻る。胸が悪くなる。到底とうてい助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋ぴきも見えぬ。肝心かんじんの母親さえ姿を隠してしまった。その上今いままでの所とは違って無暗むやみに明るい。眼を明いていられぬくらいだ。はてな何でも容子ようすがおかしいと、のそのそ這はい出して見ると非常に痛い。吾輩は藁わらの上から急に笹原の中へ棄てられたのである。
ほんの少しの差ですが、行間の高さを変えることで、文学のような堅い文章が、日記のような軽い雰囲気に変わったような気がします。
