Diverのメニューの設定方法とカスタマイズまとめ

今までWordPress無料テーマを使っていた私は思いました。

Diverの機能が豊富で混乱する!

良い事なんだけど。

でも単細胞に近い私の脳が、沢山あるメニュー機能を処理しきれずにいるので、

まとめてみました。

Diverのヘッダーメニューの設定とカスタマイズ

サイト内をわかりやすく見て頂くためにも必要なメニュー表示。

無料テーマのブログでは、ヘッダーとフッターにサイトマップや運営者情報、プライバシーポリシーなどを設定してるくらいですが、WordPress有料テーマ「Diver」なら、ヘッダーだけでも細かい設定ができるようになっています。

Diverでヘッダーに配置できるメニュー

  • ヘッダーメニュー(並列or独立)
  • ミニヘッダー
  • 固定ヘッダー

更に、フッターメニューもありますね。

早速設定方法とカスタマイズ方法を確認していきましょう!

ヘッダーメニューの並列と独立の違いや設定方法

Diverの中でメインメニューともいえる位置がヘッダーメニュー(ナビゲーション)。

サイトタイトルと同じ並び(並列)か、一段下に設置(独立)することができます。

これがヘッダーメニュー↓

Diverのヘッダーメニュー

まずは設定から。

「外観」⇒「カスタマイズ」⇒「メイン設定」より、

ヘッダーメニューの設定
ナビゲーションのエフェクト

ロゴと並列を選ぶと、サイトタイトルと同じ並びにメニューが表示されます。

ナビゲーションドロップダウンエフェクト」のプルダウンキーから階層メニューの表示方法を選ぶことができます。

  • フェード - ふわっと表示
  • 上から - 上からふわっと
  • スライド - 下からスッと
  • 展開 - 立体的に開く

 

私は立体的に開く「展開」をセレクト中。(変更してたらごめん)

更にここで「メニュー独立」を選ぶと、サイトタイトルの下にメニューバーが表示されます。

Diverの独立メニュー

独立メニューを選択すると、タイトルの右側の開いたスペースがウィジェットエリアとして利用できるのも便利。

(カテゴリがまだ少ないので問い合わせが2か所に表示されてますが、上手に使い分けるのもよし)

ウィジェットエリアは、「外観」⇒「ウィジェット」⇒「ヘッダーロゴの右」に追記するか、

Diverのウィジェットエリア

もしくは、ダッシュボードの「Diverオプション」⇒「ヘッダーボタン」から設置可能。

Diverオプションのヘッダーボタン設置
(↑断然Diverオプションからの設置がおすすめ)

ミニヘッダーの設置方法

私は現状で設置していないんですが、サイトのキャッチコピーが入れられるミニヘッダーにも、ちょっとしたメニューを設置することができるようになっています。

ミニヘッダーを設置するとこんな感じ↓

ミニヘッダーを設置

カテゴリーと固定ページを上手く配置したいところですね。

固定ヘッダーの設置と表示

もう一つ、Diverのデモサイトを見た時に、「おおっ!」と思ったのが、固定ヘッダー。

ページをスクロールしてヘッダーが隠れたら表示(固定)されるヘッダーが出てくるんです。

Diverの固定ヘッダー

画面をスクロールしても、メニューが表示されるのは回遊率upにも役立ちます。

ただし、固定ヘッダーを使いたいなら、ウザくならないように透過にしたほうがいいと思うし、それならタイトルロゴも透過にしたほうがすっきりします。

ロゴの作成や背景透過をするにはこちらも参考にしてみてくださいね↓

ちなみに固定ヘッダーは、スマホでみた時も画面をスクロールさせると表示されます。。

固定ヘッダーのスマホ表示
(ちゃんと透けてるw)

ページを見てる途中で検索ができたりカテゴリーを見る事もできる。

きじとら
もちろん、見る人が知らなかったら使えない機能だけど、でもいいんです。かっこいいから。

Diverメニューに配置する項目のカスタマイズ

メニュー項目に何をいれるかは、個別に設定することができます。

「外観」⇒「メニュー」

Diverメニューの項目設定
設置するメニュー毎に項目を追加、メニューを作成・変更することができます。

メニューの作成
このあたりは直感的に作業しやすいようになっているので、サクっと設定してしまいましょう。

固定ページだけではなく、個別の投稿ページやカテゴリーを設置することもできます。

フッターメニューもここで作成することができますね。(当ブログでは、プライバシーポリシー、問い合わせ、サイトマップを置いてます)

親カテゴリーの下に子カテゴリーを表示する方法

親カテゴリーの階層下に子カテゴリーを表示したい場合は、

プルダウンキーで子カテゴリーの詳細を開き、「下の階層」をクリック。

子カテゴリを親の下階層にいれる

このブログの場合は、親カテゴリ「Diver」の子カテゴリに「カスタマイズ」と「使い方」を設定しています。

メニューの副項目設定

子カテゴリを親カテゴリの階層下(副項目)にいれることができました。

ヘッダーメニューのカラーカスタマイズ

ヘッダーメニューの色は、カスタマイザーで変更していきます。

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

ヘッダーメニューのカラー設定
固定ヘッダーのカラー設定

基本、マウスオン時はリンクとわかるブルー系にするのが鉄則だと思っているので、表示色と背景のみ変更。

固定ヘッダー背景は透過設定しておくのがおすすめです。(「70」くらいにしてます)

Diverメニュー設定まとめ

ヘッダーメニューのスタイルが選べるDiver。

独立メニューも使って見たんですが、配色が決まらなくて、結局ロゴと並列に戻しています。

企業からの問い合わせが多いサイトなどは、独立メニューでウィジェットにアイコンを使った方が目立っていいかもしれないですね。

スマホユーザーが多いのか、PCユーザーが多いのか、サイトの訪問者層によっても、メニューの組み立て方を変えたほうが良さそうです。

スマホメニューについては、また別に設定項目があるので、こちらを参考してみてください↓

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

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

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

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

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

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

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