Twenty Twenty-Threeテーマで、フッター下に余白ができてしまう時の対処

Twenty Twenty-Threeテーマでフッターの背景色などを付けてみたら、フッターの下に謎の余白が出る原因と対処方法の例を備忘録を兼ね紹介しておきます。

ひょっとしたら他のブロックテーマでも同じかも知れませんので参考にしてみては？

フッター下に余白ができる原因

デベロッパーツールで調べてみると、余白はフッターそのものではなく、「.wp-site-blocks」というCSSクラスで指定されているようです。

.wp-site-blocks {
    padding-top: var(--wp--style--root--padding-top);
    padding-bottom: var(--wp--style--root--padding-bottom);
}

実際にデベロッパーツールで赤字の部分を変更してみると、サイト全体の上下の余白が調整でき、padding-bottomの値を「0px」にするとフッター下の余白はなくなるので、この指定が原因であることが特定できます。

フッター下の余白をなくす対処方法

原因が分かったところで早速対処です。方法としては大きく「子テーマのstyle.cssで指定する方法」「フォークしたテーマのtheme.jsonで指定する方法」「サイトエディターのグローバルスタイル設定で指定する方法」の3つあります。

自身の環境に合った方法で指定するとよいでしょう。

子テーマのstyle.cssで指定する方法

単純に以下のコードを子テーマのstyle.cssへ追記することで解決します。

.wp-site-blocks {
    padding-bottom: 0px!important;
}

一応優先されるよう!importantを付けていますが、必要ないかも知れません

ただ、せっかくのブロックテーマなのですから、スタイルコードの記述をするのは極力さけたいところですから、次項の方法が個人的にはおすすめです。

フォークしたテーマのtheme.jsonで指定する方法

親テーマのtheme.jsonで編集すると、テーマ更新時に上書きされてしまうので、フォーク（派生化）したテーマでのみ行える方法です。

ブロックテーマのフォークの仕方については以下を参照ください。

ブロックテーマを派生化（フォーク）して使う方法

Twenty Twenty-Threeの場合、theme.jsonの704行目付近にある以下の設定が余白の基本設定で、赤字の下パディングの値（var(–wp–preset–spacing–40)）をゼロ（0px）にすると余白はなくなります。

"spacing": {
	"blockGap": "1.5rem",
	"padding": {
		"top": "var(--wp--preset--spacing--40)",
		"right": "var(--wp--preset--spacing--30)",
		"bottom": "var(--wp--preset--spacing--40)",
		"left": "var(--wp--preset--spacing--30)"
	}
},

ここで設定した値はサイトエディターのグローバルスタイルの値（つまりはbody要素のみ）に作用するので、他のブロックへの影響は原則ありません。

これを行うことで、逆に今まで余裕があったように見えたフッター内のコンテンツが画面下に張り付いたようになってしまいますが、これは今まであったフッター下の余白（bodyの下余白）がなくなったからなので、フッター内にスペーサーブロックを追加するなどして、内側の下部余白の調整をすればよいでしょう。

サイトエディターのグローバルスタイル設定で指定する方法

子テーマやフォークしたテーマではなく、親テーマで運営している場合には、テーマの更新によって上書きされてしまうので、下図のようにサイトエディターのグローバルスタイルで設定するとよいでしょう。

ただし、ここで設定したものは、エクスポートして別のサイトで流用しようとしても継承されないので注意が必要ですから、ブロックテーマはやはりフォークして使う方が無難かも知れません。