Elementor ナビゲーション メニュー – WordPress ウェブサイトに素晴らしいメニューを構築

ウェブサイトの UI/UX の向上に役立つ素晴らしいメニューを作成する方法をお探しですか?もしそうなら、あなたは正しい場所にいます。ここでは、役立つ詳細なガイドをまとめました。

まず最初に、WordPress ウェブサイトのメニューを作成する方法を段階的に説明します。コツを掴んだら、Elementor ナビゲーション メニュー ウィジェットを使用して WordPress メニューをカスタマイズし強化する方法を説明します。

目次:

• カスタム ナビゲーション メニューが必要な理由は何ですか?
• Elementorを使用して基本的なWordPressメニューを作成する
• 1. WordPress ウェブサイト用のシンプルなメニューを作成する
• 2. ナビゲーション メニュー項目を選択してカスタマイズする
• 3. サブメニューの作成 – 親メニュー項目と子メニュー項目 (オプション)
• 4. メニューの場所を管理して公開する
• Elementor pro nav ウィジェットを使用してナビゲーション メニューを作成する方法
• Elementor ナビゲーション メニュー ウィジェットの主な機能
• nav-menu Pro ウィジェットを使用してメニューを作成する
• モバイル対応メニュー
• まとめ

カスタム ナビゲーション メニューが必要な理由は何ですか?

ナビゲーション メニューは、サイトにトラフィックをもたらすだけでなく、SEO ランキングを向上させるためにも重要であることを理解しておくことが重要です。

実際、ナビゲーション メニューは主にユーザーの関与を目的として設計されていますが、これが唯一の目的ではありません。

2 番目に重要な要素は、Web サイトをクロールしてコンテンツを関連レベルにインデックス付けし、コンテンツを適切な場所にランク付けするために検索エンジンに報告するように設計された「WebCrawler」またはボットの役割を常に念頭に置くことです。

したがって、あまりにも複雑なメニューを作成している場合、ボットがコンテンツをランク付けするのは困難になるだけでなく、訪問者を失うことになります。

つまり、「ナビゲーションのしやすさ」は、ユーザー エクスペリエンスの向上に極めて重要な要素であり、サイトのランキングを向上させ、トラフィックを増やす上で重要な役割を果たします。

これは、多くのビジネス Web サイトが、クリックすると全画面メニューが読み込まれる複雑なメニュー バーの代わりに、単一のナビゲーション アイコンを維持する大きな理由です。

Elementor プロ ウィジェットのおかげで、コードを使用せずにピクセル完璧で信じられないほど柔軟なメニュー バーを作成できます。

Elementor ナビゲーション メニュー ウィジェットを、カスタマイズされた高度な WordPress メニューを取得する方法を説明します

Elementor ナビゲーション ウィジェットを始める前に、Elementor 無料版を使用してシンプルな WordPress メニューを作成する方法を見てみましょう。

Elementorを使用して基本的なWordPressメニューを作成する

WordPress メニューを作成するために、特別なpluginをインストールする必要はありません。 WordPress にはデフォルトで、Web サイトのシンプルなナビゲーション メニューを作成するのに役立つ使いやすいメニュー ビルダーが付属しています。

ただし、メニューのカスタマイズ オプションにはアクセスできません。現在アクティブなWordPressテーマのデザインを引き継ぎます。しかし、それだけで十分であれば、これは WordPress Web サイトのナビゲーション メニューを設定する優れた方法です。

1. WordPress ウェブサイト用のシンプルなメニューを作成する

まず最初に、WordPress バックエンド ダッシュボードにログインする必要があります。

次に、左側のサイドバーから[外観] > [メニュー]。ここでは、左側に「メニュー項目の追加」、右側に「メニュー構造」がある 2 列のレイアウトが表示されます。

「メニュー構造」の下に、「メニュー名」のフィールドがあります。これが今作成するメニューの名前になります。これをメニュー 1 と呼びます。

注:心配しないでください。読者はメニュー名を見ることができません。これは、さまざまなメニューをすべて整理しておくのに役立つ機能です。

メニューに名前を付けたら、「メニューの作成」ボタンをクリックして利用できるようにします。次に、さまざまなメニュー項目を追加する必要があります。

2. ナビゲーション メニュー項目を選択してカスタマイズする

次は、新しいメニューにメニュー項目を設定する部分です。左側の「メニュー項目の追加」セクションの下に、メニューに追加できるものの整理されたリストが表示されます。

