AFFINGER5カスタマイズ!3列フッターを美しく整える方法!

AFFINGER5カスタマイズ!3列フッターを整える方法!

 

ここあです。

 

AFFINGER5もかなり前にSTORK同様

3列フッターが使えるようになりましたよね。

 

私は、アップデートされる前から

3列フッターにカスタマイズしていたので

 

正直、3列フッターが使えるようになっても

特に気にもしていなかったのですが…

 

いざ、アップデートされた3列フッターを

別のサイトで使おうとしたらと…

「え?何これ?使いにくい」って思いました^^;

 

なので、そう思って使ってない方も

結構いるんじゃないかな?と

勝手に思っているんですが…

 

あなたはどうされているのでしょうか?

無理矢理使ってます?(笑)

正直、非常に気になります^^

 

とは言え、せっかく3列フッターの

機能を付けてくれたのに

使わないのはあまりにもったいない!

 

ということで…

密かに「3列フッターが使いにくい」

と思っているあなたのために

 

もう少し3列フッターが使いやすくなる

カスタマイズ方法をご紹介したいと思います。

 

ただし、今回はウィジェットの都合もあり

指定コードが限られるため

 

  • テキストウィジェット
  • カスタムHTMLウィジェット

限定になりますので、予めご了承ください^^;

 

AFFINGER5の3列フッターで気になったポイントとは?

まず最初に「これって私だけ?」と

気になったポイントからお伝えしますね。

 

そもそも先に断っておきますが

私のメインはあくまでもSTORKなので

 

AFFINGER5をそう頻繁に触っている

というわけではありません。

 

なので逆に「単に設定方法わかってないだけやん」

というツッコミが来るかもしれませんが

そんなことはイチイチ気にしない(笑)

 

何が気になったかと言うと…

3列フッターを普通に設定すると

 

↓こんな風になりませんか?^^;

AFFINGER5フッター

※3ヶ所ともテキストウィジェットを入れた場合

 

私は正直、これを見た時に

  • サイトタイトルいる?
  • キャッチーコピーもいる?
  • 何で左だけ背景白なん?

と、まぁ、違和感しかなかったんですね…(笑)

 

だからと言って、私の場合は

わざわざ設定場所を探さずとも裏の手で…

 

ほら、この通り!(笑)

AFFINGER5フッター

 

ある意味、力技ではありますが…

どうせ3列フッターを使うなら

綺麗に並んでる方が良いと思ったんですね^^

 

ということで、今回は

AFFINGER5の3列フッターを綺麗に並べ

 

テキストウィジェットを使いやすく

カスタマイズする方法を解説しますので

気になった方はぜひチャレンジしてみてくださいね。

 

とは言え、コピペだけで済んでしまうので

頑張るも何もありません^^

 

AFFINGER5の3列フッターをカスタマイズする方法

それではAFFINGER5の3列フッターを

カスタマイズする方法について

解説していきます。

 

まずは、3列フッターそれぞれに

テキストウィジェットを追加して

以下の状態に設定しましょう。

AFFINGER5フッター

 

ここまでできたら、後は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;
}

/* フッター左BOX設定 */
#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コードをコピペした時点で

以下のように表示が変わるハズです。

AFFINGER5フッター

 

表示がうまく行っていれば

特に問題はありませんので、後はあなたのお好みで

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列フッターを

綺麗に並べる方法をお伝えしましたが

それだけでは満足できない方もいるでしょう^^

 

ということで、少しだけですが

3列フッターの見出し(タイトル)

カスタマイズ方法だけ一緒にお伝えしておきます。

 

やはり、サイトのイメージにあった

見出しデザインにはしたいですよね…^^

 

見出しのサンプルを見て使いたいものがあれば

CSSコードをコピペしてくださいね。

 

ただし、今回は…

 

部分的にコピペするとなると「どこを差し替えれば?」と

困惑される方もいると思ったので

全てのCSSを丸ごとコピーで変更できるようにしています。

 

つまり、先ほどCSSをコピペしたという方は

お気に入りの見出しが見つかったら

新たにCSSを丸ごとコピーして上書きしてください^^

 

その方が分かりやすいし、簡単ですよね?(笑)

 

下線のみの見出し

AFFINGER5フッター

 

まずはシンプルに一番使いやすい下線のみの見出しです。

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;
}

/* フッター左BOX設定 */
#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;

点線になります。

AFFINGER5フッター

※CSSを変更する場合は、左、中央、右に該当する部分を全て変更する必要があります。

 

上下線の見出し

AFFINGER5フッター

 

続いて、上下線のある見出しです。

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;
}

/* フッター左BOX設定 */
#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フッター

 

AFFINGER5にはFontAwesomeという

アイコンフォントを読み込むためのコードが

すでに設定されているため

 

アイコンフォントを使った見出しも作成できます。

アイコンフォントを使った見出しの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;
}

/* フッター左BOX設定 */
#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列フッターを上手く活用しよう!

 

簡単にAFFINGER5の3列フッターを

カスタマイズする方法を解説してきましたが

いかがでしたでしょうか?

 

正直、フッターまで設定するのは

面倒と思われるかもしれませんが…

 

記事を最後まで読んでくれた方というのは

その記事に対してそれなりに

満足度が高いという可能性があります。

 

なので、もちろん記事の満足度が高ければ

  • 「それ以外の記事も読んでみよう」とか
  • 「どんな人が書いているのかな?」と

読者に興味を持ってもらえる可能性も高くなります。

 

だからこそ、フッターというのは

  • サイトの回遊率を高めたり(Googleの評価も上がる)
  • あなたのファン化に役立つ

大事な部分であり

 

あなたの記事や、あなた自身を

アピールできる格好の場所でもあります。

 

なので、私の場合であれば

テストサイトではありますが、このサイトと同じように

フッターの設定はちゃんとしています。

AFFINGER5フッター

 

ただほとんど記事も書かずに放置しているので

これと言って何か特別なことをしているワケでは

ありませんが…(笑)

 

とりあえず試験的にカスタマイズしたので

AFFINGER5を利用していて

 

しかも、私のように「3列フッター使いにくい」と

思う方がいたらお役に立てるかな?と思い

こうしてカスタマイズ方法を記事にしてみました。

 

なので、もしもAFFINGER5の3列フッターに

不満を持っていたら、ぜひ一度試してみてくださいね^^

 

最後までお読みいただきありがとうございました!

 

AFFINGER5のカスタマイズに興味のある方は

こちらの記事も参考にどうぞ…^^

 

AFFINGER5カスタマイズ!

 

AFFINGER5カスタマイズ!3列フッターを整える方法!

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルを生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさや楽しさを一人でも多くの方に伝えたくこのブログを立ち上げました。