Twenty Twenty-oneのタイトルを小さくする。

2021年８月21日更新　

Twenty Twenty oneの更新に伴ってまたリセットされてしまったのでまた更新する。
他のサイトで紹介されているように追加CSSに書いておけばいいのけど、なぜか上手く動かない。

まとめ

「外観」→「テーマエディタ」からスタイルシート「style.css」が編集する。編集する際は全角スペースが入らないようにテキストエディタに貼り付けて確認する。

タイトルを小さくするには「–global–font-size-page-title」を調整する。107行目あたり。

/* Font Size */
・・・
/＊ --global--font-size-page-title: var(--global--font-size-xxl) ;*/
--global--font-size-page-title: 2rem;

２カ月前はこれで変えれたけど Version1.4にしたらこれでは効かなくなってしまった。Google Chromeの左クリックして出る「検証」からStylesを調べていると、 「 –heading–font-size-h2 」 を変えればいいことがわかった。

　メモしておく。大体335行目あたりに以下の記述があり。これを以下のようにした。

@media only screen and (min-width: 652px) {

	:root {
		--global--font-size-xl: 2.5rem;
		--global--font-size-xxl: 6rem;
		--global--font-size-xxxl: 9rem;
		--heading--font-size-h3: 1.2rem;
		--heading--font-size-h2: 1.5rem;
	}
}

見出し2を小さくするには「–heading–font-size-h2」を調整する。

:root {
　　　　　　　　　　　　　　・・・
		/*--heading--font-size-h2: 3rem;*/
		--heading--font-size-h2: 1.75rem;
	}

タイトルの下の線の間を詰めるには「–global–line-height-page-title」と「–global–spacing-vertical」を調整する。段落の行間も詰めるには「–global–line-height-body」を調整する。120行目の辺りに記載がある。

	/* Line Height */
	/* --global--line-height-body: 1.7; */
	--global--line-height-body: 1.4;
	--global--line-height-heading: 1.3;
	/* --global--line-height-page-title: 1.1; */
	--global--line-height-page-title: 0;

「–global–spacing-unit: 」で段落間のスペースも詰められる。188行目あたりに記述がある。

/* Spacing */
/*--global--spacing-unit: 20px;*/
--global--spacing-unit: 10px;
--global--spacing-measure: unset;
/* --global--spacing-horizontal: 25px;
--global--spacing-vertical: 30px; */
--global--spacing-horizontal: 25px;
--global--spacing-vertical: 20px;