Elementor Pro ナビメニューウィジェットの使い方

ヘッダーやフッターに入れるほどのメニューじゃないけど、サイトのページにちょこっと似たような機能が入れられたらいいななんて思いませんか?

Elementor Proの『ナビメニュー』ウィジェットなら、WordPressの外観のメニューでメニューさえ作成しておけば、ウィジェットを挿入するだけで簡単にサイトのいたるところにヘッダーのようなメニューを表示させることができるんです!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementor Pro ナビメニューウィジェットの使い方を動画でご覧になりたい方はこちらからどうぞ!

ナビメニューウィジェットを挿入する

ナビメニューウィジェットをカラムに挿入

『ナビメニュー』ウィジェットをドラッグ&ドロップでカラムに挿入します。

ナビメニューウィジェット挿入後の表示画面

するとこのような画面表示になります。

サンプル画面にはすでにいくつかのメニューが表示されています。

これらの情報はWordPressの『外観』の『メニュー』からきています。

WordPressの外観・メニューのページ:ナビメニューウゥジェットに反映している部分の表示画面
外観の『メニュー』編集ページ

コンテンツタブの編集・レイアウト

コンテンツタブ・レイアウト

メニュー

メニューの説明・メニューが複数ある場合は表示させたいメニューをリストから選択・『テストナビ1』を選択

『メニュー』は外観でメニューを複数作成している場合、リストからどのメニューを表示させるかどうかの選択ができます。

上記は『テストナビ』というタイトルのメニューが表示されています。

メニューで『テストナビ2』を選択したときの表j画面

上記は『テストナビ2』のメニューを選択した時の表示画面です。

メニューの内容が変わっているのがお分かりいただけると思います。

レイアウト

『レイアウト』はナビメニューの配列を以下から選択することができます。

  • 水平
  • 垂直
  • Dropdown

水平

レイアウトの選択可能なリストの表示(水平/垂直/Dropdown)と『水平』を選択したときの表示画面

『水平』はメニューを横一列に配置します。

なお、メニューの並び順は外観のメニューで配置したとおりの順番で表示されます。

垂直

レイアウトで『垂直』を選択したときの表示画面

『垂直』はメニューを縦一列で配置します。


なお、『水平 / 垂直』の2つと『Dropdown』でElementorのエディターの仕様が変わります。

水平 / 垂直の次の編集項目は別セクションの『Align』までお進みください。


サブメニューがある場合は垂直はオススメしない

『垂直』を選択したときのサブメニューの実際の表示サンプル
垂直選択時のプレビュー画面

垂直に設定するとサブメニューが画面の左端に表示されてしまいます。

レスポンシブモードのタブレットの設定次第ではサブメニューが完全に画面から見切れてしまうこともありますので、メニューにサブメニューがある場合は『垂直』はあまりオススメしません。

Dropdown

レイアウト・Dropdownを選択したときの表示画面・ハンバーガーメニューが表示される

『Dropdown』を選択するとハンバーガーメニューが表示されます。

ハンバーガーメニューをクリックすると下部にメニューが表示される仕組みです。

ハンバーガーメニューをクリックした後の表示画面

こちらはハンバーガーメニューをクリックした後の表示画面です。

メニューは垂直に表示されます。

なお、Dropdownのみエディターの仕様が異なりますのでDropdownのエディターの説明は引き続き次のセクションをご覧ください。

Dropdownを選択したときのエディター

レイアウトでDropdownを選択したときのエディター表示画面

Submenu Indicator

Submenu Indicator』につきましては別のセクションの同じ項目で説明をしていますのでそちらを参考にしてください。

全幅

全幅で『いいえ」を選択したときのプレビューの表示画面
プレビュー画面(全幅:いいえ)

『全幅』はメニューの幅が画面に対して全幅で表示させるかどうかの選択です。

上記は『全幅』を『いいえ』(デフォルト)に設定したときのプレビュー画面です。

全幅で『はい』を選択したときのプレビューの表示画面
プレビュー画面(全幅:はい)

上記は『全幅』を『はい』にしたときの表示画面です。

