前回はヘッダーを組みました。フッターも構造はまったく同じです。
「外側・内側・最内側」の入れ子パターンを思い出しながら、同じ要領でサクッと組んでいきましょう。
フッターの役割を整理する
フッターに置くものを決める
フッターに置く要素は、サイトによってさまざまです。まずはシンプルな構成から始めましょう。
| 要素 | ブロック | 必要度 |
|---|---|---|
| コピーライト | 段落ブロック | ★ 必須 |
| サイト名 | サイトタイトルブロック | ★ おすすめ |
| フッターナビ | ナビゲーションブロック | ☆ あとから追加でもOK |
今回は「サイトタイトル」＋「コピーライト」のシンプル構成でいきます。ナビゲーションはコンテンツが整ってから追加すれば十分です。
ブロックテーマの強みは、あとからいくらでも変更できることです。まずは「コピーライトがある状態」を目標にしましょう。
ブロック構造を考える
⑤で学んだ「入れ子」の復習
ヘッダーで使った「外側・内側・最内側」の3層構造、覚えていますか？フッターもまったく同じパターンで組めます。
フッターの構造イメージ
テンプレートパーツ（フッター）
└ 外側グループ（constrained）← 計算の基準になる親
└ 内側グループ（全幅・背景色・テキスト色）
└ 最内側グループ（コンテンツ幅・中央寄せ）
├ サイトタイトル
└ 段落（コピーライト）
フッターならではの注意点
ヘッダーと1点だけ違うところがあります。サイトタイトルとコピーライトは横並びではなく縦並びでもOKです。レイアウトの好みで選んでください。
| 配置 | 使うブロック | 見た目 |
|---|---|---|
| 縦並び | グループ（デフォルト） | サイト名が上、コピーライトが下 |
| 横並び | 横並びグループ | 左にサイト名、右にコピーライト |
今回は縦並びで組んでいきます。
エディターで組んでみる
構造が決まったら実際に組んでいきます。ヘッダーのときと同じ要領です。
フッターを開く
外観 → エディター → パターン → フッターを選択して開く
左上の「リストビュー」アイコンをクリックして開いておく
外側グループを追加する
「＋」からグループを追加する。選択肢が出たら一番左の「グループ」を選ぶ
リストビューで「グループ」が選択中になっていることを確認。右パネル「設定」→「レイアウト」→「コンテンツ幅を使用するインナーブロック」がオンになっていることを確認する
内側グループを追加する（全幅・背景色・テキスト色）
外側グループの中の「＋」からグループを追加する。リストビューで外側グループの中に入っていることを確認
今回はサイトタイトルとコピーライトを左右いっぱいに広げる必要はないので、「コンテンツ幅を使用するインナーブロック」はオンのままでOKです。
ブロックの上に表示されるツールバーの配置アイコンから「全幅」を選択する
右パネル「スタイル」→「色」→ 背景にベーステキスト、テキストに白を選択する
続けて「余白」→ 上下のパディングもあわせて調整しておきましょう。左右は外側グループの「コンテンツ幅を使用するインナーブロック」がオンになっているので設定不要です。
最内側グループ（縦積み）を追加する（サイトタイトル＋コピーライト）
内側グループの中の「＋」から縦積みを追加する。右パネル「設定」→「レイアウト」→「配置」→ 中央揃えを選択する
最内側グループ（縦積み）の中にサイトタイトルブロックを追加する
最内側グループ（縦積み）の中に段落ブロックを追加して、コピーライトを入力する
例：© 2026 サイト名
コードをコピーしてファイルに貼り付ける
リストビューで一番外側のグループを選択する
リストビューの「グループ」の右側の︙をクリック → 「コピー」を選択する
一番外側のグループをコピーすると、入れ子になっている内側のブロックもまとめてコピーできます。
メモ帳などに貼り付けて内容を確認する
管理画面 → ツール（or 外観）→ テーマファイルエディター → parts/footer.html を選択する
コピーしたコードを貼り付けて「ファイルを更新」をクリックする
サイトを開いてフッターが表示されていることを確認する
💡 キリのいい間隔で、手元のファイルのバックアップもお忘れなく！
FTPでファイルをダウンロードするか、手元のファイルにもコピペしておきましょう。
私のコードの中身
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"base","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-base-background-color has-text-color has-background has-link-color">
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)">
<!-- wp:site-title /-->
<!-- wp:paragraph -->
<p>© 2026 サイト名</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->ヘッダーとフッターが完成しました。
入れ子ブロックの考え方さえつかめば、この先のテンプレートもすべて同じ要領で進められます。
次回はコンテンツを表示させましょう！！
最後まで読んでいただき、ありがとうございました。
おつかれさまでした 🍵