デフォルトでは、これにはページ、投稿、ランディング ページ、カスタム リンク、カテゴリのいずれかが含まれます。

チェックボックスを使用して追加したいメニュー項目を選択し、「メニューに追加」ボタンをクリックするだけです。これにより、選択したすべてのメニュー項目がメニューに取り込まれます。

注 「最新」 、 「すべて表示」、および「検索」を切り替えるオプションがあることに注意してください。項目が多い場合は、これらのオプションを忘れずに使用してください。

すべてのメニュー項目の追加が完了したら、「メニューを保存」ボタンを押して次のステップに進みます。

3. サブメニューの作成 – 親メニュー項目と子メニュー項目 (オプション)

WordPress ではデフォルトでサブメニューも作成できることをご存知ですか?サブメニュー構造を作成するときは、親メニュー項目と子メニュー項目があります。

ユーザーが親メニュー項目の上にマウスを移動すると、その下に隠れているすべての子メニュー項目が表示されます。

クールですよね？

サブメニュー構造を作成するには、親メニューに含めるメニュー項目を選択するだけです。次に、子メニュー項目として必要なすべてのメニュー項目をその下にドラッグ アンド ドロップします。あとは右にドラッグするだけで完了です。

4. メニューの場所を管理して公開する

新しいメニューを作成し、サブメニューを追加したので、今度はその場所を管理します。

メニュー エディターの上部に、「場所の管理」というオプションがあることに気づくはずです。それをクリックすると、次のような画面が表示されるはずです。

利用可能なメニューの場所は、インストールしたテーマによって異なります。このampでは、3 つのメニューをサポートするテーマがあります。

利用可能な各メニューの場所にメニューを割り当てたら、「変更を保存」をクリックするだけです。

これで、WordPress がデフォルトで提供する基本的なメニュー機能がすべてわかりました。ただし、さらにカスタマイズや機能が必要な場合は、Elementor Pro Nav メニュー ウィジェットについて学習してください。

Elementor pro nav ウィジェットを使用してナビゲーション メニューを作成する方法

カスタマイズされたナビゲーション メニューを WordPress サイトに追加したい場合は、Elementor Pro バージョンが必要です。 Elementor Pro バージョンには、 Elementor ナビゲーション ウィジェット加えて、300 以上のテンプレート、テーマ ビルダー、ポップアップ ウィジェット、WooCommerce ウィジェット、その他多くの興味深い機能など、他の多くの特別な機能が付属しています。

ナビゲーション メニュー ウィジェット自体の具体的な主な機能は何ですか?ここで簡単に紹介します。

Elementor ナビゲーション メニュー ウィジェットの主な機能

• ナビゲーション メニュー ウィジェットを使用すると、好きな場所にメニューを自由に配置できます。ヘッダー、上部、またはページの任意の場所にあります。
• サイトやページに複数のメニューを個別にまたはグローバルに追加できます。
• アニメーション、ホバリング効果、アクティブステータスを使用してメニューに魅力的な外観を与えます
• サイトのモバイル対応メニューを作成し、モバイル画面でサイトがどのように見えるかを制御します
• メニューバーの色、タイポグラフィ、パディングまたはその他の調整をカスタマイズします。
• 正確な位置揃え、間隔、パディングを備えたピクセルパーフェクトなメニューを作成します。

nav-menu Pro ウィジェットを使用してメニューを作成する

上で説明したように、基本的な WordPress メニューを作成する必要があります。その後、pro-nav-menu ウィジェットを使用してデフォルトの WordPress メニューをカスタマイズします。プライマリリストを作成したら、次のステップはそれを目的の場所、つまりヘッダーセクションに追加することです。

基本的な設定が完了したら、ナビゲーション メニュー ウィジェットを使用してメニューをカスタマイズしましょう。

設定セクションの最上隅には、3 つのオプションが利用可能です。コンテンツ、スタイル、および詳細。

「レイアウト」セクション: 水平、垂直、または非表示のドロップダウン アコーディオンの 3 つのオプションがあります。

• 水平:水平レイアウトは、サイトで使用される最も一般的なレイアウトです。画面の左から右へ広がっていきます。
• 縦型:多くのサイト、特にクリエイティブ サービスを提供するサイトでも縦型レイアウトが見られます。縦型レイアウトの場合、ナビゲーション バーの広がりは上から下になります。
• ドロップダウン:ドロップダウン メニューも非常に一般的です。ドロップダウンは垂直レイアウトであり、表示するにはユーザーとの対話が必要です。これらは主に、すっきりとしたデザインを作成するために使用されます。