メニューが画面の横幅いっぱいに表示されているのがお分かり頂けると思います。

Align

Alignの『アサイド』と『中央』を選択したときのそれぞれのサンプル表示

『Align』ではドロップダウンしたメニューの配置を『アサイド』または『中央』から選択します。

デフォルトは『アサイド』で、メニューはカラムの左側に表示されます。

『中央』はメニューがカラムの中央に表示されます。

Toggle Button

Toggle Buttonで『なし』と『Humburger』を選択したときのそれぞれの表示サンプル

『Toggle Button』は『ハンバーガーメニュー』をつけるかどうかの選択です。

デフォルトでは『Humburger』が選択されており、ボタンをクリックするとメニューが開きボタンをクリックするとメニューが閉じる仕組みです。

『なし』を選択するともちろんボタンなどの表示はされず、メニューも終始開いたままになります。

Toggle Align

Toggle Alignの『左/中央/右』のそれぞれのサンプル表示

『Toggle Align』はハンバーガーメニューのカラム内の配置を『左 / 中央 / 右』から選択します。

なお、Toggle AlignはToggle Buttonを『Humburger』に設定しているときのみエディターに表示されます。


ここからは『レイアウト』を『水平』または『垂直』に設定したときのエディター説明になります。

Align

Alignで左を選択したときのサンプル表示

『Align』はカラム内のメニューの配置を以下から選択することができます。

  • 左(デフォルト)
  • 中央
  • 均等割付

上記はAlignを『左』に設定したときの表示画面です。

均等割付

Alignで『均等割付』を選択したときのサンプル表示

『均等割付』はメニューがカラム全幅で均等な間隔で配置されます。

Pointer

Pointerのリスト一覧画面

『Pointer』はポインターがメニューをマウスオーバーにしたときにどのメニューが指されているかを示すもののことです。
Pointerを以下のリストから選択できます。

  • なし
  • Underline(デフォルト)
  • Overline
  • Double Line
  • フレームつき
  • 背景
  • テキスト

Underline

Pointerの『Underline』のサンプル

『Underline』(アンダーライン)はメニューの下部に線が表示されます。

Overline

Pointerの『Overline』のサンプル
『Overline』(オーバーライン)はメニューの上部に線が表示されます。

Double Line

Pointerの『Double Line』のサンプル

『Double Line』はメニューの上下に線が表示されます。

フレームつき

Pointerの『フレームつき』のサンプル

『フレームつき』はメニューを囲む枠線が表示されます。

背景

Pointerの『背景』のサンプル

『背景』はメニューの背景色が変更します。

テキスト

Pointerの『テキスト』のサンプル

『テキスト』は少し文字のサイズが大きくなります。

アニメーション

アニメーションのリスト一覧のサンプル表示

『アニメーション』はポインターがメニューにマウスオーバーしたときの動きのエフェクトをリストから選択することができます。

上記画面には前セクションのPointerで『テキスト』を選択したときのアニメーションのリストが表示されていますが、どのアニメーションが使用可能かは選択するPointerにより変わります。

ちょっとおすすめのアニメーションとPointerの組み合わせ

こちらはPointerを『フレームつき』にし、アニメーションで『Corners』を選択したときの動画です。

アニメーションとPointerの組み合わせ次第で何通りものマウスオーバー後のエフェクトが作れますので色々と試してみてくださいね!

Submenu Indicatorの説明・デフォルトの表示画面

『Submenu Indicator』はメニューにサブメニューがあるメニューの横に表示されるアイコンを変更できます。

デフォルトで▼が表示されますが、エディターの右のオプションをクリックするとアイコンライブラリーから別のものを選択でき、左のオプションを選択するとアイコンを非表示にできます。

アイコンライブラリーの表示画面

こちらはアイコンライブラリーの表示画面です。

Recommended(おすすめ)で下向きの矢印がいくつか表示されていますが、アイコン一覧のすべてのアイコンから選択することも可能です。

Mobile Dropdown

Mobile Dropdownの説明・Mobile Dropdownはレイアウトで水平または垂直を選択したときのレスポンシブ用のエディター

