2026年5月25日

WordPressのBlocksyテーマで独自のフッターレイアウトを作成する方法

テーマ・デザイン

Blocksy テーマで独自のフッターを作るには、カスタマイザーのフッタービルダーで「行」と「列」の枠組みを決め、各列にウィジェットエリアやメニュー、コピーライトなどの要素を配置し、ウィジェットエリアの中身をブロックで作り込む、という流れで進めます。コードを書かなくても、多段・多列のフッターやスマートフォン向けの並び替えまで対応できます。この記事では、レイアウトの設計から、フッタービルダーの操作、ブロックでの中身づくり、子テーマでの微調整、ページごとの出し分けまでを順に説明します。

作業の前に

フッターはサイトの全ページに表示されるため、作業前にバックアップを取り、可能ならステージング環境で試してください。
CSS や PHP を追加する場合は子テーマを使います。Blocksy は公式サイトで子テーマのひな形を配布しています。
Blocksy のカスタマイザーの項目名や、無料版と有料版（Blocksy Pro）の機能の区分は更新で変わることがあります。この記事では目的ごとに説明しているので、実際の表記は使っているバージョンで確認してください（2026年10月現在の情報です）。

まずレイアウトを紙の上で決める

フッタービルダーを開く前に、何をどこに置くかを決めておくと作業が早く進みます。よくある構成は次のような3段です。

上段: 問い合わせへの誘導やメールマガジンの登録など、目立たせたい案内を1列で。
中段: 4列程度で、左から「ロゴと会社概要」「サービス一覧のメニュー」「会社情報・お知らせのメニュー」「所在地とSNS」。
下段: コピーライトと、プライバシーポリシーなどの規約類へのリンク。

決めるときに意識したいのは、スマートフォンでは列が縦に積み重なるという点です。4列のフッターは、スマートフォンでは4つのブロックが縦に並ぶ長いフッターになります。スマートフォンで不要な要素は非表示にする、メニューは2列のまま残す、といった判断もこの段階で決めておきます。

フッタービルダーで行と列を作る

Blocksy のフッターは、カスタマイザーのフッター設定にあるビルダーで組み立てます。基本の操作は次のとおりです。

行を選ぶ: フッターは上段・中段・下段の行で構成されています。使う行を有効にし、使わない行は空のままにすると表示されません。
列の数と幅を決める: 各行の設定で列の数を選び、列の幅の比率（均等、左を広く、など）を指定します。ロゴと説明文を置く列だけ広くすると、バランスがとりやすくなります。
要素を配置する: 各列に、ウィジェットエリア、メニュー、コピーライト、SNS アイコンなどの要素をドラッグして配置します。
行ごとの見た目を整える: 行ごとに背景色、上下の余白、区切り線、文字色などを設定できます。中段は濃い背景、下段は少し明るい背景にするなど、段の役割が分かるようにすると読みやすくなります。
端末ごとに確認する: カスタマイザーのプレビュー下部などにある端末切り替えで、タブレットとスマートフォンの表示を確認し、列の並び方や要素の表示・非表示を調整します。

ウィジェットエリアはフッター内に複数用意されており、配置した数だけ「外観」→「ウィジェット」に編集欄が現れます。用意されている数は版によって異なるため、足りない場合は1つのウィジェットエリアの中でブロックを横並びにする方法でも対応できます。

ウィジェットエリアの中身をブロックで作る

WordPress 5.8 以降、ウィジェットはブロックで編集できます。フッターの各列の中身は、「外観」→「ウィジェット」またはカスタマイザーのウィジェット設定で、通常の記事と同じようにブロックを並べて作ります。

ロゴと会社概要の列: 画像ブロックでロゴ、段落ブロックで1〜2文の説明。ロゴ画像には会社名やサイト名を代替テキストとして入れます。
メニューの列: 見出しブロックと、ナビゲーションブロックまたはリストブロック。メニューの項目を管理画面で一元管理したい場合は、ビルダー側のメニュー要素を使い、「外観」→「メニュー」でフッター用のメニューを作る方法が向いています。
所在地の列: 段落ブロックで住所や営業時間。地図を埋め込む場合は、読み込みが重くならないよう、地図へのリンクにとどめるのも1つの方法です。

複数のウィジェットエリアで同じ内容を使い回す場合や、後から頻繁に修正する部分は、同期パターンとして保存しておくと管理が楽になります。

