Elementor ProとWordPressを使ってウェブサイトのナビゲーションメニューを最適化する方法

あなたのウェブサイトに素敵なメニューをデザインしたい場合、いくつかの異なる方法から選択することができます。一つはWordPressのデフォルトのメニューエディタを使うことで、シンプルで実用的です。もう一つは、Elementorのナビゲーションメニューウィジェットを利用する方法です。高いカスタマイズ性メニューがよりお客様のニーズに応えられるようになります。

WordPressでナビゲーションメニューを作成

WordPressでナビゲーションメニューを作成するのは簡単です。まず、WordPressのダッシュボードにログインし、サイドバー "外観 > メニュー".を見つけてクリックします。新しいメニューの作成このページでは、新しいメニューの名前を入力するボックスが表示されます。名前を入力したら、青い "メニュー作成 "ボタンをクリックしてメニュー項目を追加してください。

2.ナビゲーションメニューの追加とカスタマイズ

ページのサイドに、ページ、投稿、カスタムリンク、カテゴリーから選択できるドロップダウンメニューが表示されます。

WordPressのナビゲーションメニューにページを追加するのはとても簡単です。まず、「メニュー」ページの「すべてを表示」タブをクリックして、利用可能なすべてのページをブラウズしてください。ページ数が多い場合は、「検索」機能を使って必要なページを素早く見つけることができます。追加したいページの横にあるチェックボックスを選択し、「メニューに追加」をクリックします。

メニューにいくつかのページを追加した後、各メニュー項目をさらにカスタマイズすることができます。メニュー構造の各項目の横にある矢印をクリックすると、以下のオプションが表示されます：

• ナビゲーションタブショップ、ギャラリー、会社概要など、メニューに表示されるリンクの名前です。
• タイトル属性メニューの上にマウスを置いたときに表示されるプロンプトのテキストです。
• 新しいウィンドウでリンクを開く通常、外部サイトへのリンクでない限り、このボックスにチェックを入れることはお勧めしません。
• CSSクラスCSS クラスを追加して、パディングや太字などのスタイルをカスタマイズできます。
• リンク関係リンクが関連する第三者のウェブサイトを指している場合、パートナー、家族のウェブサイト、自分の別のウェブサイトなど、その関係をここに明記することができます。
• 説明テーマが説明文の表示をサポートしている場合、ここにメニュー項目の簡単な説明を記入できます。

3.ナビゲーションメニューの構成変更

WordPressでは階層型メニューを作成することができます。つまり、親メニュー項目とその下のサブメニュー項目を設定することができます。こうすることで、訪問者が親メニュー項目にカーソルを合わせると、その下にある子ページが表示されるようになります。

メニュー項目の並び替えやサブメニューの作成は、ドラッグ＆ドロップで行います。メニュー項目をサブメニューとして設定したい場合は、対応する親メニュー項目の下に、サブメニュー項目が設定されるように少し右にドラッグするだけです。この操作の後、あなたのウェブサイトのナビゲーションは、より階層化され、ナビゲートしやすくなります。

4.メニューの公開

Menu Editor画面で、Manage Locationsタブをクリックします。次に、新しいメニューとして設定したい場所を選択します。利用可能な場所はあなたのサイトのテーマによって異なりますが、一般的には "メインメニュー "や "トップメニュー "のようなオプションが表示されるでしょう。これらの場所に新しいメニューを設定するには、対応するボックスにチェックを入れてください。このステップを踏むことで、ウェブサイトの正しい場所にメニューが表示されるようになります。

また、メインメニューページの下部にも同様の設定オプションがあり、チェックボックスとして表示されます。

それでもうまくいかない場合は、別の方法を試してみてください。外装状態">"ウィジェット"エリアを選択し、新しいカスタムメニューまたはナビゲーションメニューウィジェットを好きな場所にドラッグします。これで、サイトのメニューレイアウトが思い通りに配置されます。

Elementor Pro用ナビゲーションメニューウィジェット

ナビゲーション・メニュー・ウィジェットを使用するには、任意のバージョンのエレメンタル・プロ無料版をご利用の場合無料版を使用する場合は、WordPressのデフォルトメニューにこだわるか、サードパーティを使用する必要があります。

Proでは、300以上のテンプレートにアクセスすることもできます、テーマビルダーそしてWooCommerceウェブサイト歌で応えるマーケティングポップアップWooCommerceユーザーのために、より多くのウェブサイト・アニメーションと追加ウィジェットを用意しました。

Elementorでナビゲーションメニューを作る方法

ナビゲーションメニューウィジェットは、非常に柔軟で豊富な機能を備えており、ページ上部やヘッダーエリアに限定されることなく、ウェブサイト上に自由にメニューを配置することができます。お好きな場所に配置することができ、記事の中に含めることもできます。主な機能は以下の通りです：

• サイト上のどこにでも複数のメニューを追加することができます。
• 魅力的なホバーアニメーション効果を簡単に追加できます。
• モバイルデバイス用のレスポンシブデザインをサポートし、コンピュータ、タブレット、携帯電話での表示にカスタマイズできます。
• 調整可能なレイアウト、色、その他のデザイン要素により、メニューの外観を正確にコントロールできます。
• メニューの細部まで完璧に仕上げるために、パディング、スペーシング、アラインメントのオプションが用意されています。

まず、WordPressのデフォルトメニューを作成します。上記のヒントを参考にしてください。

WordPressメニューが完成したら、ナビゲーションメニューウィジェットを使ってサイトに追加します。これを行うには、メニューを表示したいテンプレートを作成または編集します (例.ヘッダー).ここでナビゲーションメニューウィジェットを見つけ、好きな場所に追加します。

これでWordPressのメニューをElementorで編集、カスタマイズできるようになります！

