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

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

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

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

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

目次

著者

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

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

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に疑似要素でロゴを表示することもできます。

  • URLをコピーしました!

サービス

Service

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

目次