AFFINGER

AFFINGER5(アフィンガー5)カスタマイズ設定【フッター】

AFFINGERフッター

 

悩む人
フッターの設定方法が分からない
AFFINGER5でのフッターのカスタマイズ方法分からない

こんな悩みを解決します。

 

本記事の内容

  • フッターについて
  • AFFINGER5のフッターカスタマイズ方法

 

ブログの構成要素のうちの一つ「フッター」

 

記事を読み終えた後に別ページへ誘導する役割があります。

 

AFFINGER5では使い方とCSSを設定すれば、フッターを思い通りに作ることが可能。

CSSって難しそう...
大丈夫だよ!コピペするだけで簡単に設定できます!
あきしゅん

 

 

本記事ではAFFINGER5のフッターの設定を詳しく説明します。

 

フッターの役割

フッター

フッターとはサイトの下部にある小さなサイト案内の領域のことです。

記事を読み終えた後に別ページへ誘導する役割が。

重要なページやお問い合わせページを載せることで読者にクリックを促せます。

 

また、ページの最後をまとめるので、デザイン性も重要となります。

 

【AFFINGER5】フッターカスタマイズ方法

AFFINGERフッター

AFFINGERでのフッターのカスタマイズ方法は3種類の設定画面があります。

  • AFFINGER5管理
  • カスタマイズ設定
  • ウィジェット

「AFFINGER5管理」はスマホ用フッターメニューの設定、「カスタマイズ設定」は色や背景画像の変更、「カスタマイズ設定」は色や背景画像の変更、「ウィジェット」では表示項目を設定できます。

では、設定方法について詳しく説明します。

 

AFFINGER5管理

AFFINGERスマホ用フッターメニュー

AFFINGER5管理ではスマホ用フッターメニューを設定できます。

WordPress管理画面より「AFFINGER5管理」→「メニュー」へお進みください。

「その他のスマホ用メニュー」でチェックを入れると画像のように表示されます。

スマホ用フッターメニュー

 

このメニューは「外観」→「メニュー」で設定したものが表示されます。

メニューの作成方法はこちらの記事を参考にしてください。

affinger-menu-bar
AFFINGER5(アフィンガー5)カスタマイズ設定【メニューバー】

続きを見る

 

カスタマイズ設定

カスタマイズではフッターの色や背景画像を変更できます。

また、「追加css」からフッターデザインを変更することも可能。

あきしゅん
追加cssについては後ほど説明するね!

 

WordPress管理画面より「外観」→「カスタマイズ」です。

ここでは以下の設定項目がカスタマイズできます。

  • フッターエリア
  • スマホフッターメニュー

 

フッターエリア

フッターカスタマイズ

「基本エリア設定」→「フッターエリア」に進んでください。

 

ここでは以下の設定ができます。

  • 文字色
  • 背景色
  • 背景画像

 

背景を単色ではなく、画像を挿入することが可能。

画像の位置の調整もできます。

あきしゅん
私は青をベースとしたシンプルなデザインにしてるから画像は使ってないよ

 

フッターカスタマイズ1

上の画像を参考にフッターのカスタマイズを決めてください。

 

スマホフッターメニュー

スマホ用フッターメニューカスタマイズ

「メニューのカラー設定」→「スマホフッターメニュー」に進んでください。

 

ここでは以下の設定ができます。

  • 文字色
  • 背景色
  • アイコンサイズ

 

スマホ用フッターメニューカスタマイズ1

上の画像を参考にスマホフッターメニューのカスタマイズを決めてください。

 

ウィジェット

フッターウィジェット

ウィジェットではフッターに表示する項目を設定できます。

WordPress管理画面より「外観」→「ウィジェット」からお進みください。

フッター関連の設定は赤枠の「フッター右用ウィジェット(2列目)」「フッター右用ウィジェット(3列目)」です。

 

参考に「あきブログ」のウィジェット設定は以下の通りです。

フッター2列目

  • 固定ページ

フッター3列目

  • 検索
  • アーカイブ

 

これらの項目を設定した結果が、こちらのようなフッターになります。

フッターウィジェット1

自分の設定したい項目を好きな位置に配置しましょう。

 

追加CSSでフッターカスタマイズ

CSS

現在あきブログのフッター項目は以下の通りでした。

  • 固定ページ
  • 検索
  • アーカイブ

 

これらを追加CSSの設定なしで表示すると画像上のようになります。

フッター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を追加することで見た目よく表示できます。

コピペして自分の思い通りのフッターを作成してみましょう。

 

デザイン性が高いAFFINGERで、フッターをカスタマイズしてみてください。

 

読者目線で見やすいサイトを意識しつつ、自分好みのフッターを作ってブログを楽しみましょう。

 

また、他に役に立つAFFINGERに関する記事は下記にまとめていますので、ご活用下さい。

AFFINGER記事一覧

 

 

この記事を読んでるという方はAFFINGERを既に使っている方だと思います。

以下の文章は WordPressテーマ「AFFINGER」を購入しようと思っている方向けです

AFFINGERならサイトデザインを簡単にカスタマイズできます。

実は私がWordPressでブログを初めて1週間の初心者時代から、このサイトのデザインは変わっていません。

 

初心者でもAFFINGERなら、あなたが作りたいフッターを簡単に作ることが可能。

こちらの記事を読めばAFFINGERがいかにデザインカスタマイズ性が高いか評判を確認することができます。

 

こんな方にオススメ

  • 今のテーマでデザインに納得してない方
  • ブログ初心者でテーマ選びに迷ってる方
  • CSSの知識がないけどブログデザインに力入れたい方

 

これらに当てはまる方は是非早いうちに、AFFINGER導入を考えてみてください。

記事を数十本書いてからのテーマ変更は時間がかかったり、記事が修正不可能だったり大変なことだらけです。

 

効率よく、そして楽しくブログを運営していくために少し初期投資してみませんか?

AFFINGER5の購入はこちら

 

 

-AFFINGER

©️ 2020 あきブログ