Diverでスマホに表示されるヘッダーメニューとフッターメニューの設定

前回は「Diver」のヘッダーメニューの違いや設定方法、そして色のカスタマイズを行いましたが、今回はスマホ表示のヘッダーメニュー、およびフッターメニューを設定していきます。

ディベロッパーツールでは確認できなかったので、実際のスマホ画面表示をキャプチャしてみました。

ヘッダーとフッターにわけて設定方法を説明していきます。

色(テキストと背景色)の設定もあわせてカスタマイズしていきましょう。

Diverスマホ表示のヘッダーメニュー設定

私が利用しているワードプレス無料テーマでは、スマホ表示はシンプルなので、記事を読んでいる途中でメニューが表示されることはありません。

でもユーザーが、「ちょっとこの記事ではなかったかも」とか、「他の記事も読んでみたい」と思った際に、ページを下までスクロールしないとサイドバーに設置したカテゴリーやタグ、検索窓が活用できないのはもったいないですよね。

ページの離脱にも繋がります。

その点「Diver」なら、スマホ表示の際にもシンプルなヘッダーメニューで他の記事の検索を促すことができてしまいます。

まず、スマホで見た当ブログのトップページがこちら。

スマホ表示メニュー

ブログタイトルの下に、横並びで表示されているのが横スクロールメニューです。

更に固定ヘッダーを設置すると、ページをスクロールした際にもヘッダーが表示されます。

スマホの固定ヘッダー

ブログタイトルの両サイドにあるヘッダーメニューは二つ。左にドロワーメニュー(俗にいうハンバーガーメニュー)、右にポップアップメニュー(検索マーク)があります。

(最初は名前が多くて混乱しました…)

固定ヘッダーの設定はこちら↓で紹介しています。

スマホで表示されるドロワーメニューとポップアップメニューを設定する

Diverでスマホ表示されるドロワーメニューは、ウィジェットエリアから設定していきます。

「外観」⇒「ウィジェット」へ進みます。

ウィジェットの設定

サイドバーやフッターの設定にも使用する便利なウィジェットエリアです。

左側の「利用できるウィジェット」を右側に表示されている項目にドラッグ&ドロップするだけ。

ウィジェットエリアの使い方

スマホのヘッダーメニューに表示したいウィジェットを「ドロワーメニュー」「検索ボックス」に入れていきましょう。

ドロワーメニューの設定
例として今回、
ドロワーメニューにはカテゴリーを設置。

子カテゴリーまで表示したい時には、「階層を表示」にチェックを入れます。

diverのデモサイトでは広告エリアも入れていますね。

続いて、ポップアップメニューの設定。

検索ボックスの設定
例としてこちらには、
検索とタグクラウドをいれてみました。

タイトルや分類の設定もできます。

実際のスマホ画面(左のドロワーメニュー、右のポップアップメニュー)を見てみます。

スマホのドロワーメニューの表示
スマホのポップアップメニュー

現時点ではまだコンテンツが少ないので、ものさみしい感じが…

ドロワーメニューと横スクロールメニューの色をカスタマイズ

上記画面のように、スマホ表示のヘッダーメニューでは、タイトルに背景色(薄いグレー)がついています。

このタイトル部分と、ヘッダー下の横スクロール画面のテキスト色・背景色はカスタマイザーで簡単に変更することができちゃいます。

「外観」⇒「カスタマイズ」⇒「基本カラー」へ進みます。

↓ドロワーメニューとポップアップメニューは統一。
ドロワーメニューの色を変える
↓横スクロールメニューは単体で変更できます。
横スクロールメニューの色変更

変更後のスマホ画面がこちら↓

スマホの横スクロールメニュー
スマホのドロワーメニュー
スマホのポップアップメニュー

横スクロールに色を入れてしまうと、他のカラーとケンカしてしまいやすいので、配色が難しいところ。

また、横スクロールメニューを設置するなら、パンくずリストが邪魔に見える気もします。

ドロワーメニューとポップアップメニューは、逆に色がついていたほうが目を惹きますね。

Diverスマホ表示のフッターメニュー設定とカスタマイズ

最近は、スマホで画面をスクロールした際に、フッターにメニューアイコンが表示されるテーマも増えてきました。

もちろんDiverでも簡単に設置可能です。

「Diverオプション」⇒「フッターメニュー」に進みます。

Diverオプションでフッターを設置する

スマートフォンで画面をスクロールすると固定されるフッターメニューの設定ができます。

スマホフッターメニューの設定

直感的に操作がわかりやすいところもさすが。

左側の項目一覧から、好みの項目を右側にドラッグ&ドロップするだけです。

スマホでの表示は以下のようになります↓

スマホフッターメニュー
(スクロールした際に固定表示)

スマホで見た時のトップページボタンってどうも邪魔に感じていたんですが、フッターメニューに埋め込むとすっきりします。

シェアボタンはポップアップ表示。

スマホフッターメニューのシェアボタン
(ポップアップじゃなくてドロワー表示だといいんだけどなぁ…)

でも、表示が気になる場合は「カスタムリンク」を使うことで、ピックアップ記事のリンクを埋め込んだり、好きなアイコンに変更することもできちゃいます。

フッターメニューのカスタマイズ

DiverではLP(ランディングページ)の作成もできるので、売りたい商品のリンクをもってくることもできます。

このあたりはやっぱりアフィリエイターにおすすめのテーマと言われるのがよくわかる!!!

スマホフッターメニューの色をカスタマイズ

もちろん、フッターメニューもカラー変更が可能。

「外観」⇒「カスタマイズ」⇒「基本カラー」へすすみます。

スマホフッターのカラーカスタマイズ
「フッター固定メニュー背景」と「フッター固定メニューテキスト」でカラーをカスタマイズ。

ここはデフォルトのままか、背景色を淡色の透過80くらいで設定するのがおすすめ。

あまりやりすぎると、記事とケンカする、目立たない、邪魔、という残念なメニューになってしまいます。

試しにこのブログのメインカラーと合わせてみると、フッターメニューが邪魔に感じました。

かといってテキストのみメインカラー(背景透過70)に合わせると、記事のテキスト色とケンカしてる感じがします。

目立たないフッター
目にチカチカする感じも好きじゃないし、やっぱりデフォルトかなぁ…。

 

記事の背景色や文字色、ブログ全体のカラーとの配色を考慮する必要がありそうです。

Diverスマホメニューのまとめ

Diverのスマホ表示メニューはヘッダーメニュー(3種類)と固定フッターメニュー。

ヘッダーメニュー

  • ドロワーメニュー
  • ポップアップメニュー
  • 横スクロールメニュー

フッターメニュー

  • 固定フッターメニュー

実際にスマホでどのように表示されるのかチェックしながら設定してみてくださいね!

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事