Twenty Twenty 2、タイトルと本文の文字サイズを小さく

2020年のワードプレスデフォルトテーマ「Twenty Twenty」のタイトルや本文の文字サイズが大きすぎると感じたところを小さくしました。

このテーマでは、1rem=10pxです。bodyのフォントサイズは1.8remなので18px。

文字周りのメディアサイズの区切りは「@media ( min-width: 700px )」と「@media ( min-width: 1220px )」。

min-width: 700pxの文字サイズ調整

まずメディアサイズが小さい方の調整。

コピペ先は管理画面の外観 → カスタマイズ → 追加CSSです。

@media ( min-width: 700px ) {
	h1,
	.heading-size-1 {
		font-size: 4rem;
	}
	h2,
	.heading-size-2 {
		font-size: 3.5rem;
	}
	h3,
	.heading-size-3 {
		font-size: 3rem;
	}
	h4,
	.heading-size-4 {
		font-size: 2.5rem;
	}
	h5,
	.heading-size-5 {
		font-size: 2rem;
	}
	h6,
	.heading-size-6 {
		font-size: 1.8rem;
	}
	h2.entry-title {
		font-size: 3.5rem;
	}
	.entry-content p, .entry-content li {
		font-size: 1.8rem;
	}	
	.singular .intro-text {
		font-size: 2.0rem;
	}
	h2.comment-reply-title {
		font-size: 3.0rem;
	}
}

• ヘッディングのH1～H6
• 記事一覧ページの見出し(h2.entry-title)
• 記事本文の本文文字(entry-content p)とリスト文字(entry-content li)
• 投稿・固定ページの抜粋(.singular .intro-text)
• コメントを残す(h2.comment-reply-title)

細かいパーツまで設定するとキリがないので、気になるとこだけ。

それぞれの大きさは、「font-size: 2.0rem」の数値を変えると変わるので、お好みで。

個人的には「@media ( min-width: 700px )」の設定でiphone SE2から4Kスクリーンまでこれで良さそうだと感じたので、ここまでしか使っていないです。

min-width: 1200pxの文字サイズを変えたい場合

大きいスクリーンでは見出し文字を大きくしたい場合もあるかもしれないので、コピペしやすいように上と同じコードを一式、テキトーな数値を入れておきました。

@media ( min-width: 1220px ) {
	h1,
	.heading-size-1 {
		font-size: 6.0rem;
	}
	h2,
	.heading-size-2 {
		font-size: 5.0rem;
	}
	h3,
	.heading-size-3 {
		font-size: 4.0rem;
	}
	h4,
	.heading-size-4 {
		font-size: 3.0rem;
	}
	h5,
	.heading-size-5 {
		font-size: 2.0rem;
	}
	h6,
	.heading-size-6 {
		font-size: 1.8rem;
	}
	h2.entry-title {
		font-size: 4.0rem;
	}
	.entry-content p, .entry-content li {
		font-size: 1.8rem;
	}	
	.singular .intro-text {
		font-size: 2.0rem;
	}
	h2.comment-reply-title {
		font-size: 4.0rem;
	}
}

追記

オリジナル投稿日：2019-12-7

2021-1-30に別のブログに使うためにコードを書き換え、記事を更新し、通し番号を変更ました。

最後までお読みいただきましてありがとうございました。