Twenty Twenty-One 3, 見出し(H1~H6)のサイズ調整

Twenty Twenty-Oneの本文中のヘッディング(h2~h6)と本文文字、コメントタイトル、アーカイブのリストタイトルを、前回調整したタイトルより小さくなるように調整しました。

テーマの変数を使用

折角だからテーマが準備している変数を使用してみました。

テーマの変数を使用して調整する場合はこんな感じ。

h2 {
	font-size: calc(1.25 * var(--global--font-size-lg));
}
h3 {
	font-size: var(--global--font-size-lg);
}
h4 {
	font-size: var(--global--font-size-md);
}
h5 {
	font-size: var(--global--font-size-sm);
}
h6 {
	font-size: var(--global--font-size-xs);
}
p {
	font-size: var(--global--font-size-sm);
}
.comments-area h2 {
	font-size: calc(1.25 * var(--global--font-size-lg));
}
.entry-title {
	font-size: calc(1.25 * var(--global--font-size-lg));
}

CSSの基本単位を使用

直感的にわかりにくかったので、ほぼ同じものを数値で見やすくしたバージョン。

h2 {
	font-size: 1.8rem;
}
h3 {
	font-size: 1.5rem;
}
h4 {
	font-size: 1.25rem;
}
h5 {
	font-size: 1.125rem;
}
h6 {
	font-size: 1.0rem;
}
p {
	font-size: 1.125rem;
}
.comments-area h2 {
	font-size: 1.8rem;
}
.entry-title {
	font-size: 1.8rem;
}

「font-size:1.8rem」の数値を変えるとサイズが変わりますので、お好みで。

親テーマ参考値

2021親テーマヘッディングフォントサイズ
2021親テーマヘッディングフォントメディアサイズ652px以上

本文エリアはh2~h4だけ調整

/* 本文エリアのタイトル行のサイズを調整 */
.entry-content h2 {
	color: var(--global--color-background);
	background-color: var(--global--color-primary);
	padding:0.5em;
	margin-top: 1.5em;
}

.entry-content h3 {
	color: var(--global--color-background);
	background-color: var(--global--color-primary);
	padding:0.5em;
	margin-top: 1.5em;
}

.entry-content h4 {
	color: var(--global--color-background);
	background-color: var(--global--color-primary);
	padding:0.5em;
	margin-top: 1.5em;
}

なんかまぁ、小さくし過ぎた気もしなくはないケド、ま、いっか。

作成者: のろのろ

サイト管理者

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です