Twenty Seventeenで最適なフォントサイズを指定する/WordPress

WordPress公式テーマ、Twenty Seventeenのブログを見ていて思ったのですが、ちょっとフォントサイズが小さいですね。パソコン画面でも小さいと思いましたが、スマホではさらにもっと小さいと感じました。

そこで、記事本文の部分の文字サイズを大きくすることにしましたが、やってみたところ、パソコン画面ではよかったのですが、スマホ画面ではフロントページで記事のタイトルと抜粋の文字サイズが近づき過ぎてしまい、バランスが崩れる状況になりました。

そこで、スマホのフロント画面だけ、記事のタイトルを少し大きくする必要に迫られました。

以下は、これを実現するコードです。

@media screen and (max-width: 47.9em) {
.entry-title a {
font-size:1.55rem;
}
}

.entry-content {
font-size:1.25rem;
}

なお、Twenty Seventeenでは画面サイズがどう扱われているのか問題になったのですが、下記の通りです。

@media screen and (min-width: 20em)

@media screen and (min-width: 30em)

@media screen and (min-width: 48em)

@media screen and (min-width: 67em)

@media screen and (min-width: 79em)

@media screen and ( max-width: 48.875em ) and ( min-width: 48em )

確認したい場合は、Twenty Seventeenのstyle.cssを「@media」で検索すれば出てきます。

スマホの設定は、48em(768px)未満で、パソコンの設定は48em(768px)以上となりますので、今回のコードもこれを基準にしました。「max-width: 767px」でもいいですね。

「.entry-content」のfont-sizeの値は、1.1rem~1.3remがいいと思います。自分の目で確認して、適当な数値を選んで下さい。「.entry-title a」の方も同じです。

自分の目で見た感じで決めればいいのですが、何か参考にしたいものがほしい場合は、新聞などのマスメディアのサイトやGoogleのサイトがいいです。特にGoogleは読みやすい文字サイズの研究もやっていますので、参考になります。参考にすべきなのは、Googleサイト内の文字を主体にした文書のページです。

また、文字サイズの実際の見た目は、フォントの種類にもよります。このブログでは現在、「MS Pゴシック」を使っているので、上記の様にしましたが、「Meiryo」では、そのままか、「1.1」ぐらいで十分だと思います。

ただ、やはりスマホ画面では文字サイズが小さすぎるので、下記コードでスマホ画面だけ文字サイズを変えるのもいいと思います。

@media screen and (max-width: 47.9em) {
.entry-title a {
font-size:1.55rem;
}
.entry-content {
font-size:1.25rem;
}
}

私は、英語版のブログでは、こちらを使うことにしました。

それから、読みやすくするには、行間を適当に空けることも有効です。そこで、下記のコードで行間も少し空けてやるといいかと思います。

@media screen and (max-width: 47.9em) {
.entry-title a {
font-size:1.55rem;
}
}

.entry-content {
line-height:1.8em
font-size:1.25rem;
}

スマホ画面だけを変えるのなら下記のコードでいいです。

@media screen and (max-width: 47.9em) {
.entry-title a {
font-size:1.55rem;
}
.entry-content {
line-height:1.8em
font-size:1.25rem;
}
}

上記の様に、行間は1.8emぐらいでいいと思います。しかし、思い切って、2emぐらいにしてもいいかもしれません。

年齢の高い訪問者は、文字サイズが小さいとかなり苦痛を感じてしまい、デフォルトの小さな文字サイズでは読んでもらえない可能性が高いです。40歳以上の人は、大きな文字サイズを必要としているということを念頭に置いておかないといけないと思います。