フッターにもサイトロゴを入れたくなることはないでしょうか？
SWELLのフックを用いると、簡単に挿入することができます。
※ロゴ設定はヘッダーと連動したままです。
本記事ではSWELLでフッターにロゴを入れる方法を紹介します。
SWELLでフッターにロゴを入れる方法
SWELLでフッターにロゴを入れる方法はフックを使ってロゴを挿入して、CSSで見た目を整えるだけです。
ロゴの表示
PHPは子テーマのfunctions.php、またはPHPスニペット管理プラグインのどちらか一方へ追加します。作業前に変更するPHPと追加CSSを保存してください。functions.phpでは既存のPHP開始タグの内側に1回だけ追加します。
swell_after_copyrightを利用しています。
add_action('swell_after_copyright', function() {
echo SWELL_PARTS::head_logo( true );
});SWELL 2.19.0では、引数をtrueにするとトップページでもロゴの外枠がdivになり、フッターにh1を追加しません。ロゴ画像が未設定の場合はサイト名の文字表示になります。
CSSで調整
CSSは以下の通りです。
CSSは「外観」→「カスタマイズ」→「追加CSS」に追加します。
2024.5追記 -webkit-backface-visibility: hidden;
当時の環境でぼやけ対策として追加した指定です。backface-visibilityは本来3D変形の裏面表示を制御するもので、画像を鮮明にする標準機能ではありません。接頭辞付きの指定もブラウザーに依存するため、元画像の解像度・拡大率・表示寸法を先に確認してください。
#footer .c-headLogo.-img {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 110px; /* ロゴに合わせて高さ調整 */
-webkit-backface-visibility: hidden;/* ロゴ画像がぼやけるのを対策 */
image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 768px) {
#footer .c-headLogo.-img {
bottom: 90px; /* ロゴに合わせて高さ調整 */
}
}フッターメニューとロゴの余白は、下記を調整してみてください。
.l-footer__foot {
padding-top: 6em;
}以上でロゴが入りました。
フッターウィジェットを用いている人はさらにCSSを調整しましょう。
フッターロゴの表示見本
次はSWELL 2.19.0のフッターテンプレートとロゴ関数で生成したHTMLに、上記CSSを適用した見本です。通常ロゴ・メニュー2項目・ウィジェットなしの構成で、スタイルはこの枠内に限定しています。ロゴ画像やメニューの量が異なる場合は、余白と位置を調整してください。
この例はCSSでロゴをメニューの上へ移動するため、Tabキーではメニューのリンクを経てからロゴへ移動します。HTML上のロゴはコピーライトの後にあります。見た目と同じ順番で操作できる配置が必要な場合は、この絶対配置の例を使わず、子テーマのフッターテンプレートで出力位置を調整します。
© WAZA（表示見本）
メニューが長くロゴと重なる場合の代替配置
| 幅 | 固定位置の例 | 代替CSS |
|---|---|---|
| 1280・769px | 今回の構成では重なりなし | 1280pxで重なりなし |
| 375px | メニュー領域と約10px重なる | メニュー・著作権表記の下に表示、重なりなし |
5項目のメニューと追加コンテンツを置いた検証では、375px幅で絶対配置のロゴとメニュー領域が約10px重なりました。
固定のbottom値で位置を合わせにくい場合は、前のロゴ配置CSSを次のCSSへ置き換えます。著作権表記の下に通常の流れで配置し、text-align:centerで画像を中央に揃えます。
#footer .c-headLogo.-img { display:block; position:static; left:auto; bottom:auto; transform:none; margin:20px auto 0; text-align:center; }応用
このカスタマイズの応用を記載しておきます。
フッターのロゴ画像を白や黒などの色に上書きしたい
CSSのfilterを使ってロゴ画像の色を変更することができます。
黒の場合
#footer .c-headLogo__img {
filter: brightness(0);
}白の場合
#footer .c-headLogo__img {
filter: brightness(0) invert(1);
}フッターのロゴ画像を別の画像に差し替えたい
以下のコードを子テーマのfunctions.phpのPHP領域へ1回だけ追加します。先にヘッダーのロゴ画像を設定し、フッター出力のPHPも有効にしてください。ロゴ未設定でサイト名の文字だけが出ている場合は、置換対象の画像がないため、このコードだけでは画像を追加できません。
function motoki_changeFooterLogo() {
?>
<script>
function changeFooterLogos() {
document.querySelectorAll('#footer .c-headLogo.-img .c-headLogo__img').forEach(function(logo) {
logo.src = 'https://motoki-design.co.jp/wordpress/wp-content/uploads/logo-2.png';
logo.removeAttribute('srcset');
});
}
if (document.readyState === 'complete') {
changeFooterLogos();
} else {
window.addEventListener('load', changeFooterLogos, { once: true });
}
</script>
<?php
}
add_action('wp_print_footer_scripts', 'motoki_changeFooterLogo');保存したロゴと長いメニューを公開画面で確認する
この方法は、ウィジェットへ画像を追加する方法ではありません。
ヘッダー用に保存されたロゴを、swell_after_copyrightのフックでフッターにも出力します。
「外観 → カスタマイズ → ヘッダー」のロゴ画像を選び、「公開」を押してから公開画面を再読み込みします。
検証ではメディアライブラリの既存画像を選択して保存し、ヘッダーとフッターの両方で画像が読み込まれることを確認しました。
長いメニューと重なる場合は、前の節の代替配置CSSへ置き換え、固定のbottom値を使う配置と同時に有効にしないでください。
代替配置ではロゴがメニューと著作権表記の下に通常の文書順で配置されます。
1280pxと375pxで表示を確認し、長いフッターメニューからEnterキーで固定ページへ移動できました。
この確認は既存画像の選択と代替配置が対象で、すべてのロゴ寸法や色変更の組み合わせを保証するものではありません。
元に戻すときはフッター出力のPHPスニペットと対応するCSSを停止します。
別のロゴ画像へ置き換えて色変更を確認する
画像を置き換える応用コードのURLは、使用する画像のメディア詳細にある「ファイルのURL」へ変更してください。
掲載例にはWAZAのロゴ画像URLを使用しており、以前の例にあった2023年12月の画像URLは404だったため修正しました。
検証では掲載した修正版でフッターの画像だけが置き換わり、ヘッダーの元画像は維持されました。
画像置換時はフッター画像のsrcsetも取り除き、別の候補画像が優先されないようにします。今回のSWELL標準ロゴ出力にはsrcset自体がなく、差し替え後の実画像が読み込まれることをPCとMobile表示で確認しました。
黒の例ではbrightness(0)、白の例ではbrightness(0) invert(1)が適用されることを確認しています。
白いロゴを白い背景へ置くと見えにくくなるため、フッター背景とのコントラストを確認してください。
白と黒のCSSはどちらか一方を使用します。
元に戻すときは画像置換のスニペットと色変更CSSを停止し、ヘッダー用に保存したロゴがフッターにも表示されることを確認します。
スマホで画像差し替えと中央配置を確認する
ヘッダーとフッターを見比べ、フッターだけが置換先の画像に変わることを確かめます。
Mobile表示でもヘッダーの元画像を維持し、フッターだけ別画像・黒色に変わることと、横方向にはみ出さないことを確認しました。
この画面は動作確認用の画像です。実際に使うロゴの余白・寸法とフッターの背景色で最終位置を調整してください。
まとめ
見た目的に物寂しくなるフッター。
企業やメディアを強調する時にロゴイメージは見た目的に良かったりすることがありますので、
SWELLの方は是非参考にしてみてください。
別テーマへ応用する場合は、そのテーマのフックとフッター構造を確認してください。サイト名やホームへのリンクを伝えるロゴには、意味を持つ画像とリンクのHTMLを用意します。装飾用の疑似要素だけでは、この例と同じ機能にはなりません。
関連する実装はSWELLカスタマイズのまとめから探せます。
白黒の指定は画像の不透明部分全体を単色化するため、背景が透明なロゴ向けです。
冒頭の画像は2023年の表示例です。
後半の検証画像は、2026年10月3日の環境と確認条件を各キャプションに記載しています。
最初のCSSはロゴを絶対配置する例です。
フッターメニューが長い場合やウィジェットがある場合は、PC・スマホで重なりを確認してください。
重なる場合は「メニューが長くロゴと重なる場合の代替配置」を参照し、絶対配置のCSSと代替配置のCSSを併用しないでください。
差し替え例の画像URLは自分のメディアURLへ変更します。ヘッダーのオーバーレイ設定でロゴが2枚出力される場合も、フッター内の両方を変更します。ヘッダー側の画像は変更しません。
元に戻すときは追加したPHPとCSSを両方取り除き、スニペット管理の場合は該当スニペットを停止します。
よくある質問：SWELLでフッターにロゴを入れるとき
フッターにロゴを入れると、ヘッダーのロゴ設定も変わりますか？
変わりません。記事では、ロゴ設定はヘッダーと連動したままで、ヘッダー用に保存されたロゴを、swell_after_copyrightのフックでフッターにも出力します。ウィジェットへ画像を追加する方法ではありません。
PHPとCSSは、どこに追加しますか？
PHPは子テーマのfunctions.php、またはPHPスニペット管理プラグインのどちらか一方へ追加します。CSSは「外観」→「カスタマイズ」→「追加CSS」に追加します。
ロゴ画像が未設定のときは、どうなりますか？
記事では、SWELL 2.19.0ではロゴ画像が未設定の場合、サイト名の文字表示になります。ロゴを反映するには、「外観 → カスタマイズ → ヘッダー」のロゴ画像を選んで「公開」を押し、公開画面を再読み込みします。
フッターメニューが長いと、ロゴと重なりますか？
重なる場合があります。記事では、最初のCSSはロゴを絶対配置する例なので、フッターメニューが長い場合やウィジェットがある場合は、PC・スマホで重なりを確認します。重なる場合は「メニューが長くロゴと重なる場合の代替配置」のCSSへ置き換え、絶対配置のCSSと併用しないでください。
ロゴを白や黒にしたいときは、どうしますか？
CSSのfilterを使ってロゴ画像の色を変更できます。記事では、白と黒のCSSはどちらか一方を使用します。白と黒の指定は画像の不透明部分全体を単色化するため、背景が透明なロゴ向けです。白いロゴを白い背景へ置くと見えにくくなるため、フッター背景とのコントラストを確認してください。
フッターのロゴを別の画像に差し替えるには？
ヘッダーのロゴ画像とフッター出力を設定したうえで、記事のコードを子テーマのfunctions.phpのPHP領域へ追加します。文字だけのロゴには画像を追加できません。画像URLは自分のメディアURLへ変更します。オーバーレイ設定でロゴが2枚出力される場合はフッター内の両方を変更し、ヘッダー側は変更しません。
画像を差し替えたのに、元の画像が表示されることはありますか？
記事では、画像置換時はフッター画像のsrcsetも取り除き、別の候補画像が優先されないようにしています。
元に戻すには、どうしますか？
追加したPHPとCSSを両方取り除き、スニペット管理の場合は該当スニペットを停止します。画像置換と色変更CSSも停止し、ヘッダー用に保存したロゴがフッターにも表示されることを確認します。
どこまで動作確認されていますか？
記事では、2026年10月3日にSWELL 2.19.0・WordPress 7.1.2の隔離環境で、1280pxと375pxの表示確認や、Mobile表示でフッターだけ別画像・黒色に変わり、横方向にはみ出さないことを確認したとされています。すべてのロゴ寸法や色変更の組み合わせを保証するものではなく、実際に使うロゴの余白・寸法とフッターの背景色で最終位置を調整してください。