整列セクション: このセクションは、メニュー テキスト項目を整列するのに役立ちます。中央、右、または左。

アニメーション セクション: このセクションでは、アニメーション効果の下、上、または二重線のアニメーション効果を追加できます。フレーム、背景、微妙なテキストのアニメーションを使用することもできます。

下線アニメーションは次のとおりです。

• フェード:フェード アニメーションでは、メニュー項目の下にフェード アニメーションが表示されます。
• スライド:スライド アニメーションは、メニュー項目の下のバーをスライドさせます。
• Grow : 中央から外側に向かって成長し、成長を感じさせるアニメーションです。
• ドロップイン: ドロップインアニメーションは下から上に流れます。
• ドロップアウト:ドロップアウト アニメーションは上から下に流れます。

同様にフレームアニメーション、オーバーラインアニメーション、二重線アニメーション、背景アニメーション、テキストアニメーションがあります。それぞれが独自のアニメーションのセットを提供しており、自分でチェックして何が得られるのかを知ることができます。

ポインタセクション: ドロップダウンメニューからポインタのタイプを選択します。

サブメニュー インジケーター セクション: Elementor ウィジェットには、多くのサブメニュー スタイル オプションが詰め込まれています。ここでは、メニューの色、スタイル、背景も制御できます。

パディングとメニュー間隔:パディングはすばやく調整できます。メニューとサブメニューの水平方向のパディング、垂直方向のパディング、スペース間の右揃え、左揃え、中央揃えを変更できます。

Elementor はメニューの間隔とパディングに非常にうまく取り組んでいます。彼らは、開発者が考えているデザインを簡単に作成できるように、ツールを開発者に提供できるように、裏方で懸命に働きました。

メニューの間隔には、次のような多くのオプションがあります。

• メニュー項目間のスペース
• メニューおよびサブメニュー要素の水平および垂直パディング
• 中央揃え、左揃え、右揃え、両端揃え。

背景色とタイポグラフィー: 希望の配色と背景色を使用して、カスタマイズされたブランドの外観を得ることができます。また、透明または半透明のメニュー オプションも選択できます。

デザイナーは、これらのオプションをできる限りいじって、好みに合わせて背景をデザインすることができます。

モバイル対応メニュー

モバイルは Web の重要な部分であるため、Elementor 開発者はモバイル用のナビゲーションバーも作成できるツールも提供しています。

Elementor ウィジェットを使用すると、WordPress のモバイル メニュー オプションを完全に制御できます。モバイル専用画面の別の設定セットを使用して、モバイル画面の表示を制御できます。 Elementor 設定セクションの下部にモバイル画面設定のオプションがあり、モバイル画面オプションを表示できます。

簡単に言うと、Elementor のモバイル メニューの機能は次のとおりです。

• モバイルの全幅:全幅または制限された幅を設定するオプションも表示されます。
• タブレットまたはモバイルのブレークポイント:ブレークポイント設定を使用して、モバイルまたはタブレットのモバイル メニューを設定できます。
• 垂直メニューとアコーディオン メニュー: Elementor は、折りたたみ可能なハンバーガー アイコンを表示するオプションも提供します。
• 配置の切り替え:ハンバーガー アイコンを中央、左、または右に配置できます。
• 脇/中央揃え:モバイル メニューの配置を選択します。

応答性の高いナビゲーション:メニューの応答性の高い配置を提供します。

まとめ

メニューは、Web サイトの最も重要な機能の 1 つです。なぜなら、訪問者が Web サイトを閲覧するのに役立ち、リストを賢く作成すれば、訪問者をサイトに長く留めておくのに役立つからです。メニューは、Web サイト全体のレイアウト、ヘッダー、フッター セクションと同様に重要です。

したがって、メニュー ウィジェットは、すべての重要な機能を備えた独自のブランドの外観を提供できる必要があります。 Elementorナビゲーション ウィジェットには、顧客がブランドの意見に合わせてメニュー セクションをカスタマイズできる豊富な機能が付属しています。ウェブサイト全体、ランディング ページ、ヘッダー、またはその他の表示したいセクションで、カスタマイズしたスタイリッシュなメニューを使用できるようになりました。