【WordPress】「ハミングバード」のスマホ版フォントサイズを変える

※この記事は2017年11月のものです。

OPENCAGEさんのWordpressテーマを長らく愛用していて、結局テーマは下記のように落ち着きました。

  • サイトA(収益最大)=アルバトロス
  • サイトB(訪問数最大)=ハミングバード
  • サイトC(育て中)=ストーク→ハミングバード

ストークは確かにカッコイイんですが、自分のホームページという感じがしなくて、ストークだって感じがするのです。

なんでだろ…って思ったら、特にPCでフォントの感じとかが個人ページの温かい感じじゃなくて「洗練されすぎてる」感じがしたのです。

一方で、ハミングバードは、見る人が見ればハミングバードなのはわかりますが(H2がステッチ風だと特にすぐ分かる。笑)、色合いを変えてロゴを置くだけで自分のホームページな気がしてきます。

ハミングバードのカスタマイズ

さてここで気になったのがハミングバードのスマホ版の画面いっぱい感。

画面いっぱい感の原因①スマホのフォントサイズ

ハミングバードのフォントサイズはGENERAL STYLEのところにありますが、実はここを変更してもスマホのフォントサイズが変わりません。

スマホ用のフォントサイズは「#main article .entry-content」で検索してみてください。

これです。これを0.96から0.92にするとスマホでの見え方がこんなに違います。

0.96emの例

0.92emの例

フォントサイズは好みがあると思いますので、色々試してみると良いです!

画面いっぱい感の原因②余白

画面がいっぱいに感じるのは、アルバトロスとくらべて本文の左右に余白がないからでした。

そこで、こちらのサイトを参考にして、「カスタマイズ>追加CSS」に余白を15追加してみました。

元のサイトでは20pxでしたが、10くらいでいいかな~と。