コピーライトの年を毎年手で書き換えたくない場合は、Blocksy のコピーライト要素に用意されている年やサイト名の置き換え用の記法を使えます。記法はバージョンで異なることがあるため、要素の設定画面の説明を確認してください。ウィジェットエリアに自分で書きたい場合は、次のようなショートコードを子テーマの functions.php に追加し、ショートコードブロックで [footer_copyright] と書きます。

<?php
// フッター用: 現在の年・サイト名・プライバシーポリシーへのリンクを出力する
add_shortcode( 'footer_copyright', function () {
	$year    = wp_date( 'Y' );
	$name    = get_bloginfo( 'name' );
	$privacy = get_the_privacy_policy_link( '<span class="footer-privacy">', '</span>' );

	return sprintf(
		'<p class="footer-copyright">&copy; %1$s %2$s %3$s</p>',
		esc_html( $year ),
		esc_html( $name ),
		$privacy
	);
} );

get_the_privacy_policy_link() は、「設定」→「プライバシー」で指定した公開済みのプライバシーポリシーページへのリンクを返す WordPress コアの関数です。ページが未設定なら空文字になるため、リンクが出ないときはその設定を確認してください。

子テーマの CSS で細部を整える

カスタマイザーの設定で足りない細かな調整は、子テーマの CSS で行います。Blocksy のフッターの要素やクラス名、データ属性はバージョンで変わる可能性があるので、ブラウザーの開発者ツールで実際の HTML を確認してからセレクターを決めてください。

/* フッター内のリンクに下線を残し、色だけで区別しない */
#footer a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* スマートフォンではメニューの項目を2列に並べる */
@media (max-width: 689px) {
	#footer .widget_nav_menu ul,
	#footer .wp-block-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5em 1em;
	}
}

上の #footer などのセレクターは例です。実際のフッター要素に付いている id やクラスに置き換えてください。ブレークポイント（例では 689px）も、Blocksy の設定やテーマのバージョンによって異なるため、プレビューで確認しながら調整します。

濃い背景色のフッターでは、文字とリンクの色のコントラストが不足しがちです。本文サイズの文字は背景との比 4.5:1 以上を目安にし、SNS アイコンのようなリンクは押しやすい大きさ（24px 四方以上が目安）を確保してください。

ページごとにフッターを出し分ける

LP など、特定のページだけフッターを消したい場合は、投稿やページの編集画面のサイドバーにある Blocksy の設定パネルで、フッターを表示しない設定を選べます。LP ではフッターを消し、本文の最後に問い合わせボタンだけを置く、という使い方が一般的です。

ページの種類ごとにまったく違うフッターを出したい場合（例: 会員向けページとそれ以外で内容を変える）は、有料版の Blocksy Pro に含まれる、条件付きで複数のヘッダー・フッターを使い分ける機能や、ブロックで作ったコンテンツを指定位置に差し込む機能（Content Blocks）が候補になります。どの機能がどのプランに含まれるか、どんな条件を指定できるかは変わることがあるため、導入前に Blocksy の公式ドキュメントで確認してください。

表示されない・崩れるときの確認

カスタマイザーで変えたのに反映されない: 「公開」を押したかを確認し、ページキャッシュや CDN のキャッシュを削除します。ログアウトした状態でも確認してください。
ウィジェットエリアの中身が出ない: その列にウィジェットエリアの要素を配置しているか、配置した番号と「外観」→「ウィジェット」で編集した番号が一致しているかを確認します。
スマートフォンで崩れる: 端末ごとの列設定と要素の表示・非表示を見直します。長い URL やメールアドレスが列幅をはみ出す場合は、overflow-wrap: anywhere; を指定すると折り返せます。
フッターが二重に表示される: ページ本文の最後に置いたブロックと、テーマのフッターが重複していないかを確認します。

まとめ

Blocksy の独自フッターは、フッタービルダーで行と列を決め、各列に要素を配置して作る。先にスマートフォンでの並び方まで含めてレイアウトを決めておく。
各列の中身はウィジェットエリアでブロックを使って作り、使い回す部分は同期パターンにする。
コピーライトは要素の置き換え記法か、エスケープしたショートコードで年を自動化できる。
細部は子テーマの CSS で整える。セレクターは開発者ツールで確認し、リンクの下線やコントラストにも配慮する。
ページ単位でフッターを消すのは無料版の設定で、条件付きの複数フッターは Blocksy Pro の機能として公式ドキュメントで確認する。