ハミングバードで記事中のフォントサイズを変更してブログを読みやすくしよう

こんにちは、ニシムラ(@nissy421)です。

僕の大好きなブログの１つ、桃音さんのももねいろを読んでいたときのこと。

「ももねいろってスマホでもすごく読みやすいよなあ。同じテーマなのに。」

僕のブログはももねいろと同じハミングバードを使ってるんですよ。でもももねいろはPCはもちろんスマホで読んだ時にもすごく読みやすい。

何が違うんだろうと思っていたんですが、ようやく気が付きました。

文字の大きさが違う！

ももねいろはスマホの文字が普通より大きくなっているんですよね。だから読みやすかったんだ。

よし。さっそく僕のも変えてみよう。

というわけで今回は、ハミングバードのフォントサイズを変更する方法をシェアします。

ハミングバードで記事中のフォントサイズを変更する方法

外観→テーマの編集からstyle.cssを開いて編集します。

【GENERAL STYLES】という部分を探すと、[font size]という項目が出てきます。

[aside type=”normal”] 【ctrl】＋【F】で探してね！[/aside]

*********************
GENERAL STYLES
*********************/
body {
font-family: "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 100%;
line-height: 1.5;
color: #545B63;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-wrap: break-word;
}

デフォルトだと[100％]になっているので、これを[18px]に書き換えます。
[aside type=”normal”] pxはピクセル。数字が大きいほど文字が大きくなるよ[/aside]

/*********************
GENERAL STYLES
*********************/
body {
font-family: "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 18px;
line-height: 1.5;
color: #545B63;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-wrap: break-word;
}

以上！簡単でしょ？