SWELL│フッターにロゴを入れる方法
SWELL│フッターにロゴを入れる方法

SWELL│フッターにロゴを入れる方法

SWELL│フッターにロゴを入れる方法 2024 9/05 SWELLカスタマイズ 2022.03.302024.09.05

フッターにもサイトロゴを入れたくなることはないでしょうか？

SWELLのフックを用いると、簡単に挿入することができます。

※ロゴ設定はヘッダーと連動したままです。

本記事ではSWELLでフッターにロゴを入れる方法を紹介します。

目次

著者

motoki

WEB制作をしているデジタルノマド WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社 カスタマイズの依頼・相談

SWELLでフッターにロゴを入れる方法

SWELLでフッターにロゴを入れる方法はフックを使ってロゴを挿入して、CSSで見た目を整えるだけです。

ロゴの表示

管理画面 ＞ 外観 ＞ functions.phpに下記のコードを挿入します。

swell_after_copyrightを利用しています。

add_action('swell_after_copyright', function() { echo SWELL_PARTS::head_logo( 'no', true ); }); CSSで調整

CSSは以下の通りです。

style.css等に挿入しましょう。

2024.5追記　-webkit-backface-visibility: hidden;

フッターのロゴ画像がぼやけるのを対策しました。

#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を調整しましょう。

応用

このカスタマイズの応用を記載しておきます。

フッターのロゴ画像を白や黒などの色に上書きしたい

CSSのfilterを使ってロゴ画像の色を変更することができます。

黒の場合 #footer .c-headLogo__img { filter: brightness(0) invert(1); } 白の場合 #footer .c-headLogo__img { filter: invert(1) brightness(2) contrast(1); } フッターのロゴ画像を別の画像に差し替えたい

以下のコードをfunctions.phpに記載します。

function motoki_changeFooterLogo() { echo <<< EOM <script> window.onload = function() { var footerLogo = document.querySelector('#footer .c-headLogo.-img .c-headLogo__img'); if (footerLogo) { footerLogo.src = 'https://motoki-design.co.jp/wordpress/wp-content/uploads/2023/12/logo2.png'; footerLogo.srcset = ''; } }; </script> EOM; } add_action('wp_print_footer_scripts', 'motoki_changeFooterLogo');

まとめ

見た目的に物寂しくなるフッター。

企業やメディアを強調する時にロゴイメージは見た目的に良かったりすることがありますので、

SWELLの方は是非参考にしてみてください。

ちなみに他のテーマでも#footerに疑似要素でロゴを表示することもできます。

SWELLカスタマイズ
  • URLをコピーしました！

WAZAの有料記事のサブスクリプションも開始しました。

あわせて読みたい アフィリエイト付き！有料記事のサブスクリプションについて WAZAでは特に有益な記事は有料記事とさせていただいてます。 本記事では有料記事をリストでまとめました。 また有料記事の読み放題のサブスクリプション、そして有料記...

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

詳細を見る 全サービス一覧

関連記事

  • SWELL│テーブルの2列目も固定にする方法
  • SWELL│複数サイトの新着記事をカードで表示するカスタマイズ
  • SWELL│メインビジュアルのスライダーを6枚以上表示する方法
  • SWELL│SNSシェアボタンを好きな位置に固定表示する方法
  • SWELL│固定記事でもSNSシェアボタンを画面端に固定表示する方法
  • SWELL│CSSだけでスプリットレイアウトにする方法
  • SWELL│スマホ表示で「上スクロール時のみヘッダー表示」にする方法
  • SWELL│テーマで出力される構造化データ一覧│JSON-LD
  • WordPressテーマ乗り換え完全ガイド│旧テーマの見た目と機能を再現するプラグインの作り方
  • SWELL│THORからSWELLへ完全移行！乗り換え支援プラグインを解説
  • SWELL│STORKからSWELLへ完全移行！乗り換え支援プラグインを解説
  • SWELL│SANGOからSWELLへ完全移行！乗り換え支援プラグインを解説
📎📎📎📎📎📎📎📎📎📎
BOT