WPテーマ「STORK」カスタマイズ!フッターもデザインしよう!

WPテーマ「STORK」カスタマイズ!フッターもデザインしよう!

 

ここあです。

 

あなたはブログのフッターはどうしてますか?

ちゃんと作り込んでますか?

 

いろいろな人のブログを見て回ると

ヘッダー周りや、サイドバーには力を入れていても

フッターだけはそのままという人も結構いますよね…^^;

 

しかし、訪問者が記事を読み

一番最後にたどり着くのはフッター。

 

スマホの場合は特に

指で簡単に画面スクロールできるので

フッターが読者の目に触れる機会も多くなっています。

 

なので、フッターはあなたが思う以上に重要です。

今回はそんな重要度の高い

フッターのカスタマイズ方法をご紹介します。

 

私も少し面倒くさくて後回しにしていたのですが^^;

見ていただいても分かる通り、やはり

ちゃんと作り込みをすると全然印象が変わりました。

 

ファンションでもオシャレは足下からと言いように

Webサイトの足下であるフッターもしっかり作り込むことで

訪問者の印象や、ユーザビリティ、回遊率も大きく変わります。

 

だから、私のように「面倒くさい!」とか思わずに

フッターもしっかりとカスタマイズしましょう。

 

カスタマイズが上手くできれば

他のブロガーともかなり差別化できるかもしれませんよ…^^

 

そもそもフッターって何?

そもそも「フッターって何?」という人がいるかもしれないので

簡単に説明しておきますね。

 

フッターとは、ブログの最下部に位置する

固定エリアのこと。

 

ちなみに、最上部にあるサイトタイトルや

ナビゲーションメニューがある固定エリアがヘッダーです。

 

ヘッダーにしろ、フッターにしろ

あなたが違うページを見たとしても

変わらず表示される固定エリアを指します。

 

サイドバーを設置している人は

サイドバーもある意味、固定エリアに該当します。

 

例えば、STORK公式サイトのフッタは

↓ こんな感じ。

STORK公式サイトフッター

 

 

今回、私が作り込んだフッターは

↓ こんな感じです。

フッターイメージ

 

 

見た目の印象は全然違いますが、

どちらもフッターという意味では同じ役目を果たします。

 

フッターは先にもお伝えした通り

スマホやタブレットユーザーはページ送りが早いので

記事を全て読まずとも、フッターまで到達する可能性が高いです。
※もちろん記事はちゃんと読んで欲しいですが^^;

 

また、記事を最後までちゃんと読んでくれた人は

必ずフッターまで到達するし

 

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

ある程度ブログの記事に満足してくれた人と考えられます。

 

そんな訪問者に、さらにブログの印象を残すには

フッターの作り込みは欠かせません。

 

記事の一番最後に表示されるフッターで

さらにブログの印象を残すことができれば

 

訪問者があなたのブログのリピーターになってくれたり

ファンになってくれる可能性も高くなります。

それだけ、フッターは重要な役割があるのです。

 

フッターをカスタマイズする方法

それでは簡単にカスタマイズ方法を説明しますね。

フッターを作り込んでいきましょう。

 

ストークのフッターウィジェットは

大きく3つのパートに分かれています。

 

STORKフッターウィジェット

 

 

左、真ん中、右。

私のフッターだと、こんな構成になっています。

フッターウィジェット構成

 

 

フッター左にはおすすめコンテンツ

真ん中に、ブログのテーマやSNSアカウント

右に簡単なプロフィールをまとめています。

 

さらに、最下部にフッターナビも導入し

できる限り訪問者のユーザビリティを上げられるよう

工夫しています。

 

フッターウィジェットは

ダッシュボードメニューから、外観 → ウィジェットで

ウィジェットの編集画面に移動できます。

ダッシュボードメニュー

 

 

フッター(左)のカスタマイズ方法

簡単にコードだけ紹介しておきますので

同じように作ってみたい方は参考にしてみてください。

 

コードの記入先は、ウィジェットメニューで

テキストの追加ボタンをクリック

ウィジェットメニュー

 

 

テキストウィジェットが表示されたら

テキスト編集モードに切り替えて

コードを貼り付けてください。

 

画面スクロールすると

どのウィジェットに挿入するか指定できるので

PC:フッター(左)を選択し、ウィジェットを保存します。

ウィジェット編集画面

 

 

ウィジェット内に貼り付けるコードは以下の通り。

今回、タイトルは未入力にして、

コードの中に[おすすめ]とタイトルを入力しています。

 

おすすめ]
<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の部分に

dropshadow

 

 

以下のCSSコードを貼り付けて、見た目のデザインを整えています。

/*フッター下線*/
.footer_line{ border-bottom: dotted 1.4px #e5e5e5;
padding-bottom: 8px;
font-size: 17px;}

 

コードをコピーして、一番左のWebアイコンが表示されない場合は

Font Awesome 5のコードを

ダッシュボードメニューから、外観 → テーマの編集 をクリックし