1.レイアウトとアニメーション

左のサイドバーに3つのタブがあります：コンテンツ、スタイル、アドバンス.まず最初にやるべきことは（まだやっていないのであれば）。"エレメント「そしてメニュー"表示したいメニューに変更します。プレビュー画面で確認できます。

メニューのレイアウトを設定する際、水平レイアウト、垂直レイアウト、隠しドロップダウン折りたたみメニューのいずれかを選択することができます。様々なレイアウトオプションを試してみると、様々なスタイルでメニューがどのように変化するかすぐにわかるでしょう。さらに、デザインのニーズに合わせてメニュー項目の配置を調整することもできます。

アニメーションに関しては、メニューをより魅力的にするための様々なオプションがあります。アンダーライン、オーバーライン、ダブルアンダーラインアニメーション、ボーダーアニメーション、背景アニメーション、テキストアニメーションなどがあります。をクリックするだけです。指針"ドロップダウンメニューからお好きなアニメーションの種類を選択し、" "をクリックします。アニメ"特定のオプションを表示し、選択します。アニメーション効果の具体例をご覧いただけます。

サブメニューインジケータでは、サブメニューの矢印アイコンの表示スタイルを変更することができます。サブメニューの外観をさらにカスタマイズしたい場合は、スタイルタブに移動し、ドロップダウンメニューセクションをクリックして展開します。ここでは、サブメニューの通常表示とホバー時の動作を調整したり、テキストレイアウトを変更したり、ボーダー、シャドウ、仕切りを追加したり、デザインニーズに合わせて内側の余白を調整することができます。このような設定により、あなたのメニューはより個性的で機能的なものになるでしょう。

2.色と間隔

メニューレイアウトを好きなように設定し、色や塗りつぶしの調整でさらにカスタマイズできます。次のページへ"タイプ"タブを開き"メインメニュー".

レイアウト設定では、テキストのサイズ、フォント、太さを編集でき、テキストをすべて大文字にするか小文字にするかを選択できます。さらに、デバイスの種類に応じて個別にスタイルを調整することもできます。例えば、モバイルデバイスではテキストサイズを大きくしたり、デスクトップデバイスではテキストの色を変更したり、お好みに合わせて調整することができます。これらのオプションにより、各デバイスに最適なブラウジング体験を提供することができます。

テキストの色とポインタのオプションを使って、メニューリンクが通常表示されているとき、ホバーされているとき、アクティブになっているときの色をカスタマイズすることができます。これらの異なる状態では、それぞれホバーされた状態とアクティブな状態のスタイルを調整することができます。

テキストのパディング、文字間隔、行の高さなどを設定できます：

• 御身長行の高さを調整します。垂直方向のパディングと同様で、テキストの上下のスペースに影響を与えます。
• 文字間間隔を大きくすると、文字と文字の間隔が広くなります。
• ポインタ幅ホバーまたはアクティブ状態での線の太さを設定します。
• 水平充填メニュー項目とメニュー項目の間、または縦書きレイアウトの場合はメニュー項目と列の端の間のスペースです。
• 垂直充填縦書きレイアウトの場合、メニュー項目とメニュー項目の間、またはカラムの上端と下端の間のスペースです。
• スペース・ビトウィーンメニュー項目間のスペースを大きくします。
• ボーダー半径: 背景色を使用する場合、この設定は角丸効果を追加します。

モバイルデバイス用にブレークポイントを設定した場合、デスクトップモードとタブレットモードで異なる間隔を設定することができます。そうでない場合は、モバイル用のオプションを個別に編集する必要があります。

最後に「詳細設定」タブでは、CSSクラスの設定、マージンやパディングの調整、背景画像の追加、レスポンシブ設定の変更などを行うことができます。これらのオプションを編集する際は、モバイルデバイスでのウェブサイトのパフォーマンスに影響を与えないように注意する必要があります。

3.モバイルメニューの設定

ナビゲーションメニューウィジェットでは、小さなデバイス用に最適化された多くの設定オプションがレイアウトタブに用意されています。以下は、これらのオプションの簡単な説明です：

• 中断点: タブレットや携帯電話などの小さな画面でも見やすいように、メニューのレイアウトを変更するタイミングを設定します。
• 全幅このオプションを有効にすると、モバイル・デバイスのメニューは画面の幅いっぱいに拡大され、ナビゲーション・バーの元の幅に制限されません。
• 整列モバイルメニューでは、リンクを中央に表示するか、左右に表示するかを選択できます。
• モードまたはデータストリームの切り替えハンバーガーメニュー（横線が3本入ったアイコン）は、モバイル端末でも表示されたままにするか、完全に非表示にするかを選択できます。
• トグルアライメントハンバーガーメニューのアイコンの位置を、中央揃え、左揃え、右揃えのいずれかに設定します。

スタイル]タブでは、色、背景、サイズのカスタマイズやボーダーの追加など、モバイルメニューのトグルボタンの外観を調整するためのオプションも見つけることができます。これらの設定により、モバイルメニューの表示をより美しく最適化することができます。

Elementorにはサイドバーの下部にレスポンシブモードのオプションがあります。これにより、タブレットやモバイルデバイスの画面でモバイルメニューがどのように表示されるかをプレビューできます。

概要

WordPress でカスタムナビゲーションメニューを作成する方法はいくつかあります。WordPressのデフォルトメニューは使いやすく、基本的なニーズを満たしていますが、メニューの柔軟性が十分でなかったり、特定の機能が欠けていたりする場合は、Elementorのナビゲーションメニューウィジェットを利用するのがよいでしょう。Elementorでは、メニューの作成とカスタマイズが簡単で柔軟性があり、幅広いカスタマイズが可能です。