SWELLのフッターでは、フッターウィジェットが用意されておりフッターの上部（フッターメニューの上側）にコンテンツを配置することはできます。

しかし、フッターメニューとコピーライトの間に（ロゴなどを）表示するのはフッターウィジェットなどではできません。特別な方法（コツ）が必要です。

本記事は、2024/3/16時点（バージョン: 2.9.0）のSWELLを対象としています。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

フッターメニューとコピーライトの間に表示

フッターメニューとコピーライトの間に表示したサンプルです。ペンギンのロゴ画像を表示してみました。（背景透過の png 画像を使っています）

ここ（フッターメニューとコピーライトの間）にはフッターウィジェットではコンテンツを表示することができません。特別な手法を用いる必要があります。

作成方法（フッターメニューとコピーライトの間に表示）

コンテンツを配置する

フッターメニューとコピーライトの間に表示する場合、コンテンツは通常の方法では配置できません。そのため、functions.php に処理を横取りする（フックする）コードを記載し、表示したいコンテンツを HTML 形式で記述します。

WordPress の管理画面から「外観」→「テーマファイルエディター」を選択し、「functions.php」に以下のコードを記載します。

// ----------------------------------------
add_action('swell_after_copyright', function() {
	?>
<p class="my-footer-link" style="text-align:center">
	<a href="https://www.xxxxxxxxxxxxxxxx.co.jp">
		<img src="https://xxxxxxxxxxxxxxxx/LOGO.png">
	</a>
</p>
	<?php 
});

サンプルコードではロゴ画像をリンク付きで配置していますが、テキストのみでも、長文のコンテンツでも構いません。

「swell_after_copyright」は、コピーライトの後にコンテンツを配置するフックのため、このままでは、コピーライトの下に表示されます。次のCSSで上下を入れ替えます。

CSSで位置を入れ替える

「swell_after_copyright」でコンテンツを入れただけでは、コピーライトの下に表示されます。そのため、CSSを用いて上下の位置を入れ替えます。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

最初は、作成したコンテンツがコピーライトの下に表示されています。次のコードを入力して上下を入れ替えます。

以下のコードを記載します。

.l-footer .l-container {
    display: flex;
    flex-direction: column;
}

.copyright {
    order: 2;
}

.my-footer-link {
    order: 1;
}

完成です。

まとめ：（フッターメニューとコピーライトの間に表示）

SWELLテーマのフッターメニューとコピーライトの間にコンテンツを表示する場合は、functions.php に処理を横取りする（フックする）コードを記載します。

うまく利用して、より良いサイト、よりよいページを作ってくださいね。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。

あわせて読みたい

【デモサイト・サンプルあり】SWELL でおしゃれなサイトを作る方法！ SWELL はデザインセンス抜群のテーマです。ひとつ手を加えることでさらに一段上のおしゃれデザインのサイトを作れます。本記事ではSWELLで作ったサンプルとおしゃれサイトを作るポイントを解説します。

SWELL を使ってオシャレなページを作る方法を特別に解説

＼サンプルを見るだけでも役に立つ／

＼SWELL でオシャレサイトを作る方法は こちら をクリックしてください／

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

質問・相談はこちら

質問・相談はこちら

質問・相談はこちら

一番上に戻る（Back to the initial position on click.）

トップページ（Home.）

PR

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記