こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、AFFINGER7のフッター設定からカスタマイズ方法まで、初心者向けにわかりやすく解説します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7のフッター設定とは？
AFFINGER7では、フッターメニューや背景色、ウィジェット、コピーライトなどを設定し、サイト下部のデザインや利便性をカスタマイズできます。
フッターにメニューや関連ページへのリンクを配置すると、読者が必要な情報を見つけやすくなります。また、背景色やレイアウトを調整すれば、サイト全体のデザインに統一感を持たせられます。
この記事では、AFFINGER7のフッター設定方法を中心に、メニューの作成・表示、背景色の変更、3列レイアウト、ウィジェット、コピーライトの設定手順を解説します。
フッターメニューを
2列目に配置した3列フッターの例
デフォルトのフッターメニューを
表示した3列フッターの例
AFFINGER7のフッターメニューを設定する方法
AFFINGER7でフッターメニューを表示するには、WordPress管理画面でメニューを作成し、表示位置を設定します。
フッターメニューには、プライバシーポリシーやお問い合わせ、サイトマップなど、読者が必要な情報にアクセスできるページを配置するのがおすすめです。
関連記事 プライバシーポリシー・お問い合わせ・サイトマップの作成方法は、以下の記事で詳しく解説しています。
フッターメニューを作成する
手順1
WordPress管理画面の「外観」→「メニュー」を開き、新しいメニューを作成します。
- 「新しいメニューを作成しましょう」をクリックします。
- メニュー名に「フッターメニュー」など、わかりやすい名前を入力します。
- 「メニューを作成」をクリックします。
- 「メニュー項目を追加」から、表示したい固定ページやカテゴリーなどを選択します。
- 追加した項目を並べ替え、「メニューを保存」をクリックします。
すでにメニューを作成している場合は、新規作成せず既存のメニューを編集しても構いません。
フッターメニューの表示位置を設定する
手順2
作成したメニューの設定画面で、表示位置にある「フッターメニュー」を選択し、メニューを保存します。
フッターメニューをウィジェットの「ナビゲーションメニュー」やテキストリンクで代用する場合は、メニューの表示位置を設定する必要はありません。
設定項目の名称や配置はWordPressのバージョンによって異なる場合があります。表示位置が見つからない場合は、「メニュー設定」付近を確認してください。
設定後、サイトを表示してフッターにメニューが表示されているか確認しましょう。
関連記事 メニューの作成方法は、以下の記事で詳しく解説しています。
-
-
AFFINGER7のメニュー設定方法｜ヘッダー・フッター・スマホメニューを解説
AFFINGER7のメニュー設定を初心者向けに解説。ヘッダーメニュー・フッターメニュー・スマホメニューの作成方法から、おすすめ設定やデザイン調整まで分かりやすく紹介します。
AFFINGER7のフッター背景色・文字色を変更する方法
AFFINGER7では、カスタマイザーからフッターの背景色や文字色を変更できます。サイト全体の配色に合わせて調整すると、デザインに統一感を持たせられます。
フッターの背景色・文字色を設定する
- WordPress管理画面から「外観」→「カスタマイズ」を開きます。
- 「フッター」→「フッターエリア」を選択します。
- フッターの背景色や文字色の設定項目を確認します。
- 好みの色を選択し、プレビューで表示を確認します。
- 問題がなければ「公開」をクリックして設定を保存します。
フッター上部のエリアも、「フッターバナーエリア」で背景色や余白を調整できます。
- AFFINGER7のバージョンや設定画面によって項目名が異なる場合があります。実際のカスタマイザーに表示される名称に合わせて説明を調整してください。
フッターエリア
フッター
➡︎
フッターエリア
➡︎
詳細設定項目
⬇︎
以下は、各詳細設定項目が表示される位置までスクロールした画面です。
フッターエリア
フッターエリア
- 横幅を100%にする（必要に応じて）
文字色
- 色を選択 → カラーパレットから選択
背景色
- 色を選択 → カラーパレットから選択
- グラデーション上部 → カラーパレットから選択
- グラデーションを横向きにする（必要に応じて）
背景画像
画像を選択（必要に応じて）
横位置
- 「左・真ん中・右」→ ラジオボタンで切り替え
縦位置
- 「上・真ん中・下」→ ラジオボタンで切り替え
- 背景画像を繰り返さない（必要に応じて）
- 背景画像を幅100%のレスポンシブにする（必要に応じて）
- 背景画像を暗くする（必要に応じて）
コピーライト
コピーライトの文字色
- 色を選択 → カラーパレットから選択
フッターバナーエリア
フッター
➡︎
フッターバナーエリア
➡︎
詳細設定項目
⬇︎
以下は、各詳細設定項目が表示される位置までスクロールした画面です。
フッターバナーエリア
背景色
- 色を選択 → カラーパレットから選択
- 左右の余白を「0」にする
フッターの配色を決めるポイント
フッターの背景色と文字色は、読みやすさを優先して設定しましょう。
- 背景色： ヘッダーやサイト全体の配色に合わせる
- 文字色： 背景色とのコントラストを確保する
- リンク色： 通常の文字と区別できる色にする
暗い背景色を使う場合は、文字色を白や明るい色にすると読みやすくなります。
関連記事 サイト全体のカラー設定については、以下の記事で詳しく解説しています。
-
-
AFFINGER7の全体カラー設定方法｜サイト全体の色を一括変更する手順
AFFINGER7の全体カラー設定方法を初心者向けに解説。サイト全体の色を一括変更する手順や、キーカラー・メインカラーの役割、AFFINGER管理のカラーパターンとの違い、カラーが反映されない場合の対処法まで分かりやすく紹介します。
AFFINGER7のフッターを3列で表示する方法
AFFINGER7では、フッターにサイトタイトル・フッターメニュー・検索ウィジェットを配置して、3列のレイアウトを作成できます。
ここでは、左列にサイトタイトル、中央列にフッターメニュー、右列に検索窓を表示する設定方法を解説します。
3列フッターの表示イメージ
3列フッターは、次の構成がおすすめです。
- 左列：サイトタイトル・キャッチフレーズ
- 中央列：フッターメニュー
- 右列：検索ウィジェット
- 下段：コピーライト
フッターメニューには、ホーム・サイトマップ・お問い合わせ・プライバシーポリシーなどのリンクをまとめます。検索窓を右列に配置すると、読者がサイト内の記事を探しやすくなります。
1列目：サイトタイトルを表示する
フッター左側には、サイトタイトルとキャッチフレーズを表示できます。
サイトタイトルは、WordPress管理画面の「外観」→「カスタマイズ」→「サイト基本情報」から設定します。
サイトタイトルやキャッチフレーズを入力し、プレビューで表示を確認してください。キャッチフレーズが不要な場合は、表示しない設定にします。
また、「ヘッダーナビゲーション（右※PCのみ）」ウィジェットにテキストを入力すると、フッター1列目に追加のテキストを表示できます。
関連記事 サイトタイトルやキャッチフレーズなどの設定方法は、以下の記事で詳しく解説しています。
-
-
AFFINGER7のサイト基本情報設定｜サイトのタイトル・キャッチフレーズ・サイトアイコン設定を解説
AFFINGER7のサイト基本情報設定を解説します。カスタマイザーでサイトタイトル・キャッチフレーズ・サイトアイコンを設定する方法や、WordPressの一般設定との連動について初心者向けに分かりやすく紹介します。
2列目：フッターメニューを表示する
中央列には、ナビゲーションメニューを配置します。
まず、WordPress管理画面の「外観」→「メニュー」で、ホーム・サイトマップ・お問い合わせ・プライバシーポリシーなどを登録したフッターメニューを作成します。
3列表示の中央列に配置する場合は、メニューの表示位置「フッターメニュー」のチェックを外して保存します。これにより、通常の横並びメニューではなく、ウィジェットとして中央列に配置できます。
続いて、「外観」→「ウィジェット」を開き、次の手順で設定します。
- 「ナビゲーションメニュー」ウィジェットを選択します。
- 配置先に「フッター（2列目）」を指定して追加します。
- 表示するメニューに、作成したフッターメニューを選択します。
- 設定を保存します。
3列目：検索ウィジェットを設置する
右列には、サイト内の記事を検索できる検索窓を配置します。
「外観」→「ウィジェット」を開き、「検索」ウィジェットを「フッター（3列目）」に追加して保存してください。
サイトを表示し、右列に検索窓が表示されていることを確認します。
検索窓のデザインを変更する場合は、カスタマイザーの「オプション（その他）」→「検索フォーム」から詳細設定を確認してください。
コピーライトを表示する
フッターの下段には、コピーライトを表示できます。
コピーライトは、WordPress管理画面の「AFFINGER管理」→「その他」から設定します。著作権者の名称などを入力し、保存後に表示を確認してください。
以上で、サイトタイトル・フッターメニュー・検索ウィジェットを使った3列フッターの設定は完了です。
なお、中央列にメニューを配置する場合は、メニューの表示位置とウィジェットの設定を混同しないように注意してください。
関連記事 コピーライトの設定方法は、以下の記事で詳しく解説しています。
-
-
AFFINGER7のその他の設定を解説｜使い方とおすすめ設定
AFFINGER7の「その他の設定」を初心者向けに解説。外部リンク、ウィジェット、検索結果、演出、遅延読込、CSSキャッシュなどの設定方法とおすすめ設定を紹介します。
AFFINGER7のフッターウィジェットを変更する方法
AFFINGER7のフッターに表示する内容は、ウィジェットの追加・編集・削除によって変更できます。3列フッターを設定した後も、サイトの目的に合わせて表示内容を調整できます。
フッターのウィジェットを追加・編集する
WordPress管理画面の「外観」→「ウィジェット」を開き、変更したいフッターのウィジェットエリアを選択します。
- 追加する場合：利用できるウィジェットから項目を選び、配置先を指定して追加します。
- 内容を変更する場合：設置済みのウィジェットを開き、タイトルや表示内容を編集して保存します。
- 削除する場合：不要なウィジェットを削除します。
3列フッターでは、中央列の「フッター（2列目）」にナビゲーションメニュー、右列の「フッター（3列目）」に検索など、表示したい内容に応じて配置先を使い分けます。
フッターの表示を確認する
設定を変更したら、サイトを表示して各列の内容や並び方を確認します。
ウィジェットを削除したり、特定の列に何も配置しなかったりすると、意図したレイアウトにならない場合があります。3列表示を維持したい場合は、各列の設定と実際の表示を確認してください。
関連記事 ウィジェットの種類や追加・編集の詳しい操作方法は、以下の記事で解説しています。
-
-
AFFINGER7のウィジェット一覧と設定方法｜おすすめの使い方も解説
AFFINGER7のウィジェット一覧や設定方法を初心者向けに解説。おすすめのウィジェット配置例、不要なウィジェットの無効化、ウィジェットタイトルのスタイル設定、表示されないときの対処法まで分かりやすく紹介します。
AFFINGER7のフッター設定に関するよくある質問
AFFINGER7のフッター設定について、メニューの表示方法や3列レイアウト、背景色の変更など、よくある疑問にお答えします。
AFFINGER7のフッターメニューはどこで設定できますか？
WordPress管理画面の「外観」→「メニュー」から作成し、表示位置で「フッターメニュー」を指定します。設定後、サイトを表示して正しく反映されているか確認しましょう。
AFFINGER7のフッターを3列で表示するには？
フッターの3列表示は、ウィジェットエリアにナビゲーションメニューや検索窓などを配置してカスタマイズできます。各列に表示する内容を設定し、サイトに合ったレイアウトに整えましょう。
AFFINGER7のフッターの背景色や文字色は変更できますか？
カスタマイザーのフッター関連設定から変更できます。背景色と文字色のコントラストを確保し、リンクも読みやすい配色に整えましょう。
AFFINGER7のフッターにウィジェットを表示するには？
WordPress管理画面の「外観」→「ウィジェット」を開き、フッター関連のウィジェットエリアに表示したい項目を追加します。設定後は、実際のサイトで表示を確認してください。
フッターのコピーライトは変更できますか？
AFFINGER管理のコピーライト関連設定から変更します。サイト名や年号などを適切に設定し、フッターに正しく表示されているか確認しましょう。
まとめ！AFFINGER7のフッター設定方法｜メニュー・背景色・コピーライトを解説
AFFINGER7では、フッターメニューや背景色、ウィジェット、コピーライトなどを設定して、サイト下部をカスタマイズできます。
フッターメニューにはプライバシーポリシーやお問い合わせなどの案内をまとめ、ウィジェットにはカテゴリーや最近の投稿などを配置すると、読者が必要な情報を見つけやすくなります。
この記事で紹介した設定方法を参考に、サイトのデザインや目的に合ったフッターを作成してみてください。
