レスポンシブテーマ、スマホだとフォントが大きいので小さくしてみた

こんにちは、京終です。

「Fresh Green」というレスポンシブ対応のテーマを使っています。

でも、レスポンシブテーマだと、スマホを使っているときにブログのタイトルや見出しの文字が大き過ぎると思いませんか？

なので、CSSを追加してフォントサイズを小さくしてみました。

@media (max-width: 767px) {
    boby {
        font-size: 88%;
    }

.entry-content {
  line-height: 1.8;
}

1行目の@以降は、「画面の幅が767ピクセル以下の場合 { } で囲まれたスタイルを適用する」という意味です。

ブログのタイトルや見出しなど、全てのフォントサイズ小さくしたかったのでbodyに指定しました。

これで画面全体のフォントサイズが、PC表示のときの88%になります。

フォントを小さくした分、行間が詰まって読みにくくなるので少し広げました。今回は行間を文字の高さの1.8倍にしました。

嵌まりだすとキリがないので、今回はこれだけです。

カラモモ日記。