【Diver】フッターカスタマイズ方法まとめ【PC/スマホ両対応】

 

 

ワードプレステーマ Diver のフッターカスタマイズ方法まとめです。

 

フッターとは、ブログの最下部のエリアのことを言います。

 

すぐに読者の目につく場所ではないので

なにも設定していないという方も、めずらしくは有りません。

 

ですが、「それより下にはスクロールすることができない」

という性質から、意外にも反応率が高かったりするのが、フッターの特徴です。

 

そんなフッターを、まったく使っていないのはもったいなすぎる。

ということで、Diver のフッターカスタマイズ方法について解説していきます。

 

１．Diver にフッターを表示させる方法

Diver はデフォルトの状態では、フッターは非表示の設定になっています。

正確に言うと、表示されてはいるのですが、画像のようにすごくせまいエリアになってます。

 

まずこれを、大きく表示させる設定からはじめましょう。

フッターの設定は、管理画面 ＞ 外観 ＞ カスタマイズ ＞ レイアウト設定 からおこないます。

 

レイアウト設定画面の一番下までスクロールすると、フッター設定 という項目があります。

 

フッターの表示方法は、３種類あります。

 

今回は３カラム（縦３列）を選択しました。

これでフッターのエリアが大きくなり、縦に長くなったのがわかりますね。

 

２．フッターの表示をカスタマイズする方法

ここからは、表示させたフッターをカスタマイズしていきます。

 

カラム表示については上で解説したので

次にあなたのブログにあったフッターの色を設定しましょう。

 

2-1 色の変更

フッターの色は、外観 ＞ カスタマイズ ＞ カラー設定 の

真ん中より、やや下あたりに設定項目があります。

 

フッターカラーの設定項目は、8種類あります。

ビッグフッター背景	ビッグフッターの背景色を設定できます
ビッグフッターテキスト	ビッグフッターの文字色を設定できます
ビッグフッターリンク	ビッグフッターのリンクの文字色を設定できます
ビッグフッターリンク(マウスオン時)	ビッグフッターのリンクにマウスのポインターをあわせた時の文字色を設定できます
フッター背景	フッターの背景色を設定できます
フッターテキスト	フッターの文字色を設定できます
フッターリンク	フッターのリンクの文字色を設定できます
フッターリンク(マウスオン時)	フッターのリンクにマウスのポインターをあわせた時の文字色を設定できます

 

自分のブログの色を知りたい時は、以下の記事で紹介しているツールが便利です。

参考リンクブログの配色どうしよう？迷った時に使えるサイトとchromeプラグインがこれ

 

2-2 ウィジェットを設置

次に、フッターに表示させるコンテンツを、ウィジェットで設置しましょう。

 

外観 ＞ ウィジェット から、ウィジェット編集画面を開きましょう。

ビッグフッターに関するウィジェットは、４つあります。

 

ここに表示させたいコンテンツを、ドラッグ＆ドロップしていきます。

参考リンクDiver のウィジェット機能の使い方を図解つきで徹底解説

 

今回は、このように設定しました。

 

以下が設定内容です。

ビッグフッター(左)	ブログのカテゴリーを表示
ビッグフッター(中左)	Twitter のブログパーツを表示
ビッグフッター(中右)	※３カラムなので表示なし
ビッグフッター(右)	人気ブログランキングのブログパーツを表示

 

この設定のフッターを実際に表示したものが、以下の画像です。

 

2-3 クレジット表記

フッターのクレジットとは、以下の部分に表示されているテキストのことです。

 

わー研。の場合では、「わー研。 All Rights Reserved.」と表記されていますね。

 

「All Rights Reserved.」とは、「著作権を所有しています」という意味で

「このブログは、わー研。の著作物です」という意味の表記になります。

 

Diver では、インストール時に「ブログ名」+「All Rights Reserved.」で

自動的にクレジットを作成してくれるので、自分で設定する必要はありません。

 

表記を変更したいという場合は、

管理画面 ＞ Diverオプション ＞ 基本設定 ＞ フッタークレジット から変更できます。

 

2-4 フッターメニュー

フッターメニューでは、以下の部分にメニューを設定できます。

 

外観 ＞ メニュー から、任意のものを表示することができます。

 

Diver のメニュー設定方法については、以下の記事で詳しく解説しています。

参考リンクDiver のメニュー設定方法。どこに何を表示できるかもあわせて解説します

 

３．フッター CTA を表示する方法（PCのみ）

ブログの画面を下にスクロールした時に、下からふわっと出てくる フッターCTA を表示することもできます。

 

フッターCTAは、管理画面 ＞ Diverオプション ＞ フッターCTA から設定できます。

 

フッターCTA の設定方法は、以下のページで解説しています。

参考リンクDiver のフッターCTA の設定方法

 

４．フッターメニューを表示する方法（スマホのみ）

スマホでブログを表示した時に、画面下部にフッターメニューを表示させることができます。

 

フッターメニューは、管理画面 ＞ Diverオプション ＞ フッターメニュー から設定できます。

 

フッターメニュー設定画面で、左側の項目一覧から設定したいものを選択すると、右側に追加されます。

 

表示させるメニューが決まったら、変更を保存 をクリックしましょう。

 

５．トップスクロールボタンの設定方法

トップスクロールボタンとは、画面を下にスクロールした時に

右下に出てくる「画面上に戻るボタン」のことです。（PC・スマホ両方に表示されます）

 

トップスクロールボタンの設定項目は、外観 ＞ カスタマイズ ＞ メイン設定 の中にあります。

 

メイン設定を下にスクロールするとある、ページ上部にスクロールさせるボタン(右下の)を表示 のチェックをオンにすると表示されるようになります。

 

トップスクロールボタンのデザイン設定項目は

外観 ＞ カスタマイズ ＞ デザイン設定① の下部にあります。

 

さいごに

今回は、Diver のフッターのカスタマイズ方法について解説しました。

 

ブログの最下部のコンテンツが充実していると

利便性がよくなるのはもちろん、目立たせたいコンテンツなどを

自分で決める事ができるので、必ず設定しておくようにしましょう。

 

さいごに、この記事のまとめをしておきます。

 

 

注目の記事現役アフィリエイターが Diver をおすすめする７つの理由【もう他のテーマはいりません】

注目の記事Diverのヘッダーカスタマイズ方法まとめ【PC/スマホ両対応】