Twenty Twenty-One 2, タイトル文字の大きさ調整

ワードプレスよ、毎年、笑いをありがとう。

驚異的なタイトルの大きさが目を引くワードプレスのデフォルトテーマ群。『Twenty Twenty-One』もキッチリ巨大なタイトルを披露してくれました。

怖いもの見たさで毎年つい覗いちゃう。

画面いっぱいの記事タイトルが、何度見ても笑える。

とりあえず、パパっと小さくしてみました。

投稿・固定ページ、アーカイブページ、ホームのページタイトルとアーカイブとホームの説明の文字サイズを調整しました。

※XLサイズ(通常2.25rem、メディア652px以上の時2.5rem)、SMサイズ1.125rem。

下のコードを管理画面の「外観 → カスタマイズ → 追加CSS」にコピペです。

.singular .entry-title {
	font-size: var(--global--font-size-xl);
}
.page-title {
	font-size: var(--global--font-size-xl);
}
.archive-description {
	font-size: var(--global--font-size-sm);
}
.site-title {
	font-size: var(--global--font-size-xl);
}
.site-description {
	font-size: var(--global--font-size-sm);
}

「.singular .entry-title」は、投稿と個別ページのタイトル部分。

「.page-title」は、アーカイブ(月別、カテゴリーなど)のタイトル部分。

「.archive-description」は、カテゴリーに「説明」をつけている場合に表示される説明文。

「.site-title」は、ホームのタイトルページであり、その他のページのサイト名。

「.site-description」は、サイトの説明を記述した場合に出てくる説明文。規定値が「sm」なのでこの調整ではサイズは変わらないけど、変更したい人もいるかもしれないから抜き出しておきました。

「font-size:」の後を「2rem;」や「20px;」などと数値で書くと直感的にわかりやすいカモ。お好みで。

参考：親テーマの見出しフォント設定

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