見た目の印象は全然違いますが、どちらもフッターという意味では同じ役目を果たします。フッターは先にもお伝えした通りスマホやタブレットユーザーはページ送りが早いので記事を全て読まずとも、フッターまで到達する可能性が高いです。※もちろん記事はちゃんと読んで欲しいですが^^;また、記事を最後までちゃんと読んでくれた人は必ずフッターまで到達するし記事の最後まで読んでくれたということはある程度ブログの記事に満足してくれた人と考えられます。そんな訪問者に、さらにブログの印象を残すにはフッターの作り込みは欠かせません。記事の一番最後に表示されるフッターでさらにブログの印象を残すことができれば訪問者があなたのブログのリピーターになってくれたりファンになってくれる可能性も高くなります。それだけ、フッターは重要な役割があるのです。フッターをカスタマイズする方法それでは簡単にカスタマイズ方法を説明しますね。フッターを作り込んでいきましょう。ストークのフッターウィジェットは大きく3つのパートに分かれています。私のフッターだと、こんな構成になっています。フッター左にはおすすめコンテンツ真ん中に、ブログのテーマやSNSアカウント右に簡単なプロフィールをまとめています。最下部にフッターナビも導入しできる限り訪問者のユーザビリティを上げられるよう工夫しています。ウィジェットでウィジェットの編集画面に移動できます。簡単にコードだけ紹介しておきますので同じように作ってみたい方は参考にしてみてください。コードの記入先は、ウィジェットメニューでテキストの追加ボタンをクリックテキストウィジェットが表示されたらテキスト編集モードに切り替えてコードを貼り付けてください。画面スクロールするとどのウィジェットに挿入するか指定できるのでPC:フッター(左)を選択し、ウィジェットを保存します。ウィジェット内に貼り付けるコードは以下の通り。今回、タイトルは未入力にして、コードの中に[おすすめ]とタイトルを入力しています。アイコンフォントを使用したアイキャッチとおすすめ記事のテキストリンク一覧を上記のようなコードで作成しています。記事のURLには、あなたがリンクさせたい記事のURLを記事のタイトルには、リンクさせたい記事のタイトルを入力しましょう。カスタマイズ追加CSSの部分に以下のCSSコードを貼り付けて、見た目のデザインを整えています。クリックしテーマヘッダー(header.php)に貼り付けてください。5の使い方は以下の記事に詳しくまとめています。5」の使い方をやさしく解説また、テーマヘッダーが見当たらないという場合はこちらの記事を参考にしてください。「親テーマ」のファイルを「子テーマ」で編集する方法フッター(真ん中)のカスタマイズ方法フッターの真ん中はわたしのおすすめテーマであるSTORKのバナー画像を簡単に作成し挿入しています。Twitterのフォローボタンも配置して最下部にもう1枚画像を貼り付けています。ここではツイッターのフォローボタンを表示させるためのコードを紹介しておきますね。こちらもHTMLとCSSコードの両方が必要です。@あなたのアカウント※あなたのTwitterアカウントの部分は@を除いたアカウント名を入力してください。#22b8ff;}ちなみに画像サイズは幅を380pxに設定すると左右ぴったり収まります^^フッター(右)のカスタマイズ方法フッター(右)の部分は幅380pxで作ったオリジナル画像をGIFアニメにして挿入し簡単なプロフィールをテキストウィジェットに追加。※GIFアニメの代わりに画像を用意してくださいね。最下部には詳しいプロフィールにジャンプするようリンクを貼ってあります。ややこしい設定はありませんので画像サイズだけ上手く調整できればレイアウトはキレイに収まると思います。フッターカラーを2色にする方法ストークのフッターカラーはデフォルトでは1色になっていますがCSSコードを追加するだけで簡単に2色にできます。以下のコードを追加すれば簡単に2色にできるので、ぜひコピペして使ってみてください。#f05689;}※上記コードの#f05689のカラーコードを好きな色に変更してくださいね。サイトカラー設定で設定できる色です。上記、CSSコードで変更できる部分はフッターナビの上にあるグレーに当たる部分になります。フッターナビも作成しておこう!フッターナビもちゃんと作成しておく方がユーザビリティも上がるので訪問者の方には親切です。