ここあです。
AFFINGER5もかなり前にSTORK同様
３列フッターが使えるようになりましたよね。
私は、アップデートされる前から
３列フッターにカスタマイズしていたので
正直、3列フッターが使えるようになっても
特に気にもしていなかったのですが…
いざ、アップデートされた3列フッターを
別のサイトで使おうとしたらと…
「え？何これ？使いにくい」って思いました＾＾；
なので、そう思って使ってない方も
結構いるんじゃないかな？と
勝手に思っているんですが…
あなたはどうされているのでしょうか？
無理矢理使ってます？（笑）
正直、非常に気になります＾＾
とは言え、せっかく３列フッターの
機能を付けてくれたのに
使わないのはあまりにもったいない！
ということで…
密かに「3列フッターが使いにくい」
と思っているあなたのために
もう少し３列フッターが使いやすくなる
カスタマイズ方法をご紹介したいと思います。
ただし、今回はウィジェットの都合もあり
指定コードが限られるため
- テキストウィジェット
- カスタムHTMLウィジェット
限定になりますので、予めご了承ください＾＾；
AFFINGER5の3列フッターで気になったポイントとは？
まず最初に「これって私だけ？」と
気になったポイントからお伝えしますね。
そもそも先に断っておきますが
私のメインはあくまでもSTORKなので
※現在、私のメインテーマは「THE THOR」です。
AFFINGER5をそう頻繁に触っている
というわけではありません。
なので逆に「単に設定方法わかってないだけやん」
というツッコミが来るかもしれませんが
そんなことはイチイチ気にしない（笑）
何が気になったかと言うと…
３列フッターを普通に設定すると
↓こんな風になりませんか？＾＾；
※3ヶ所ともテキストウィジェットを入れた場合
私は正直、これを見た時に
- サイトタイトルいる？
- キャッチーコピーもいる？
- 何で左だけ背景白なん？
と、まぁ、違和感しかなかったんですね…（笑）
だからと言って、私の場合は
わざわざ設定場所を探さずとも裏の手で…
ほら、この通り！（笑）
ある意味、力技ではありますが…
どうせ3列フッターを使うなら
綺麗に並んでる方が良いと思ったんですね＾＾
ということで、今回は
AFFINGER5の3列フッターを綺麗に並べ
テキストウィジェットを使いやすく
カスタマイズする方法を解説しますので
気になった方はぜひチャレンジしてみてくださいね。
とは言え、コピペだけで済んでしまうので
頑張るも何もありません＾＾
AFFINGER5の3列フッターをカスタマイズする方法
それではAFFINGER5の3列フッターを
カスタマイズする方法について
解説していきます。
まずは、3列フッターそれぞれに
テキストウィジェットを追加して
以下の状態に設定しましょう。
ここまでできたら、後はCSSを追加して
カスタマイズするだけです。
以下、CSSコードを丸々コピーして
あなたのサイトに貼り付けましょう。
コピペ先はダッシュボードメニューから
外観 → カスタマイズ → 追加CSSの部分にペーストしてください。
- 追加CSSにコピペ
#footer .headbox .textwidget {background: none;padding:5px 0 0;}#footer .footer-l .st-widgets-title{border:solid 1px #fff;border-radius:4px;text-align:left;padding-left:10px;margin-top:-5px;}.footer-r-2 .st-widgets-title{border:solid 1px #fff;border-radius:4px;padding-left:10px;}.footer-r-3 .st-widgets-title{border:solid 1px #fff;border-radius:4px;padding-left:10px;}#footer .headbox p {font-size: 12px;line-height: 27px;text-align:justify;margin-bottom: 0;}#footer p {color:#fff;}#footer a{color:#fff;}#footer .footer-l, .footer-r-2{margin-bottom: 10px;}#footer .footerlogo{display:none;}#footer .footer-description a{display:none;}
何も設定をされていない方であれば
CSSコードをコピペした時点で
以下のように表示が変わるハズです。
表示がうまく行っていれば
特に問題はありませんので、後はあなたのお好みで
CSSコードを設定しましょう。
3列フッターのCSSをカスタマイズする方法
一応、簡単にCSSコードの解説も
合わせてしておきます。
フッターのサイトタイトル・ロゴを消すCSSコード
フッターのサイトタイトル・ロゴは
以下のコードで非表示にしています。
#footer .footerlogo{display:none;}
上記CSSコードを削除すれば
サイトタイトルは表示されるようになります。
フッターのキャッチコピーを消すCSSコード
フッターのキャッチコピーは
以下のCSSコードで非表示にしています。
#footer .footer-description a{display:none;}
こちらもサイトタイトル同様
上記CSSコードを削除すればキャッチコピーは
表示されるようになります。
フッターの文字色を変えるCSSコード
フッターの文字色はダッシュボードメニューから
外観 → カスタマイズ → 基本エリア設定 → フッターエリアで
変更することができますが
残念なことに全ての文字色を一気に
変えることができないため
CSSで指定し、文字色を変えています。
フッターの文字色は
#footer p {color:#fff;}
上記コードで変更していますので
ここのカラーコードcolor:#fff;を変更すれば
文字の色を白から、あなたの好きな色に
変えることができます。
ただし、フッターの文字色を
CSSで設定していることだけは
忘れないでくださいね。
忘れた頃に通常通り、カスタマイザーで設定しようとすると
「え？何で色変わらんの？」と焦ることになります（笑）
フッターリンクの文字色を変えるCSSコード
同様にフッターに追加するリンク文字の
色を変えるコードは以下の通りです。
#footer a{color:#fff;}
こちらも上記カラーコードcolor:#fff;を変更すれば
リンクを設定した文字の色を変えることができます。
後は、あまり余計な説明をするとややこしくなるので
ここでは省かせていただきます…＾＾；
詳しく知りたい方はご自身でしっかり勉強してみてください。
3列フッターの見出しをカスタマイズする方法
とりあえず３列フッターを
綺麗に並べる方法をお伝えしましたが
それだけでは満足できない方もいるでしょう＾＾
ということで、少しだけですが
3列フッターの見出し（タイトル）の
カスタマイズ方法だけ一緒にお伝えしておきます。
やはり、サイトのイメージにあった
見出しデザインにはしたいですよね…＾＾
見出しのサンプルを見て使いたいものがあれば
CSSコードをコピペしてくださいね。
ただし、今回は…
部分的にコピペするとなると「どこを差し替えれば？」と
困惑される方もいると思ったので
全てのCSSを丸ごとコピーで変更できるようにしています。
つまり、先ほどCSSをコピペしたという方は
お気に入りの見出しが見つかったら
新たにCSSを丸ごとコピーして上書きしてください＾＾
その方が分かりやすいし、簡単ですよね？（笑）
下線のみの見出し
まずはシンプルに一番使いやすい下線のみの見出しです。
CSSコードは以下の通り。
- CSSコード
#footer .headbox .textwidget {background: none;padding:5px 0 0;}#footer .footer-l .st-widgets-title{border-bottom:solid 2px #fff;text-align:left;padding-left:0px;margin-top:-5px;}.footer-r-2 .st-widgets-title{border-bottom:solid 2px #fff;border-radius:0px;padding-left:10px;}.footer-r-2 .st-widgets-title {padding-left: 0px;}.footer-r-3 .st-widgets-title{border-bottom:solid 2px #fff;border-radius:0px;padding-left:10px;}.footer-r-3 .st-widgets-title {padding-left: 0px;}#footer .headbox p {font-size: 12px;line-height: 27px;text-align:justify;margin-bottom: 0;}#footer p {color:#fff;}#footer .footer-l, .footer-r-2{margin-bottom: 10px;}#footer .footerlogo{display:none;}#footer .footer-description a{display:none;}
上記コードを丸々コピペすれば
見出しが下線の3列フッターになります。
ちなみに…
CSSのここborder-bottom:solid 2px #fff;
2pxの数字を変えれば線の太さが
#fffのカラーコードを変えれば色が変わります。
さらに、solidをdottedにすれば
border-bottom:dotted 2px #fff;
点線になります。
※CSSを変更する場合は、左、中央、右に該当する部分を全て変更する必要があります。
上下線の見出し
続いて、上下線のある見出しです。
CSSコードはこちら。
- CSSコード
#footer .headbox .textwidget {background: none;padding:5px 0 0;}#footer .footer-l .st-widgets-title{border-bottom:solid 2px #fff;border-top:solid 2px #fff;text-align:left;padding-left:0px;margin-top:-5px;}.footer-r-2 .st-widgets-title{border-bottom:solid 2px #fff;border-top:solid 2px #fff;border-radius:0px;padding-left:10px;}.footer-r-2 .st-widgets-title {padding-left: 0px;}.footer-r-3 .st-widgets-title{border-bottom:solid 2px #fff;border-top:solid 2px #fff;border-radius:0px;padding-left:10px;}.footer-r-3 .st-widgets-title {padding-left: 0px;}#footer .headbox p {font-size: 12px;line-height: 27px;text-align:justify;margin-bottom: 0;}#footer p {color:#fff;}#footer .footer-l, .footer-r-2{margin-bottom: 15px;}#footer .footerlogo{display:none;}#footer .footer-description a{display:none;}
カスタマイズ方法は先に説明した
下線のみの見出しと同じなので
そちらを参考にしてくださいね。
上下線の見出しも色を変えたり
点線にしたりもできます。
アイコンフォントを使った見出し
AFFINGER5にはFontAwesomeという
アイコンフォントを読み込むためのコードが
すでに設定されているため
アイコンフォントを使った見出しも作成できます。
アイコンフォントを使った見出しのCSSがこちら
- CSSコード
#footer .headbox .textwidget {background: none;padding:5px 0 0;}#footer .footer-l .st-widgets-title{border-bottom:solid 2px #fff;text-align:left;padding-left:0px;margin-top:-5px;}#footer .footer-l .st-widgets-title:before{font-family: fontawesome;content: "\f00c";position: relative;font-size: 1em;color: #5ab9ff;right:3px;padding-left:5px;}.footer-r-2 .st-widgets-title{border-bottom:solid 2px #fff;padding-left:10px;}.footer-r-2 .st-widgets-title {padding-left: 0px;}.footer-r-2 .st-widgets-title:before{font-family: fontawesome;content: "\f00c";position: relative;font-size: 1em;color: #5ab9ff;right:3px;padding-left:5px;}.footer-r-3 .st-widgets-title{border-bottom:solid 2px #fff;border-radius:0px;padding-left:10px;}.footer-r-3 .st-widgets-title {padding-left: 0px;}.footer-r-3 .st-widgets-title:before{font-family: fontawesome;content: "\f00c";position: relative;font-size: 1em;color: #5ab9ff;right:3px;padding-left:5px;}#footer .headbox p {font-size: 12px;line-height: 27px;text-align:justify;margin-bottom: 0;}#footer .footer-l, .footer-r-2{margin-bottom: 10px;}#footer p {color:#fff;}#footer .footerlogo{display:none;}#footer .footer-description a{display:none;}
上記コードをコピペすれば
サンプル画像のような見出しに変わります。
ちなみに…
アイコンはここcontent: "\f00c";
\f00cのユニコードを変更すれば
アイコンを変えることができます。
また、color: #5ab9ff;の
カラーコード#5ab9ff;を変えることで
アイコンの色を変えることもできます。
ただし、アイコンや色は見出し部分のコード
3ヶ所全てを変更する必要がありますので
変更の際は気をつけてくださいね。
なお、FontAwesomeの使い方は
こちらの記事に書いていますので
詳しく知りたい方は参考にしてください。
Font Awesome（Webアイコンフォント）の使い方をやさしく解説！
念のため、ここでもう一度お伝えしておきますが
今回の3列フッターで使えるウィジェットは
- テキストウィジェット
- カスタムHTMLウィジェット
のみとなりますので、あらかじめご了承ください。
その他の設定方法については
あなたご自身で調べて試してみてください。
例え上手くいかなくてもCSSコードを
全て削除すれば、設定は元に戻りますので
気軽に設定してみましょう！
何事もトライ&エラーです＾＾
AFFINGER5の3列フッターを上手く活用しよう！
簡単にAFFINGER5の3列フッターを
カスタマイズする方法を解説してきましたが
いかがでしたでしょうか？
正直、フッターまで設定するのは
面倒と思われるかもしれませんが…
記事を最後まで読んでくれた方というのは
その記事に対してそれなりに
満足度が高いという可能性があります。
なので、もちろん記事の満足度が高ければ
- 「それ以外の記事も読んでみよう」とか
- 「どんな人が書いているのかな？」と
読者に興味を持ってもらえる可能性も高くなります。
だからこそ、フッターというのは
- サイトの回遊率を高めたり（Googleの評価も上がる）
- あなたのファン化に役立つ
大事な部分であり
あなたの記事や、あなた自身を
アピールできる格好の場所でもあります。
なので、私の場合であれば
テストサイトではありますが、このサイトと同じように
フッターの設定はちゃんとしています。
ただほとんど記事も書かずに放置しているので
これと言って何か特別なことをしているワケでは
ありませんが…（笑）
とりあえず試験的にカスタマイズしたので
AFFINGER5を利用していて
しかも、私のように「3列フッター使いにくい」と
思う方がいたらお役に立てるかな？と思い
こうしてカスタマイズ方法を記事にしてみました。
なので、もしもAFFINGER5の3列フッターに
不満を持っていたら、ぜひ一度試してみてくださいね＾＾
最後までお読みいただきありがとうございました！
