Twenty Twenty-One 8, ページ下部の妙な空白を狭くした

Twenty Twenty-Oneの本文とフッターの間に妙に巨大な隙間(180px)があったので小さく(60px)してみました。

• 

• 

コードはテーマの変数を使いました。「–global–spacing-vertical」は高さ30pxなので、6をかけると180pxだったのを、2をかけて60pxまで減らしていますが、掛け率はお好みで。

外観→カスタマイズ→追加CSSに下記のコードをコピペ。

/* 「ウィジェットエリアがない場合のサイトフッター」と「ウィジェットエリア」のマージントップ */
.no-widgets .site-footer, .widget-area {
  margin-top: calc(2 * var(--global--spacing-vertical));
}

これでも、固定ページの同じ場所は幅広感があるので、ウィジェットエリアの上の「.entry-footer」クラスを上書きすれば、気にならなくなるかも。

/* 本文エリアのフッタークラスのpadding-bottomだけ変更 */
.site-main > article > .entry-footer {
  padding-bottom: calc(1 * var(--global--spacing-vertical));
}

参考：親テーマ、スペーシング規定値