『Mobile Dropdown』はモバイル、タブレットのでメニューのレイアウトを変更するエディターです。

なお、こちらは『レイアウト』を『水平』または『垂直』に設定したときのみ表示されます。

Breakpoint / モバイル(>787px)

Breakpointwpモバイル(>767px)で設定したときのモバイルの表示画面:Dropdownになる
レスポンシブ:モバイル

上記はBreakpointを『モバイル(>767px)』に設定し、レスポンシブモードを『モバイル』にしたときの表示画面です。

メニューはハンバーガーメニューのDropdownが採用されます。

Breakpointをモバイル(>767px)で設定したときのタブレットの表示画面:ハンバーガーメニューではなく、レイアウトで選択したメニューが表示される
レスポンシブ:タブレット

上記はBreakpointが『モバイル(>767)』でレスポンシブを『タブレット』に設定しているときの表示画面です。

メニューは『レイアウト』で設定されているものが採用されます。
(このサンプルでは『水平』を選択しています。)

Breakpoint / タブレット(>1024)

Breakpointをタブレット(>1024px)に設定したときのモバイルの表示画面:メニューはDropdownになる
レスポンシブ:モバイル

上記はBreakpointを『タブレット(>1024px)』に設定し、レスポンシブモードを『モバイル』にしたときの表示画面です。

メニューはハンバーガーメニューのDropdownが採用されます。

Breakpointを(>1024px)で設定したときのタブレットの表示画面:Dropdownで表示される
レスポンシブ:タブレット

上記はBreakpointを『タブレット(>1024px)』に設定し、レスポンシブモードを『タブレット』にしたときの表示画面です。

メニューはハンバーガーメニューのDropdownが採用されます。

Breakpoint / なし

Breakpointで『なし』を選択したときのモバイルの表示画面:レイアウトで設定した通りの表示になる

『Breakpoint』を『なし』に設定するとモバイルもタブレットも全て『レイアウト』で設定した『水平』または『垂直』が採用されます。

その他のMobile Doropdownの設定

Mobile Dropdownの『全幅/Align/Toggle Button Toggle Align』のエディターの説明

Mobile Dropdownの以下の設定につきましては『Dropdownを選択したときのエディター』のセクションですべて説明していますのでそちらをご覧ください。

スタイルタブの編集・Main Menu

スタイルタブ・Main Menu

書体

書体の説明とタイポグラフィの表示

『書体』ではメニューの書体をタイポグラフィで自由に変更することができます。

くわしいタイポグラフィの編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事の同セクションを参考にしてください。

文字色

メニューの文字色をカラーピッカーより自由に変更することが可能です。

普通

『普通』の文字色のサンプル表示

『普通』はポインターがメニューのどこにも触れていないときの文字色の設定です。

ホバー

『ホバー』の文字色とPointer Colorのサンプル表示

『ホバー』はポインターがメニューに触れているときのメニューの文字色とメニューのPointerの色を変更することができます

※メニューのPointerとは、上記画像でいうポインターがメニューに触れているときに出る下線です。

Active

『Active』はメニューがクリックされた後のどのメニューが画面上で有効中かを示すときの文字色とPointer Colorを変更するものですが、このナビメニューではクリック後に別のページにリダイレクトするのでこのActiveは変更しても無意味です。

区切り線

区切り線をオンにしたときの表示画面

『区切り線』はメニューとメニューの間に区切り線をつけるかどうかの選択です。

上記は区切り線を『オン』にしたときの表示画面です。
デフォルトでは『オフ』に設定されています。

スタイル

区切り線のスタイル一覧とスタイルで『破線』を選択したときの表示サンプル

『スタイル』は区切り線のスタイルを以下から選択することができます。

  • 直線
  • 二重線
  • 点線
  • 破線

なお、上記はスタイルで『破線』を選択したときの表示画面です。

幅 / 高さ / 色

区切り線の『幅/高さ/色』をそれぞれ変更したときの表示サンプル
  • 幅:区切り線の太さをカーソルを左右にスライドさせることにより変更することができます。
  • 高さ:区切り線の高さ(長さ)をカーソルを左右にスライドさせることにより変更することができます。
  • 色:区切り線の色をカラーピッカーより自由に変更できます。

