Twenty Twenty-Two 3 タイトルタグを小さくする

タイトルが大きすぎて見づらいので、調整しました。指定がclampなので、大きい画面でみるとギョッとするほど大きくてドン引きします。

外観 → カスタマイズ → CSS追記

.wp-block-post-title {
	font-size: var(--wp--custom--typography--font-size--gigantic);
}

h2 {
	font-size: var(--wp--custom--typography--font-size--huge);
}

h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

h4 {
	font-size: clamp(1.5rem, 2.75vw, 2rem);
}

h5 {
	font-size: var(--wp--preset--font-size--medium);
}

h6 {
	font-size: var(--wp--preset--font-size--small);
}

タイトルタグ	初期設定	変更後
.wp-block-post-title (投稿のh1)	colossal	gigantic
h2	gigantic	huge
h3	huge	x-large
h4	x-large	clamp(1.5rem, 2.75vw, 2rem)
h5	medium	medium
h6	medium	small

※h4は変数不使用の例。clamp(最小値, 推奨値, 最大値)

参照変数

タイプ	変数名	指定値	CSS値
Custom	colossal	clamp(3.25rem, 8vw, 6.25rem)	var(–wp–custom–typography–font-size–colossal)
Custom	gigantic	clamp(2.75rem, 6vw, 3.25rem)	var(–wp–custom–typography–font-size–gigantic)
Custom	huge	clamp(2.25rem, 4vw, 2.75rem)	var(–wp–custom–typography–font-size–huge)
Preset	x-large	clamp(1.75rem, 3vw, 2.25rem)	var(–wp–preset–font-size–x-large)
Preset	large	1.75rem	var(–wp–preset–font-size–large)
Preset	medium	1.125rem	var(–wp–preset–font-size–medium)
Preset	small	1rem	var(–wp–preset–font-size–small)

「font-size:」の後を好みのCSS値に置き換えるか、自分の好きな値を手入力するか、その辺は好みで。