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

 

山本
わかばちゃんのブログのフッターって、なにか表示させてる?

わかば
フッターって、たしかブログの最下部のエリアのことですよね?
うーん、、あまり気にしたことがなかったかもです

山本
あーそれはもったいないね
じゃあ今回は、Diver のフッターのカスタマイズ方法について解説するよ

 

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

 

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

 

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

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

 

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

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

 

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

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

 

1.Diver にフッターを表示させる方法

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

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

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

 

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

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

 

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

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

 

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

  • 非表示
  • 3カラム
  • 4カラム

ここで、3カラムか、4カラムを選択することで

フッターが、ビッグフッターにランクアップします。

 

今回は3カラム(縦3列)を選択しました。

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

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

山本
このエリアに、あなたの好きなコンテンツを設置することができます

 

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

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

 

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

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

 

2-1 色の変更

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

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

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

 

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

山本
ここでは、「ビッグフッター」の設定をするので
上の4つの項目がそれに該当します
ビッグフッター背景 ビッグフッターの背景色を設定できます
ビッグフッターテキスト ビッグフッターの文字色を設定できます
ビッグフッターリンク ビッグフッターのリンクの文字色を設定できます
ビッグフッターリンク(マウスオン時) ビッグフッターのリンクにマウスのポインターをあわせた時の文字色を設定できます
フッター背景 フッターの背景色を設定できます
フッターテキスト フッターの文字色を設定できます
フッターリンク フッターのリンクの文字色を設定できます
フッターリンク(マウスオン時) フッターのリンクにマウスのポインターをあわせた時の文字色を設定できます

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

 

以下が設定内容です。

ビッグフッター(左) ブログのカテゴリーを表示
ビッグフッター(中左) Twitter のブログパーツを表示
ビッグフッター(中右) ※3カラムなので表示なし
ビッグフッター(右) 人気ブログランキングのブログパーツを表示
3カラム表示にしている場合、フッターの中央に表示させたいコンテンツは、「ビッグフッター(中左)」に設置しましょう。ビッグフッター(中右)だと表示されません。

 

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

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

わかば
うわっ、一気に豪華になりましたね!

山本
フッターがあるだけで、ブログ全体の雰囲気も変わるよね!

 

2-3 クレジット表記

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

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

 

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

 

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

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

 

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

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

 

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

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

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

 

2-4 フッターメニュー

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

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

 

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

 

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

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

 

3.フッター CTA を表示する方法(PCのみ)

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

Diver の CTAとは? 設定項目が2つある!?

 

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

 

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

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

 

4.フッターメニューを表示する方法(スマホのみ)

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

フッターボタンを表示する方法(スマホのみ)

 

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

フッターボタンを表示する方法(スマホのみ)

 

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

フッターボタンを表示する方法(スマホのみ)

 

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

フッターボタンを表示する方法(スマホのみ)

 

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

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

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

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

 

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

 

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

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

 

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

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

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

 

さいごに

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

 

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

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

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

 

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

  • フッターは意外と反応の高いエリア
  • Diver にフッターを表示させる方法
  • フッターの表示をカスタマイズする方法
  • フッターCTA を表示する方法(PCのみ)
  • フッターメニューを表示する方法(スマホのみ)
  • トップスクロールボタンの設定方法

 

わかば
早速、私のブログのフッターもカスタムしてみようと思います!

山本
読者の反応を見ながら、色々と試してみるといいよ!

 

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

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

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事