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」の数値を変えるとサイズが変わりますので、お好みで。
親テーマ参考値
本文エリアは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;
}
なんかまぁ、小さくし過ぎた気もしなくはないケド、ま、いっか。