AFFINGER5でのフッターのカスタマイズ方法分からない
こんな悩みを解決します。
本記事の内容
- フッターについて
- AFFINGER5のフッターカスタマイズ方法
ブログの構成要素のうちの一つ「フッター」
記事を読み終えた後に別ページへ誘導する役割があります。
AFFINGER5（アフィンガー5）では使い方とCSSを設定すれば、フッターを思い通りにカスタマイズすることが可能。
本記事ではAFFINGER5のフッターのカスタマイズ方法を詳しく説明します。
フッターの役割
フッターとはサイトの下部にある小さなサイト案内の領域のこと。
記事を読み終えた後に別ページへ誘導する役割があります。
重要なページやお問い合わせページを載せることで読者にクリックを促すことも可能。
また、ページの最後をまとめるので、デザイン性も重要となります。
【AFFINGER5】フッターカスタマイズ方法
AFFINGERでのフッターのカスタマイズ方法は3種類の設定画面があります。
- AFFINGER5管理
- カスタマイズ設定
- ウィジェット
「AFFINGER5管理」はスマホ用フッターメニューの設定、「カスタマイズ設定」は色や背景画像の変更、「カスタマイズ設定」は色や背景画像の変更、「ウィジェット」では表示項目を設定できます。
では、カスタマイズ方法について詳しく説明します。
AFFINGER5管理
AFFINGER5管理ではスマホ用フッターメニューを設定できます。
WordPress管理画面より「AFFINGER5管理」→「メニュー」へお進みください。
「その他のスマホ用メニュー」でチェックを入れると画像のように表示されます。
このメニューは「外観」→「メニュー」で設定したものが表示されます。
メニューの作成方法はこちらの記事を参考にしてください。
-
【AFFINGER5】メニューバーのデザイン・カスタマイズ設定方法を攻略
続きを見る
カスタマイズ設定
カスタマイズではフッターの色や背景画像を変更できます。
また、「追加css」からフッターデザインを変更することも可能。
WordPress管理画面より「外観」→「カスタマイズ」です。
ここでは以下の設定項目がカスタマイズできます。
- フッターエリア
- スマホフッターメニュー
フッターエリア
「基本エリア設定」→「フッターエリア」に進んでください。
ここでは以下の設定ができます。
- 文字色
- 背景色
- 背景画像
背景を単色ではなく、画像を挿入することも可能。
画像の位置の調整もできます。
上の画像を参考にフッターのカスタマイズを決めてください。
スマホフッターメニュー
「メニューのカラー設定」→「スマホフッターメニュー」に進んでください。
ここでは以下の設定ができます。
- 文字色
- 背景色
- アイコンサイズ
上の画像を参考にスマホフッターメニューのカスタマイズを決めてください。
ウィジェット
ウィジェットではフッターに表示する項目をカスタマイズできます。
WordPress管理画面より「外観」→「ウィジェット」からお進みください。
フッター関連の設定は赤枠の「フッター右用ウィジェット（2列目）」「フッター右用ウィジェット（3列目）」です。
参考に「あきブログ」のウィジェット設定は以下の通りです。
フッター2列目
- 固定ページ
フッター3列目
- 検索
- アーカイブ
これらの項目を設定した結果が、こちらのようなフッターになります。
自分の設定したい項目を好きな位置に配置しましょう。
追加CSSでフッターカスタマイズ
現在あきブログのフッター項目は以下の通りでした。
- 固定ページ
- 検索
- アーカイブ
これらを追加CSSの設定なしで表示すると画像上のようになります。
タイトルが邪魔ですし、固定ページの箇条書きも見にくく読者を誘導しづらいです。
また、キャッチコピーを設定するとタイトルの下に表示されてしまいます。
これらを調整するために、本記事では以下のカスタマイズ方法について説明します。
- サイトタイトル
- キャッチコピー
- リンク文字
- 箇条書き
この後解説するコードを画像のように貼り付けてください。
「外観」→「カスタマイズ」→「追加CSS」より設定できます。
サイトタイトル
フッターのサイトタイトルは以下のコードで非表示にできます。
#footer .footerlogo{
display:none;
/*サイトタイトル非表示*/
}
再度表示したい場合は上記のCSSコードを削除してください。
【/*サイトタイトル非表示*/】はメモで、コードには影響しません。
後からCSSを編集する時に編集ポイントを見つけやすいので、メモを残すようにしておきましょう。
【/*（メモ内容）*/】でコードに影響せずにメモを残せます。
キャッチコピー
フッターのサイトタイトルは以下のコードで非表示にできます。
#footer .footer-description a{
display:none;
/*キャッチコピー非表示*/
}
リンク文字
フッターのリンク文字は以下のコードで設定できます。
#footer a{
color:#ffffff;
font-size: 14px;
line-height: 2;
/*リンク文字の色*/
}
2行目は「色」、3行目は「文字のサイズ」、4行目は「行間」を設定してます。
箇条書き
フッターの箇条書きの色は以下のコードで設定できます。
#footer {
color:#ffffff;
/*箇条書きの色*/
}
また、他にもCSSで設定できますので、調整したい項目があれば調べてみてください。
【AFFINGER5】フッターカスタマイズ設定まとめ
AFFINGER5でのフッターの詳しいカスタマイズ方法を解説しました。
また、CSSを追加することで見た目よく表示できます。
コピペして自分の思い通りのフッターを作成してみましょう。
デザイン性が高いAFFINGER5で、フッターをカスタマイズしてみてください。
読者目線で見やすいサイトを意識しつつ、自分好みのフッターを作ってブログを楽しみましょう。
また、他に役に立つAFFINGER5に関する記事は下記にまとめていますので、ご活用下さい。
この記事を読んでるという方はAFFINGER5を既に使っている方だと思います。
以下の文章は WordPressテーマ「AFFINGER5」を購入しようと思っている方向けです。
AFFINGER5ならサイトデザインを簡単にカスタマイズできます。
実は私がWordPressでブログを初めて1週間の初心者時代から、このサイトのデザインは変わっていません。
初心者でもAFFINGER5なら、あなたが作りたいフッターを簡単に作ることが可能。
こちらの記事を読めばAFFINGER5がいかにデザインカスタマイズ性が高いか評判を確認することができます。
-
WordPressテーマAFFINGER5(アフィンガー5)の評判・口コミまとめ
続きを見る
こんな方にオススメ
- 今のテーマでデザインに納得してない方
- ブログ初心者でテーマ選びに迷ってる方
- CSSの知識がないけどブログデザインに力入れたい方
これらに当てはまる方は是非早いうちに、AFFINGER5導入を考えてみてください。
記事を数十本書いてからのテーマ変更は時間がかかったり、記事が修正不可能だったり大変なことだらけです。
効率よく、そして楽しくブログを運営していくために少し初期投資してみませんか？
