ブログの文字の大きさって､どうするのが正解なんだろう？
ブログの文字サイズに関する記事です｡
ちなみに､スマホではなく､パソコン上で見ることを想定しています｡
うちのブログはレスポンシブデザインにはなっておりませんので･･･｡
結論から言うと､うちのブログは｢ font-size: clamp(1.2rem, 1vw, 1.5rem) ｣とすることにしました！
CSSにすると､こんな感じです｡
.entry-content p {
font-size: clamp(1.2rem, 1vw, 1.5rem);
}
フォントサイズが気になった経緯
自分のブログを自分で読んでいたとき､ふと思ったんですよね｡
うちのブログの文字､小せえな･･･
私は普段､ゲームのプレイ日記を投稿しているんですが､その際に画像をたくさん貼るんですよ｡
画像多め､文章少なめなブログなんです｡
上の画像のように､画像と画像の間に1行だけ文字が挟まってる､なんてこともよくあります｡
こういうとき､文字サイズが小さいと文章を見落とす､と思ったんです｡
画像に埋もれちゃって､文章があることに気付かない｡
実際､自分で記事を読んでいて､見落としそうになることが幾度となくありました｡
書いた本人が見落とすんだから､読者は絶対見落としてるよね｡
そんなわけで､ブログ本文のフォントサイズを見直してみようと思ったんです｡
SEO対策を考えると､16～18pxが良いらしい｡ しかし･･･
Google先生にサクッと聞いてみたところ､フォントサイズは16～18pxが良いという意見が大半でした｡
Google自体が16pxを推奨しており､それ以下だと｢読みづらいサイト｣だと判断されてしまい､SEOで不利になる可能性があるのだとか｡
ということで､試しに16pxにしてみたんですが･･･
まだまだ小せえなぁ･･･
普通のブログならこれで良いかもしれませんけど､うちの記事的にはまだまだ小さい｡
というわけで､18pxを試してみることに｡
悪くない･･･かも？
画像だとわかりにくいかもしれませんが､悪くないな､と自分は感じました｡
よし！ うちのブログに最適なフォントサイズは｢18px｣！Q.E.D.！
そう思ったんですが･･･
モニターの解像度で文字の大きさが変わってしまう問題
ふと思ったんですよね｡
｢モニターの解像度が違う場合､うちの記事はどう見えるのだろう？｣､と｡
ちなみに､うちのモニターは27インチで､解像度はフルHD(1920x1080)です｡
本当はWQHD(2560×1440)まで対応しているんですが､ブラウジングの利便性や､ゲーム時のグラボの負荷などを考え､あえてフルHDで使っています｡
試しに､WQHDでうちのブログを見てみたらどうなるんだろう？
そう思い､解像度を変えてみました｡
すると･･･
ちっさ！！
解像度が高いので､意外と読めることは読めるんですけど､小さい！！
そう思いました｡
昨今はモニターの進化によって､WQHD以上の解像度も一般的になってきていると思うんです｡
人によっては､4Kモニターなんてものを使っているかもしれません｡
WQHDでもこんな小さいのに､4Kになったら文字読めないのでは･･･？
かといって､これ以上文字を大きくすると､今度はフルHDでブログを見たときに､なんだか不格好になってしまいます｡
フルHDでもWQHD以上でも読みやすいフォントサイズにするにはどうしたら良いのか･･･｡
暗礁に乗り上げた私は､再びGoogle先生に解決策を聞きに行きました｡
ウィンドウの幅に合わせて文字の大きさを変えてくれる｢vw｣という単位
そこで見つけた解決策が､フォントサイズを｢px｣ではなく｢vw｣で指定する､というものです｡
vwは､ざっくり言うと｢画面の横幅に応じて､動的に文字のサイズを変えてくれる｣というもの｡
フォントサイズを指定するCSSを｢font-size: 1vw;｣として､もう一度自身のブログを見てみました｡
すると･･･
良い感じな気がする！！
細かいことを言えば､WQHD時にちょっと文字が大きい気がするけど､まあ大きい分にはそんなに問題ないかな､と思いました｡
これで今度こそ解決だ！！
そう思ったんですが､問題はまだ残っていました･･･｡
ウィンドウサイズに合わせて､文字が際限なく拡大､または縮小してしまう問題
フォントサイズを｢1vw｣とした状態でブラウザの最大化をやめ､小さくしてみたんですよ｡
すると･･･
ちっっっっっっっさ！！！
ブラウザを最大化しているときは良いんですが､ウィンドウを小さくすると､文字が小さくなりすぎてしまうんですよ｡
ブログを読む時､皆がいつもブラウザを最大化しているとは限らないと思うんですよね｡
モニターの半分でブログを読みながら､半分で別のことをする･･･みたいな人も多分いるんじゃないかと｡
それに､今のままだと文字が大きくなりすぎるケースというのもある気がします｡
うちには4Kに対応したモニターがないので確認できないんですが､多分4Kで見ると不格好なまでに文字が大きくなっているんじゃないかと｡
WQHDの時点で､ちょっと大きいなと感じているくらいですからね｡
なかなか上手くいかんなぁ･･･
そう一人ゴチながら､私はもう一度Google先生に教えを請いに行きました･･･
値に上限と下限を設定する｢clamp()｣という関数
そうして教えてもらったのが｢clamp()｣という関数です｡
ざっくり言うと､｢値の上限と下限を設定できる｣というものです｡
これを使用して､文字の大きさに上限と下限を設定することにしました｡
clamp()関数の使い方は､こんな感じです｡
clamp(MIN, VAL, MAX)
MINは下限値､VALは上限や下限を設定したい値､MAXは上限値です｡
今回の自分のケースだと､こんな感じになります｡
clamp(1.2rem, 1vw, 1.5rem)
こうすることで､文字が最小でも1.2remまでしか縮小されず､最大でも1.5remまでしか拡大されなくなります｡
実際に適用してみた結果がこちら｡
縮小しても､見やすい大きさを保ってくれるようになりました！
同時に､4Kモニターで見たときにも､不格好に大きいフォントサイズになることはなくなっているはずです｡(ちょっと環境がないので確認できませんが･･･)
結論：vwでフォントサイズを指定したあと､clamp()関数で上限と下限を設定する
ブログ本文のフォントサイズには､｢clamp(1.2rem, 1vw, 1.5rem)｣と設定する､というのが私の結論となりました｡
ちなみに､CSSにするとこんな感じです｡
.entry-content p {
font-size: clamp(1.2rem, 1vw, 1.5rem);
}
ただ､当然ですがこれが唯一の正解というわけではない､と思います｡
このやり方で､問題が出ないとも限りません｡
ブログを読んでくれる方の環境は､無数にあると思いますので･･･｡
それに､最初にも述べましたが､これはレスポンシブデザインを考えない場合のやり方です｡
レスポンシブデザインに対応したテーマだと､色々と不都合が発生しそうな気がします｡
もっとスマートなやり方がありそうな気もしています｡
自分で言うのもなんですが､ちょっと無理矢理感があるような気もしないでもない･･･｡
まあ色々と思うところはありますが､とりあえず自分はこの設定でやっていこうと思います｡
皆さんは､ブログのフォントサイズ､どうしてますか？