Pointer Width

Pointer Widthの説明:値を12に設定したときの表示画面

『Pointer Width』はPointerの線の幅を変更することができます。

※デフォルトは『3』の値に設定されており、最大値『30』まで変更可能です。

Horizontal Padding

Horizontal Paddingの説明・値を50(最大値)にしたときの表示画面

『Horizontal Padding』はメニューとメニューの間の間隔を縮小・拡張できます。

※デフォルトは『20』の値に設定されていますが、最小値『0』から最大値『50』まで変更が可能です。

Vertical Padding

Vertical Paddingの説明・値を50(最大値)に選択したときの表示画面

『Vertical Paadding』はメニューの縦幅を縮小・拡張することができます。

※デフォルトの値は『12』に設定されていますが、最小値『0』から最大値『50』まで変更が可能です。

スペースの間隔

スペースの間隔の説明・値を100(最大値)にしたときに表示画面

『スペースの間隔』はメニューとメニューの間の間隔を縮小・拡張できます。

こちらは『Horizontal Padding』とまったく同じです。

しかし、スペースの間隔とHorizontal Paddingを併用するとさらにスペースの幅を最大値よりも引き上げることができます。

Horizontal Paddingとスペースの間隔をともに最大値にしたときの表示画面

上記は『スペースの間隔』と『Horizontal Paddding』をどちらも最大値にしたときの表示画面です。

どちらか1つを最大値にしたときよりも間隔がさらに拡張しました。

スタイルタブの編集・Doropdown

スタイルタブ・Dropdown:レイアウトで『水平』を選択しているときのサブメニューの表示
レイアウトで水平を選択したときのサブメニューサンプル
スタイルタブ・Dropdown:レイアウトで『Dopdown』を選択しているときのメニューの表示
レイアウトでDoropdownを選択したときのメニューサンプル

ここでいう『Doropdown』とは以下を指します。

文字色 / 書体

サブメニュー内の『文字色』と『書体』を編集することができます。

編集の仕方については上記セクションの『文字色』『書体』ですでに説明をしていますのでそちらを参考にしてください。

背景色

普通時の背景色の説明・ドロップダウンしたボックスの背景色変更後の表示画面

『背景色』はサブメニューの背景色を変更することが可能です。

普通 / ホバー / ACTIVE

ホバー時の背景色の説明・ホバー時の背景色を変更したあのサンプル表示

普通 』『ホバー』『ACTIVE』はポインターが背景色にマウスオーバーしているときとそうでないときのサブメニューの色を変化させることができます。

上記はホバー時の文字色と背景色を変更したときのサンプル画像です。

くわしくは前セクションの普通 / ホバー / ACTIVEを参考にしてください。

また、書体は変化させることはできません。

ボーダータイプ の選択と編集

ボーダータイプ/幅/色/ボーダー丸み/ボックスシャドウで編集を加えた後のサブメニューのサンプル表示

『ボーダータイプ』はサブメニューの枠線のことで以下より選択ができます。

  • なし(デフォルト)
  • 直線
  • 2本線
  • 点線
  • 破線

さらに枠線に『幅』『色』『ボーダー丸み』『ボックスシャドウ』の編集を加えることができます。

このボーダーの編集の仕方はElementorのほぼすべてのセクションで仕様が同じですのでこの記事では説明を割愛させていただきます。

ボーダーのくわしい編集方法を知りたい方は【Elementorの『画像』ウィジェットの使い方】の記事の同セクションをご覧になってください。

Horizontal Padding

Horizontal Paddingの値を100(最大値)にしたときのサブメニューのサンプル表示

『Horizontal Padding』ではサブメニューのボックスの横幅をカーソルを左右にスライドさせることにより縮小・拡張することが可能です。

上記はHorizontal Paddingの値を『100』(最大値)にしたときの表示です。

Vertical Padding

Vertical Paddingの値を50(最大値)にしたときのサブメニューのサンプル表示

