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

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

ここあです。

 

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

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

 

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

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

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

 

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

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

 

スマホの場合は特に

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

 

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

固定エリアのこと。

 

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

ナビゲーションメニューがある部分がヘッダーです。

 

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

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

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

 

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

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

 

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

↓ こんな感じ。

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の部分に

dropshadow

 

 

以下の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」の使い方は以下の記事にまとめています。

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

 

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

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

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

 

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

フッターの真ん中は

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

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

 

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

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

 

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

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

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

 

HTMLコード

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

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

 

CSSコードは以下の通り

追加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色にできるので、ぜひコピペして使ってみてください。

 

追加CSSにコピー

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

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

 

私のサイトでブルーに当たる部分

(フッターナビのある部分)は

 

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

外観」→「カスタマイズ」→サイトカラー設定

設定できる色です。

 

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

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

 

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

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

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

 

フッターナビ

 

作り方はすごく簡単。

 

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

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

メニュー作成画面を表示させたら新規メニューをクリックしましょう。

メニュー作成画面

 

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

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

 メニュー作成画面

 

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

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

メニュー作成画面

 

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

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

 

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

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

メニュー作成画面

 

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

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

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

メニュー作成画面

 

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

 

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

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

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

 

先にもお伝えしたように

スマホユーザーの増加と共にフッターへのアクセス頻度は

年々増加しています。

 

なので、特に「ストーク」の場合は、

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

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

 

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

多いかもしれませんが

 

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

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

 

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

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

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

 

もしも、あなたが

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

と思ったのであれば

 

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

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

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

 

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

 

合わせて読みたい!

 

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

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


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

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


ABOUTこの記事をかいた人

ここあ

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