今までWordPress無料テーマを使っていた私は思いました。
「Diverの機能が豊富で混乱する！」
良い事なんだけど。
でも単細胞に近い私の脳が、沢山あるメニュー機能を処理しきれずにいるので、
まとめてみました。
Contents
Diverのヘッダーメニューの設定とカスタマイズ
サイト内をわかりやすく見て頂くためにも必要なメニュー表示。
無料テーマのブログでは、ヘッダーとフッターにサイトマップや運営者情報、プライバシーポリシーなどを設定してるくらいですが、WordPress有料テーマ「Diver」なら、ヘッダーだけでも細かい設定ができるようになっています。
Diverでヘッダーに配置できるメニュー
- ヘッダーメニュー（並列or独立）
- ミニヘッダー
- 固定ヘッダー
更に、フッターメニューもありますね。
早速設定方法とカスタマイズ方法を確認していきましょう！
ヘッダーメニューの並列と独立の違いや設定方法
Diverの中でメインメニューともいえる位置がヘッダーメニュー（ナビゲーション）。
サイトタイトルと同じ並び（並列）か、一段下に設置（独立）することができます。
これがヘッダーメニュー↓
まずは設定から。
「外観」⇒「カスタマイズ」⇒「メイン設定」より、
ロゴと並列を選ぶと、サイトタイトルと同じ並びにメニューが表示されます。
「ナビゲーションドロップダウンエフェクト」のプルダウンキーから階層メニューの表示方法を選ぶことができます。
- フェード - ふわっと表示
- 上から - 上からふわっと
- スライド - 下からスッと
- 展開 - 立体的に開く
私は立体的に開く「展開」をセレクト中。（変更してたらごめん）
更にここで「メニュー独立」を選ぶと、サイトタイトルの下にメニューバーが表示されます。
独立メニューを選択すると、タイトルの右側の開いたスペースがウィジェットエリアとして利用できるのも便利。
（カテゴリがまだ少ないので問い合わせが2か所に表示されてますが、上手に使い分けるのもよし）
ウィジェットエリアは、「外観」⇒「ウィジェット」⇒「ヘッダーロゴの右」に追記するか、
もしくは、ダッシュボードの「Diverオプション」⇒「ヘッダーボタン」から設置可能。
（↑断然Diverオプションからの設置がおすすめ）
ミニヘッダーの設置方法
私は現状で設置していないんですが、サイトのキャッチコピーが入れられるミニヘッダーにも、ちょっとしたメニューを設置することができるようになっています。
ミニヘッダーを設置するとこんな感じ↓
カテゴリーと固定ページを上手く配置したいところですね。
固定ヘッダーの設置と表示
もう一つ、Diverのデモサイトを見た時に、「おおっ！」と思ったのが、固定ヘッダー。
ページをスクロールしてヘッダーが隠れたら表示（固定）されるヘッダーが出てくるんです。
画面をスクロールしても、メニューが表示されるのは回遊率upにも役立ちます。
ただし、固定ヘッダーを使いたいなら、ウザくならないように透過にしたほうがいいと思うし、それならタイトルロゴも透過にしたほうがすっきりします。
ロゴの作成や背景透過をするにはこちらも参考にしてみてくださいね↓
ちなみに固定ヘッダーは、スマホでみた時も画面をスクロールさせると表示されます。。
（ちゃんと透けてるw）
ページを見てる途中で検索ができたりカテゴリーを見る事もできる。
Diverメニューに配置する項目のカスタマイズ
メニュー項目に何をいれるかは、個別に設定することができます。
「外観」⇒「メニュー」
設置するメニュー毎に項目を追加、メニューを作成・変更することができます。
このあたりは直感的に作業しやすいようになっているので、サクっと設定してしまいましょう。
固定ページだけではなく、個別の投稿ページやカテゴリーを設置することもできます。
フッターメニューもここで作成することができますね。（当ブログでは、プライバシーポリシー、問い合わせ、サイトマップを置いてます）
親カテゴリーの下に子カテゴリーを表示する方法
親カテゴリーの階層下に子カテゴリーを表示したい場合は、
プルダウンキーで子カテゴリーの詳細を開き、「下の階層」をクリック。
このブログの場合は、親カテゴリ「Diver」の子カテゴリに「カスタマイズ」と「使い方」を設定しています。
子カテゴリを親カテゴリの階層下（副項目）にいれることができました。
ヘッダーメニューのカラーカスタマイズ
ヘッダーメニューの色は、カスタマイザーで変更していきます。
「外観」⇒「カスタマイズ」⇒「基本カラー」。
基本、マウスオン時はリンクとわかるブルー系にするのが鉄則だと思っているので、表示色と背景のみ変更。
固定ヘッダー背景は透過設定しておくのがおすすめです。（「70」くらいにしてます）
Diverメニュー設定まとめ
ヘッダーメニューのスタイルが選べるDiver。
独立メニューも使って見たんですが、配色が決まらなくて、結局ロゴと並列に戻しています。
企業からの問い合わせが多いサイトなどは、独立メニューでウィジェットにアイコンを使った方が目立っていいかもしれないですね。
スマホユーザーが多いのか、PCユーザーが多いのか、サイトの訪問者層によっても、メニューの組み立て方を変えたほうが良さそうです。
スマホメニューについては、また別に設定項目があるので、こちらを参考してみてください↓
