【AFFINGER6】フッターを2列3列に設定・カスタマイズする方法

 

今回はAFFINGERをが使用のユーザーに向けて、フッターを2列3列でメニュー表示する方法について解説をして行きます。

 

フッターの作り方が分からない方や細かい設定方法まではいまいち理解できていない方にオススメの記事となっています。

 

本記事の内容

フッターについて

フッターの作り方について

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

フッターとは

 

 

それでは解説をしていきます。そもそもですが…

 

フッターってなに??

 

こんな疑問を持っている方もいるかと思います。

 

フッターとは、ブログやホームページの最下部に位置するメニューエリアのことを指します

 

ほとんどのWebサイトには設置されており、シンプルなものから手の込んだカスタマイズがされているものまであります。

 

実際のフッターメニューはこちら

 

 

また、今回はそのフッターに設置するメニューを2列3列にする方法を紹介するので、フッターに設置するリンクなどもイメージしておいていただけたらと思います。

 

よくフッターに設置されているリンク

  • プロフィール
  • プライバシーポリシー
  • サイトマップ
  • お問合せ
  • カテゴリ
  • アーガイブ記事

 

自分の好みに合わせてカスタマイズしていただけるので、オリジナリティあふれるものを作成してみてください!

 

2列フッターのカスタマイズについて

 

まず初めに、2列のフッターエリアを作成方法の解説です。

 

step
1
ウィジェット管理画面に移動

WordPress管理画面から「外観」→「ウィジェット」に移動します。

 

 

step
2
2列ウィジェットに追加作業

フッターに追加したい項目をドラッグ&ドロップで追加してください。

 

 

step
3
フッターエリアの確認

それでは、設定が正しく反映されているか自分のトップページを確認してみてください。

 

設定が反映されていると、2列フッターの場合には、30% : 70% の割合で表示されているはずです。

 

 

今回は使用している「タグ」を表示してみました!ちゃんと表示されてますね!

 

3列フッターのカスタマイズについて

 

続いて、3例のフッターエリアを作成方法の解説です。

 

こちらも、手順は先ほどの「2列フッター」のやり方とほとんど同じなので、簡単に作業ができると思います!

 

step
1
ウィジェット管理画面に移動

WordPress管理画面から「外観」→「ウィジェット」に移動します。

 

 

step
2
3列ウィジェットに追加作業

フッターに追加したい項目をドラッグ&ドロップで追加してください。

 

 

 

step
3
フッターエリアの確認

それでは、設定が正しく反映されているか自分のトップページを確認してみてください。

 

設定が反映されていると、3列フッターの場合には、30% : 35% : 35%の割合で表示されているはずです。

 

 

注意ポイント

3列フッターの設置するときには、必ず「フッター右用ウィジェット(2列目)」を設定が必要です。

フッター右用ウィジェット(3列目)だけでの使用はできないので、注意しておきましょう!

 

フッターのカスタマイズについて

 

フッターの設置ができたら、最後に配色などのカスタマイズをしましょう。

 

WordPress管理画面より、「外観」→「カスタマイズ」→「基本エリア設定」→「フッターエリア」の順に選択してください。

 

 

運営サイトの配色テーマに合わせながら、カスタマイズしてみてください

 

まとめ:フッターのこだわって設定してみよう!

イラスト

 

以上、【AFFINGER6】フッターを2列3列に設定・カスタマイズする方法でした。

 

いろんなブロガーの方のフッターを見てみると、ものすごいシンプなものから、もだわっているものまで。

 

自分のサイトなので、ぜひ細部までカスタマイズしてほしいと思います!

 

AFFINGERのカスタマイズに関するまとめ記事はこちら

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-, ,