『Vertical Padding』はサブメニューのボックスの縦幅をカーソルを左右にスライドさせることにより縮小・拡張することができます。

上記は『Vertical Padding』の値を『50』(最大値)にしたときの表示です。

区切り線

区切り線の『ボーダータイプ/色/ボーダー幅』の説明とサンプル表示

『区切り線』はサブメニューに複数の項目がある場合項目間に区切り線を表示させることができます。

区切り線のは以下で編集が可能です。

  • ボーダータイプ:ボーダーの線種を『なし / 直線 / 2本線 / 点線 / 破線 / 溝』から選択ができます。
  • 色:区切り線の色をカラーピッカーより自由に変更が可能です。
  • ボーダー幅:カーソルを右にスライドさせることにより線幅を太くすることができます。
    ※デフォルトは『0』の値に設定されており、その場合は区切り線は非表示になりますので区切り線を表示させたい場合は最小値『1』から最大値『50』の間で設定します。

Distance

Distanceの値を100(最大値)に設定したときのサンプル表示

『Distance』はメニューからサブメニューのボックスの間のスペースを変更することができます。

上記はDistanceの値を『100』(最大値)に設定したときの表示画面です。

デフォルトは『0』の値に設定されており、最小値『-100』までの変更ができますがマイナスの値はメニューにボックスが被ってしまうのでオススメしません。

スタイルタブの編集・Toggle Button

スタイルタブ・Toggle Button

『Toggle Button』はハンバーガーメニューのスタイルの編集です。

上記はレイアウトで『Dropdown』を選択したときのスタイルタブの表示画面ですが、『水平』または『垂直』を選択したときのスタイルタブに『Toggle Button』の編集があります。

それはレスポンシブの『モバイル』または『タブレット』で表示されるハンバーガーメニューを指します。
※ここで何を言っているのかがいまいちわからない場合は『Mobile Dropdown』のセクションをご覧になってください。

色 / 背景色

普通時の色と背景色の説明:色はハンバーガーメニューの3本線・背景色はフレーム内の色
  • 色:ハンバーガーメニューの3本線の色をカラーピッカーより自由に選択できます。
  • 背景色:ハンバーガーメニューを囲う四角全体の色をカラーピッカーより自由に選択できます。

普通 / ホバー

ホバー時の色と背景色の説明と各色を変更した後の表示サンプル
  • 普通:ハンバーガーメニューにポインターがかかっていない状態のときの色を指定します。
  • ホバー:ハンバーガーメニューにマウスオーバーしているときの状態の色を指定します。

※上記はホバー時の色と背景色を設定したときの表示サンプルです。

サイズ

サイズの説明・ハンバーガーメニューを拡大した後の表示画面

『サイズ』はハンバーガーメニューのサイズを拡大・縮小することができます。

デフォルトの値は『20』前後に設定されており、カーソルを左右にスライドさせることにより最小値『15』から最大値『100』の間で大きさが変わります。

ボーダーの幅

ボーダー幅の説明・値を4に設定した後のサンプル表示

『ボーダーの幅』はハンバーガーメニューに枠線をつけることができます。

デフォルトの値は『0』(ボーダーなし)に設定されていますが、ボーダーの幅を最小値『1』から最大値『10』の間で設定することができます。

ボーダーの丸み

ボーダーの丸みの説明・値を20にしたときのサンプル表示

『ボーダーの丸み』はハンバーガーメニューの枠線の角に丸みをつけることができます。

デフォルトの値は『0』に設定されており、カーソルを右にスライドさせるほど角に丸みがつきます。


ナビメニューはWordPressの『外観のメニュー』で作成した『メニュー』を表示できる優れたウィジェットです。

外観のメニューでも複数のメニューを作成できるので、ページによって表示させるナビメニューを変更するなどの使い分けもできます!

ヘッダー・フッターなどに入れるほどのメニューでもないな〜。
でも、とあるページの一部でメニューのように表示させられないかな。

そううときこそナビメニューです!

さらにナビメニューを使えばサイトの見た目もスッキリまとまり、スペースの節約にもなります。

ぜひ、Web制作に役立ててくださいね!

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通