ここあです。
あなたはブログのフッターはどうしてますか？
ちゃんと作り込んでますか？
いろいろな人のブログを見て回ると
ヘッダー周りや、サイドバーには力を入れていても
フッターだけはそのままという人も結構いますよね…＾＾；
しかし、訪問者が記事を読み
一番最後にたどり着くのはフッター。
スマホの場合は特に
指で簡単に画面スクロールできるので
フッターが読者の目に触れる機会も多くなっています。
なので、フッターはあなたが思う以上に重要です。
今回はそんな重要度の高い
フッターのカスタマイズ方法をご紹介します。
私も少し面倒くさくて後回しにしていたのですが＾＾；
見ていただいても分かる通り、やはり
ちゃんと作り込みをすると全然印象が変わりました。
ファンションでもオシャレは足下からと言いように
Webサイトの足下であるフッターもしっかり作り込むことで
訪問者の印象や、ユーザビリティ、回遊率も大きく変わります。
だから、私のように「面倒くさい！」とか思わずに
フッターもしっかりとカスタマイズしましょう。
カスタマイズが上手くできれば
他のブロガーともかなり差別化できるかもしれませんよ…＾＾
そもそもフッターって何？
そもそも「フッターって何？」という人がいるかもしれないので
簡単に説明しておきますね。
フッターとは、ブログの最下部に位置する
固定エリアのこと。
ちなみに、最上部にあるサイトタイトルや
ナビゲーションメニューがある固定エリアがヘッダーです。
ヘッダーにしろ、フッターにしろ
あなたが違うページを見たとしても
変わらず表示される固定エリアを指します。
サイドバーを設置している人は
サイドバーもある意味、固定エリアに該当します。
例えば、STORK公式サイトのフッタは
↓ こんな感じ。
今回、私が作り込んだフッターは
↓ こんな感じです。
見た目の印象は全然違いますが、
どちらもフッターという意味では同じ役目を果たします。
フッターは先にもお伝えした通り
スマホやタブレットユーザーはページ送りが早いので
記事を全て読まずとも、フッターまで到達する可能性が高いです。
※もちろん記事はちゃんと読んで欲しいですが＾＾；
また、記事を最後までちゃんと読んでくれた人は
必ずフッターまで到達するし
記事の最後まで読んでくれたということは
ある程度ブログの記事に満足してくれた人と考えられます。
そんな訪問者に、さらにブログの印象を残すには
フッターの作り込みは欠かせません。
記事の一番最後に表示されるフッターで
さらにブログの印象を残すことができれば
訪問者があなたのブログのリピーターになってくれたり
ファンになってくれる可能性も高くなります。
それだけ、フッターは重要な役割があるのです。
フッターをカスタマイズする方法
それでは簡単にカスタマイズ方法を説明しますね。
フッターを作り込んでいきましょう。
ストークのフッターウィジェットは
大きく3つのパートに分かれています。
左、真ん中、右。
私のフッターだと、こんな構成になっています。
フッター左にはおすすめコンテンツ
真ん中に、ブログのテーマやSNSアカウント
右に簡単なプロフィールをまとめています。
さらに、最下部にフッターナビも導入し
できる限り訪問者のユーザビリティを上げられるよう
工夫しています。
フッターウィジェットは
ダッシュボードメニューから、外観 → ウィジェットで
ウィジェットの編集画面に移動できます。
フッター（左）のカスタマイズ方法
簡単にコードだけ紹介しておきますので
同じように作ってみたい方は参考にしてみてください。
コードの記入先は、ウィジェットメニューで
テキストの追加ボタンをクリック
テキストウィジェットが表示されたら
テキスト編集モードに切り替えて
コードを貼り付けてください。
画面スクロールすると
どのウィジェットに挿入するか指定できるので
PC：フッター（左）を選択し、ウィジェットを保存します。
ウィジェット内に貼り付けるコードは以下の通り。
今回、タイトルは未入力にして、
コードの中に［おすすめ］とタイトルを入力しています。
- HTMLコード
<p class="footer_line"><i class="fas fa-arrow-circle-right fa-fw"></i> <a href="記事のURL">記事のタイトル</a></p><p class="footer_line"><i class="fas fa-arrow-circle-right fa-fw"></i> <a href="記事のURL">記事のタイトル</a></p><p class="footer_line"><i class="fas fa-arrow-circle-right fa-fw"></i> <a href="記事のURL">記事のタイトル</a></p><p class="footer_line"><i class="fas fa-arrow-circle-right fa-fw"></i> <a href="記事のURL">記事のタイトル</a></p><p class="footer_line"><i class="fas fa-arrow-circle-right fa-fw"></i> <a href="記事のURL">記事のタイトル</a></p>
フッター（左）のウィジェットには
Web アイコンフォントを使用したアイキャッチと
おすすめ記事のテキストリンク一覧を上記のようなコードで作成しています。
記事のURLには、あなたがリンクさせたい記事のURLを
記事のタイトルには、リンクさせたい記事のタイトルを入力しましょう。
また、外観 → カスタマイズ
追加CSSの部分に
以下のCSSコードを貼り付けて、見た目のデザインを整えています。
- 追加CSSにコピー
.footer_line{ border-bottom: dotted 1.4px #e5e5e5;padding-bottom: 8px;font-size: 17px;}
コードをコピーして、一番左のWebアイコンが表示されない場合は
Font Awesome 5のコードを
ダッシュボードメニューから、外観 → テーマの編集 をクリックし
テーマヘッダー（header.php）に貼り付けてください。
Font Awesome 5の使い方は以下の記事に詳しくまとめています。
また、テーマヘッダーが見当たらないという場合は
こちらの記事を参考にしてください。
フッター（真ん中）のカスタマイズ方法
フッターの真ん中は
わたしのおすすめテーマであるSTORKのバナー画像を
簡単に作成し挿入しています。
さらに、Twitterのフォローボタンも配置して
最下部にもう1枚画像を貼り付けています。
なので、ここではツイッターのフォローボタンを
表示させるためのコードを紹介しておきますね。
こちらもHTMLとCSSコードの両方が必要です。
- HTMLコード
<a class="flw_btn tw" href="https://twitter.com/あなたのアカウント"><i class="fa fa-twitter"> </i></a> @あなたのアカウント
※あなたのTwitterアカウントの部分は＠を除いたアカウント名を入力してください。
CSSコードは以下の通り
- 追加CSSにコピー
.flw_btn {display: inline-block;position: relative;box-sizing: border-box;text-decoration: none;color: #fff;width: 50px;height: 50px;line-height: 50px;font-size: 22px;border-radius: 50%;text-align: center;vertical-align: middle;margin: 2px;padding: 0px 0px 0px 3px;transition: .4s;}.flw_btn:hover {color: #fff;opacity: 0.5;}.flw_btn.tw {
background: #22b8ff;
}
ちなみに画像サイズは
幅を380pxに設定すると左右ぴったり収まります＾＾
フッター（右）のカスタマイズ方法
フッター（右）の部分は
幅380pxで作ったオリジナル画像をGIFアニメにして挿入し
簡単なプロフィールをテキストウィジェットに追加。
※GIFアニメの代わりに画像を用意してくださいね。
最下部には詳しいプロフィールにジャンプするよう
リンクを貼ってあります。
特にややこしい設定はありませんので
画像サイズだけ上手く調整できれば
レイアウトはキレイに収まると思います。
フッターカラーを2色にする方法
ストークのフッターカラーは
デフォルトでは1色になっていますが
CSSコードを追加するだけで簡単に2色にできます。
以下のコードを追加すれば
簡単に2色にできるので、ぜひコピペして使ってみてください。
- CSSコード
#footer-top.bg, #footer-top .inner{background-color: #f05689;}
※上記コードの#f05689のカラーコードを好きな色に変更してくださいね。
私のサイトで水色に当たる部分（フッターナビのある部分）は
ダッシュボードメニューから
外観 → カスタマイズ → サイトカラー設定で設定できる色です。
上記、CSSコードで変更できる部分は
フッターナビの上にあるグレーに当たる部分になります。
フッターナビも作成しておこう！
フッターナビもちゃんと作成しておく方が
ユーザビリティも上がるので訪問者の方には親切です。
作り方はすごく簡単。
ダッシュボードメニューから、外観 → メニューをクリック。
メニュー作成画面を表示させます。
メニュー作成画面を表示させたら
新規メニューをクリックしましょう。
新規メニュー作成画面でメニュー名を入力し
メニューを保存をクリックします。
新たなメニューが作成できたら
メニューに入れる項目を選んで追加していきましょう。
あなたが追加したい項目にチェックをいれて
メニューに追加をクリック。
そうすると、以下のように追加したメニューが
メニュー構造の部分に反映されます。
フッターメニューに追加した項目が全て選択できたら
すぐ下にあるメニュー設定のフッターナビにチェックを入れて
最後にメニューを保存をクリックすれば、フッターナビの完成です。
簡単ではありますが、以上がフッターのカスタマイズ方法です。
まとめ：フッターをデザインすればファン化しやすい！
簡単にフッターの作り方を説明してきましたが
いかがでしたでしょうか？
先にもお伝えしたように、スマホユーザーの増加と共に
フッターへのアクセス頻度は年々増加しています。
なので、特にSTORKの場合は、
モバイルユーザーに特化したテーマが売りになっているので
フッターを作り込まないのは非常にもったいないんですね。
フッターをただのおまけ程度にしか考えていない方も
多いかもしれませんが
フッターはあなたの大事なファンを獲得できる
重要な要素になりますので、カスタマイズする価値はかなりあります。
このサイトのフッターを見ると分かると思いますが
フッターに全く手をつけていないサイトと比較すると
サイトの印象が違って見えるのは一目瞭然だと思います。
もしも、あなたが
「フッターもデザインしてあると印象が違う」
と思ったのであれば
あなたと同じようにそう思う人がたくさんいるし
それだけ訪問者に与えるインパクトも変わります。
フッターはサイトの最下部にあるので
なかなか手をつけようと思う人は少ないかもしれません。
しかし、少なくとも私の記事にアクセスしているあなたは
- ブログデザインをカスタマイズして他のサイトと差別化したい
- 訪問者のユーザビリティをもっと上げたい
などと考えているはずです。
なので、私としてはあなたにもちゃんと
フッターの重要性を理解してもらった上で
多少時間をかけてでもカズタマイズに挑戦して欲しいと思います。
また大事なのはデザインだけでなく
訪問者が様々なところから欲しい情報にアクセスしやすい環境
つまり、ユーザビリティを上げることで
あなたのサイトの回遊率や
訪問者に対するあなたの思いも伝わるようになるはずなので
細部まで手を抜くことなく
自分の資産ブログは作り込んでいきたいですよね。
最後までお読みいただきありがとうございました！