ダッシュボードメニュー

 

 

テーマヘッダー(header.php)に貼り付けてください。

テーマヘッダー

 

 

Font Awesome 5の使い方は以下の記事に詳しくまとめています。

「Font Awesome 5」の使い方をやさしく解説

 

また、テーマヘッダーが見当たらないという場合は

こちらの記事を参考にしてください。

「親テーマ」のファイルを「子テーマ」で編集する方法

 

フッター(真ん中)のカスタマイズ方法

フッターの真ん中は

わたしのおすすめテーマであるSTORKのバナー画像を

簡単に作成し挿入しています。

 

さらに、Twitterのフォローボタンも配置して

最下部にもう1枚画像を貼り付けています。

 

なので、ここではツイッターのフォローボタンを

表示させるためのコードを紹介しておきますね。

こちらもHTMLとCSSコードの両方が必要です。

 

<a class="flw_btn tw" href="https://twitter.com/あなたのアカウント"><i class="fa fa-twitter">&nbsp;</i></a> @cocoa_affiri

※あなたのTwitterアカウントの部分は@を除いたアカウント名を入力してください。

 

CSSコードは以下の通り

/*Twitterボタン フッター*/
.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色にできるので、ぜひコピペして使ってみてください。

#footer-top.bg, #footer-top .inner{
background-color: #f05689;
}

※上記コードの#f05689のカラーコードを好きな色に変更してくださいね。

 

私のサイトで水色に当たる部分(フッターナビのある部分)

ダッシュボードメニューから

外観 → カスタマイズ → サイトカラー設定で設定できる色です。

フッター背景色設定

 

 

上記、CSSコードで変更できる部分は

フッターナビの上にあるピンクに当たる部分になります。

 

フッターナビも作成しておこう!

フッターナビもちゃんと作成しておく方が

ユーザビリティも上がるので訪問者の方には親切です。

 

フッターナビ

 

作り方はすごく簡単。

ダッシュボードメニューから、外観 → メニューをクリック。

メニュー作成画面を表示させます。

 

メニュー作成画面を表示させたら

新規メニューをクリックしましょう。

メニュー作成画面

 

 

新規メニュー作成画面でメニュー名を入力し

メニューを保存をクリックします。

 メニュー作成画面

 

 

新たなメニューが作成できたら

メニューに入れる項目を選んで追加していきましょう。

メニュー作成画面

 

 

あなたが追加したい項目にチェックをいれて

メニューに追加をクリック。

 

そうすると、以下のように追加したメニューが

メニュー構造の部分に反映されます。

メニュー作成画面

 

 

フッターメニューに追加した項目が全て選択できたら

すぐ下にあるメニュー設定のフッターナビにチェックを入れて

最後にメニューを保存をクリックすれば、フッターナビの完成です。

メニュー作成画面

 

簡単ではありますが、以上がフッターのカスタマイズ方法です。

 

まとめ:フッターをデザインすればファン化しやすい!

フッターをデザインすればファン化しやすい!

 

簡単にフッターの作り方を説明してきましたが

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

 

先にもお伝えしたように、スマホユーザーの増加と共に

フッターへのアクセス頻度は年々増加しています。

 

なので、特にSTORKの場合は、

モバイルユーザーに特化したテーマが売りになっているので

フッターを作り込まないのは非常にもったいないんですね。

 

フッターをただのおまけ程度にしか考えていない方も

多いかもしれませんが

 

フッターはあなたの大事なファンを獲得できる

重要な要素になりますので、カスタマイズする価値はかなりあります。

 

このサイトのフッターを見ると分かると思いますが

フッターに全く手をつけていないサイトと比較すると

サイトの印象が違って見えるのは一目瞭然だと思います。

 

もしも、あなたが

「フッターもデザインしてあると印象が違う」

と思ったのであれば

 

あなたと同じようにそう思う人がたくさんいるし

それだけ訪問者に与えるインパクトも変わります。

 

フッターはサイトの最下部にあるので

なかなか手をつけようと思う人は少ないかもしれません。

 

しかし、少なくとも私の記事にアクセスしているあなたは

  • ブログデザインをカスタマイズして他のサイトと差別化したい
  • 訪問者のユーザビリティをもっと上げたい

などと考えているはずです。

 

なので、私としてはあなたにもちゃんと

フッターの重要性を理解してもらった上で

多少時間をかけてでもカズタマイズに挑戦して欲しいと思います。

 

また大事なのはデザインだけでなく

訪問者が様々なところから欲しい情報にアクセスしやすい環境

つまり、ユーザビリティを上げることで

 

あなたのサイトの回遊率や

訪問者に対するあなたの思いも伝わるようになるはずなので

 

細部まで手を抜くことなく

自分の資産ブログは作り込んでいきたいですよね。

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

 

WPテーマ「STORK」カスタマイズ!フッターもデザインしよう!

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


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

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


ABOUTこの記事をかいた人

ここあ

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