見出し等の文字サイズを Snow Monkey v18 と同じものにする CSS

Snow Monkey v19 から、メディアクエリで文字サイズを拡大縮小していたのを廃止したのですが、今日 Twitter を眺めていたら、その変更の影響でタイトルや見出しが画面ピッタリに収まっていたのが数文字落ちてしまうようになった、というつぶやきを見つけました。

そこをあまり意識していないアップデートだったので大変申し訳なかったのですが、確かに v18 のデフォルトでぴったり収まっていたものが収まらなくなったら困るよなということで、v18 のときと同じ文字サイズを再現する CSS を書きました。

適当な CSS ファイルやカスタマイザー→追加CSSに貼り付けてみてください。

見出し用

h2,
h3 {
  font-size: 1.2rem; // 19.2px
}

@media (min-width: 1024px) {
  h2,
  h3 {
    font-size: 1.5rem; // 24px
  }
}

セクションタイトル用

.smb-section__title {
  font-size: 1.5rem; // 24px
}

@media (min-width: 1024px) {
  .smb-section__title {
    font-size: 2rem; // 32px
  }
}

ページタイトル用

.c-entry__title {
  font-size: 1.66667rem; // 26.66672px
}

@media (min-width: 640px) {
  .c-entry__title {
    font-size: 2rem; // 32px
  }
}

@media (min-width: 1024px) {
  .c-entry__title {
    font-size: 2.5rem; // 40px
  }
}

clamp() の導入

v19 でも、大きい文字サイズの場合は clamp() を使って画面サイズが小さいときには少し小さくなるようにしていたつもりだったのですが、実は完全に勘違いしていて、clamp() で調整していたのは余白サイズだけでした…。

なので文字サイズについても clamp() を導入して小さな画面サイズのときは文字が少し小さくなるようにしようと思います。

開発は下記の issue で進めますので、リリース前に試してみたいという方、開発に参加してみたい、覗いてみたいという方はぜひ見てみてください。

この記事を書いた人

アバター画像

キタジマ タカシ

長崎県長崎市在住。地元のWeb制作会社でWebデザイナー/エンジニアとして従事した後、2015年にフリーランス [ モンキーレンチ ] として独立。WordPress のテーマやプラグイン、ライブラリ、CSS フレームワーク等、多数のプロダクトをオープンソースで開発・公開しています。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!