【Twenty Twenty-One #13】タイトルテキストのフォントサイズを調整！

こんにちは。SaitouKouです。

以前の記事でフォントサイズを調整する方法を書きました。

この記事の内容のままだと、スマホ表示の時のフォントサイズが異常に大きいことが分かったので、今回はスマホ表示の場合の調整方法をメモします。

追加CSS

これまでの記事でレスポンシブ対応用にブレークポイントを作成していたので、それを利用してフォントサイズも変更してみました。

/* スマホ表示 */
.singular h1.entry-title {
    font-size: 2.5rem; 
}

/* タブレット */
@media only screen and (min-width: 482px) {
	.singular h1.entry-title {
        font-size: 4rem; 
    }

    /*ほかにもいろんな処理・・・*/
}

/* PC */
@media only screen and (min-width: 822px) {

    /*ほかにもいろんな処理・・・*/
}

これでスマホ表示の場合だけフォントサイズを小さくできます。タブレット、ＰＣ表示の時は大きいままです。

まとめ

近年はスマホファーストという言葉が言われている通り、スマホでホームページを見る人が増えているので、スマホ表示も忘れずに確認しましょう！

デモサイト↓↓
Twenty Twenty-One　デモサイト

みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。