AFFINGER(アフィンガー)

AFFINGER5フッターのカスタマイズ方法まとめ

2020年9月29日

AFFINGER5フッターのカスタマイズ方法まとめ

 

悩む人
AFFINGER5のフッターをカスタマイズしたいな...

 

こんな悩みに答えようと思います

 

本記事の内容

  • AFFINGER5でフッターにメニューを追加する方法
  • AFFINGER5でフッターの背景色を変更する方法
  • AFFINGER5でフッターを2列・3列に設定する方法
  • フッターを調整するメリット

 

本記事では、AFFINGER5のフッターのカスタマイズを紹介しています。

特に他のテーマから移行した後は、フッターのカスタマイズに悩むかなと思います、、、

 

KEI
本記事を書いている僕は以前Cocoonのテーマを使っていましたが、移行後のフッター設定に悩みましたので、移行後にやったことを中心に紹介しています

 

AFFINGER5のフッターのカスタマイズをまとめていますので、何か参考になりましたら幸いです。

 

それでは、早速始めていきます。

 

 

AFFINGER5でフッターにメニューを追加する方法

 

まず始めにフッターにメニューを追加する方法について、解説します。

 

完成形イメージ

フッターの写真1

 

上記のようにフッターにテキストリンクを横一列に配置します。

 

今回はフッターメニューには固定ページの以下3つを追加していこうと思います。

 

  • 運営者情報
  • サイトマップ
  • お問い合わせフォーム

 

AFFINGER5のフッターメニューを追加する方法は、WordPress管理画面の『①外観 → ②メニュー →③新しいメニューを作成しましょう』から設定できます。

 

メニューの管理画面

 

③新しいメニューを作成しましょう」をクリックして、フッター用のメニューを新たに作成します。

 

そうすると以下のような画面になるので、「①メニュー名」内に覚えやすい名前を入力します。

 

メニューの管理画面

 

KEI
僕個人では「フッターメニュー」としてメニュー名を設定しています

 

メニュー名が設定できましたら、最後に「メニューを作成」をクリックします。

 

メニューの管理画面2-2

 

メニューに追加されますので、選択されている状態で「選択」ボタンをクリックします。

 

メニューの管理画面3

 

次にフッターメニューに項目を追加していきます。

画面左にある「①メニュー項目を追加」の固定ページを開き、登録されているメニューにチェックボタンを押して「②メニューに追加」をクリックします。

クリック後フッターメニューに項目が追加されます。

 

KEI
順番を変更したい場合には、メニュー項目をクリックした状態で配置したい位置に動かすと変更できます。

 

最後に「フッター用メニュー」「スマートフォンフッター用メニュー」にチェックをして、メニューを保存をクリックで完了です。

 

メニューの管理画面4

 

これでフッターの設定は完了になります!

お疲れ様です!

 

AFFINGER5でフッターの背景色を変更する方法

 

続いてフッターの背景色の変更方法について、紹介します。

 

フッターの色は「外観 → カスタマイズ → 基本エリア設定 → フッターエリア」から変更できます。

 

フッターカスタマイズ方法

 

  1. フッター文字色 → フッターで設定した文字の色を変更できます
  2. 背景色 → フッターの背景色を変更
  3. 背景色(グラデーション上部) → フッター上部の色をグラデーション風に変更できます

 

設定が終わりましたら「公開」をクリックして完了です!

 

AFFINGER5でフッターを2列・3列に設定する方法

 

フッターを2列 or 3列に配置する方法について解説します。

イメージは以下キャプチャの通りです。

 

フッター3列

 

列の変更は「①外観 → ②ウィジェット → ③フッター右用ウィジェット(2列)、フッター右用ウィジェット(3列)」から設定できます。

 

フッター2,3列設定方法

 

  • フッター右用ウィジェット(2列) → フッターを2列で配置にする
  • フッター右用ウィジェット(3列) → フッターを3列で配置にする

 

注意ポイント

フッターを3列に配置する際にはフッター右用(2列)を先に設定してあげる必要があります。フッター右用ウィジェット(3列)のみでは、設定ができないようです。

 

何列で設定するか決まりましたら「利用できるウィジェット」から追加したい項目を長押ししながら、右側の「フッター右用ウィジェット(2列、3列)」に移動します。

 

項目(ウィジェット)が追加されていることが確認できましたら「完了」をクリックして終了です。

 

お疲れ様でした!

 

フッターを調整するメリット

 

最後に、フッターを調整するメリットについて簡単に紹介します。

 

  • サイトの回遊性をあげる
  • ページ全体のデザイン性向上

 

フッターにリンクを設けることによって、読者がサイト内を回遊しやすくなります。

 

フッターを変えることでSEOに直接的に影響があるわけではないようですが、「回遊」「滞在時間を増やす」といった効果が見込まれます。

 

なので、フッターに設置する情報は必要最小限にして、読者さんにサイト内を回遊してもらう工夫をするのもありだと思います。

 

KEI
フッター色も細部にこだわることで、サイト全体の印象もガラリと変わるのでAFFINGER5で自由にカスタマイズしてみましょう!

 

まとめ:AFFINGER5でフッターを自由にカスタマイズしよう!

 

ここまでAFFINGER5フッターのカスタマイズ方法について、紹介しました。

 

最後に今回紹介したAFFINGER5フッターのカスタマイズ方法についてまとめます。

 

本記事のまとめ

  • AFFINGER5でフッターにメニューを追加する方法
  • AFFINGER5でフッターの背景色を変更する方法
  • AFFINGER5でフッターを2列・3列に設定する方法

 

もし、今回紹介しましたAFFINGER5の設定で少しでも興味をもち、まだ他のテーマ(特にCocoon)でブログ運営をしていましたら、「CocoonからAFFINGER5に移行した感想【移行は早めがオススメ】」でAFFINGER5を移行してみての感想を紹介していますので、参考にしてみてください。

 

関連記事
CocoonからAFFINGER5(アフィンガー5)移行後にやること

続きを見る

 

この記事が参考になりましたら幸いです!

 

ここまで読んでいただきありがとうございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)