SWELLで簡単カスタマイズ！ウィジェットを使って、フッター周りのコンテンツを自由自在に編集

当ページのリンクには広告が含まれています。

2024年9月18日

SWELLで簡単カスタマイズ！ウィジェットを活用してフッター周りのコンテンツを自由自在に編集

SWELLのウィジェットを使って、フッター周りのコンテンツの「作成・編集」する方法をご紹介します。
「フッター周りに効果的なコンテンツを盛り込にましょう」

この記事でご紹介する、フッター周りのコンテンツは、ウィジェットで作成します。

ご紹介するウィジェットは、以下の5つです。

フッター直前
フッター（PC）1
フッター（PC）2
フッター（PC）3
フッター（スマホ）

ブログサイトにおいて、ヘッダーの周りと同様にフッターの周りも、SEO的に重要だと考えられます。ヘッダーとフッターは通常、サイトのすべてのページに表示されるため、クリックされる可能性が高くなります。また、フッターを充実させることでSEOにも効果的だと考えられます。

ヘッダーとフッターは、通常、サイトのすべてのページに表示されるため、クリックされる可能性が高くなります。また、フッターを充実させるとSEOにも効果的だと考えられます。

フッター周りの「わからない」を解決するために！フッターに絡む「ウィジェット・カラー設定・メニュー」など、すべての設置・編集方法をまとめました。^^／

こんな方におすすめ！

SWELL 初心者さん
フッターの設定方法を知りたい
フッター周りのコンテンツを充実させたい

この記事でわかること！

フッター周りのコンテンツ作成（ウィジェットで作成）
フッター周りの背景色や文字色の設定
フッターメニューの設定
まとめ！

それではご覧ください。

目次 "Contents"

フッター周りのコンテンツ作成（ウィジェットで作成）

この章では、フッター周りのコンテンツ作成（ウィジェットで作成）する手順をご紹介します。

ウィジェットで作成できるフッター要素は、以下の「PCで4つ、SPで1つ」です。

フッター直前
フッター（PC）1
フッター（PC）2
フッター（PC）3
フッター（スマホ）

当サイトのフッター部をベースに解説していきます。
以下のサンプル画像で、設置場所とウィジェット名を確認してください。

フッター周りの完成イメージは、以下のようになります。（当サイトサンプル_20240912）

それでは順番に見ていきましょう。

使用するウィジェット

使用するウィジェットの設定箇所は、以下の赤枠部のウィジェットです。

フッター周りに使用するウィジェットをWordPress管理画面から選択します。

Menu『WordPress管理＞ダッシュボード＞外観＞ウィジェット』をクリックします。

フッター（PC）1-3 と（スマホ）の補足

「フッター（PC）1」「フッター（PC）2」「フッター（PC）3」のウィジェットは、1行に表示され、自動的に左詰めで、カラム分けされます。
（1つ使うと1カラム、2つ使うと2カラム、3つ使うと3カラム）
「フッター（スマホ）」のウィジェットは、スマホ専用で、「フッター（PC）1-3」と入れ替わって表示されます。設定しない場合はスマホでも「フッター（PC）1-3」が縦並びで表示されます。

フッター直前ウィジェットのおすすめコンテンツ設置方法

フッター直前ウィジェットに挿入するコンテンツは、「ブログパーツ」を使ってあらかじめ作成します。

コンテンツは、上記のようなカラム分けしたバナー（ピックアップバナー風）がおすすめです。

ピックアップバナーを自作する方法はこちらでご紹介しています。あわせてご覧ください。

osaboo.com

SWELLで簡単カスタマイズ！カラムブロックを使ったピックアップバナー（風）の作り方を解説 SWELLに標準装備されている「ピックアップバナー」と同様のバナーリンクを好きなページと位置に設置できる「ピックアップバナー（風）のバナーリンク」の作り方をご紹介。「ブログパーツ・リッチカラム・バナーリンク」3つのブロックでどこでも貼れるピックアップバナーを作ろう。

ウィジェット画面で、以下のように『フッター直前』に『ブロック』を挿入して、ブログパーツのコードをペーストして完了です。

フッター直前

参考にしてみてください。

フッター（PC）1-3ウィジェットのおすすめコンテンツ設置方法

フッター（PC）1・2・3 のウィジェットに挿入するおすすめコンテンツは、以下の3つです。

フッター（PC）1 【SWELL】人気記事
フッター（PC）2 【SWELL】プロモーションバナー
フッター（PC）3 カテゴリ・アーカイブ・その他リンク

フッター（PC）1

フッター（PC）2

フッター（PC）3

参考にしてみてください。

フッター周りの背景色や文字色の設定

こんな感じの設定ができます。

フッター周りの背景色や文字色の設定は、以下を参考にしてください。

osaboo.com

SWELL カスタマイザー完全ガイド｜フッターのポイントと使い方！まとめてみた。 SWELLのカスタマイザーでできる「フッター」のポイントと使い方を初心者さん向けにご紹介。「フッター」の設定項目を一つ一つ全て徹底的に解説。サイトをカスタマイズするステップアップにお役立てください。

フッターメニューの設定

こんな感じの設定ができます。

SNSアイコンの表示設定は、カスタマイザーで行います。

フッターメニューの設定は、以下を参考にしてください。

osaboo.com

SWELLのメニューの設定方法！最初に必要なのは 2つだけ「初心者必見」 WordPressテーマSWELLのブログサイト運営で必須となるヘッダーメニュー（グローバルナビ）とフッターメニューの設定方法とその他のメニューの表示イメージをご紹介。初心者目線で…画像付きで視覚的に理解しやすくご紹介します。