外国貿易独立系ウェブサイトのナビゲーションメニューを改善するためのElementorエディタの使用に関する包括的なガイド

外国貿易単独サイトの制作では、サイトの様々なページをより緊密にリンクさせるために、メニュー機能を追加する必要がよくあります。私たちは通常、上部にメインナビゲーションメニューを考えますが、ページジャンプのためにページ内アンカーテキストを使用する人もいます。しかし、この方法はナビゲーションメニューほど視覚的にも機能的にもリッチではないかもしれません。

より柔軟なデザインオプションを提供するために、Elementorエディタは非常に便利な機能である "Nav Menu "を導入しました。このツールを使えば、デザインのニーズに応じてサブナビゲーションメニューをカスタマイズすることができます。

1.Elementorエディタのコンテンツ編集セクションに「Nav Menu」機能要素を追加します。

Elementorエディタに "Nav Menu "機能を追加するには、以下の簡単な手順に従います：

1. Elementorの要素ライブラリから "Nav Menu "要素を探します。
2. マウスの左ボタンで要素をクリックし、押したままにします。
3. ページのコンテンツ編集エリアまでマウスをドラッグします。編集エリアの境界線が灰色の点線から青色の点線に変わったら、マウスの左ボタンを離します。
4. これで、コンテンツ編集エリアに "Nav Menu "要素が追加されました。

2.Elementorエディタで「Nav Menu」機能要素のメイン機能を設定します。

Elementorエディタでサブメニューを設定する際に理解すべきいくつかの重要な設定オプションがあります：

1. メニュー::
   • ここでサブメニューのコンテンツのソースを選択します。まず、WordPressの「外観」>「メニュー」でサブメニューを作成し、名前を付けます。作成が完了すると、これらのメニューがElementorのドロップダウンメニューオプションに表示されます。
2. レイアウト::
   • サブメニューの表示方法は、横並び、縦並び、ドロップダウンのいずれかを選択できます。
3. 整列::
   • サブメニューの配置（左、中央、右、またはその両方）を設定します。
4. ポインタ::
   • これは、下線、上線、二重線、枠付き、背景、テキストなどのメニュー項目にマウスを合わせたときに発生するエフェクトのことです。あなたのスタイルに合った効果を選んでください。
5. アニメーション::
   • マウスホバー時のダイナミックエフェクト。これらのダイナミックエフェクトはスクリーンショットではお見せできません。
6. サブメニュー表示::
   • この設定はサブメニューの存在を示すために使用されますが、正確な変化はあまり目立たないかもしれません。
7. ブレークポイント::
   • タブレットや携帯電話などの異なるデバイスでの表示ブレークポイントを設定します。画面幅がこの値より小さい場合、横1行のサブメニューは複数行表示になります。
8. 全幅::
   • ブレークポイント後にサブメニューを全行幅で表示するかどうかを決定します。通常、全行幅は推奨されません。
9. 整列::
   • アライメントを左（Aside）または中央（Center）に設定し直します。
10. トグルボタン::
    • サブメニューの表示方法（なし（None）、ハンバーガーメニュー（Hamburger））を設定します。ハンバーガーメニューを選択すると、アイコンが表示され、クリックするとサブメニューがポップアップします。
11. トグル整列::
    • トグルボタンのアイコンの位置を左、中央、右のいずれかに設定します。

3.Elementorエディターで「Nav Menu」機能要素をスタイルします。

1. 「ドロップダウン」プロジェクトの構成

Elementorエディタでドロップダウンメニュー（Dropdown）をスタイリングするとき、いくつかの異なる状態と特定のスタイル設定を扱うことになります。これらの設定を単純化して平易に説明しましょう：

メインメニューの3つの状態設定：

1. ノーマル（NORMAL）メニューのデフォルト表示状態。
2. ホバー状態 (HOVER)メニューの上にマウスを移動したときの表示状態。
3. 活動状況（ACTIVE）メニュー項目をクリックしたときの表示状態。

これらの3つの状態では、以下の設定を調整できます：

• テキストの色: 折りたたみメニューのアイコンを含む、ドロップダウンメニューの全メニュー項目の文字色を変更します。
• 背景色（バックグラウンド）メニュー項目の背景色を設定します。アクティブ」状態では、クリックしたときのメニューの背景色も指定できます。
• タイポグラフィメニューテキストのフォント、サイズ、その他の組版特性を調整します。

ドロップダウンメニューのスタイル：

• 水平パディングメニューの左側からのスペースを設定します。
• 垂直パディングメニュー項目の上下の間隔を設定します。
• スペース・ビトウィーン各行のメニュー項目間の距離を設定します。
• ボーダー半径値が大きいほど角が丸くなります。

ドロップダウンメニューの追加設定：

• ボーダータイプドロップダウンメニュー全体の外枠スタイルを設定します。
• ボックスシャドウドロップダウンメニューに立体的な影をつけ、目立たせます。
• ディバイダー個々のメニュー項目の間にセパレータを追加します。
• 距離メニュー項目間の距離を設定します。

2. 「トグル・ボタン」プロジェクトの構成

Elementorエディタでドロップダウンメニューのトグルボタン(Toggle Button)を設定するには、いくつかの簡単なビジュアル設定が必要です。このボタンは通常ハンバーガーメニューアイコン（3本の横線）ですが、サイトデザインによりフィットするように外観を調整できます。以下に具体的な設定オプションを示します：

1. カラー::
   • この設定は、ハンバーガーメニューのアイコン（3本の横線）の色を変更します。
2. 背景色::
   • ハンバーガーメニューのアイコンの背景色です。色を選択することで、アイコンをより目立たせたり、サイト全体のスタイルに調和させることができます。
3. サイズ::
   • ハンバーガーメニューアイコンは、ウェブデザインやユーザーインターフェースの他の要素と調和するようにサイズを変更してください。
4. ボーダー幅::
   • アイコンの外枠の太さを設定します。これにより、アイコンをより見やすくしたり、背景にさりげなく溶け込ませたりすることができます。
5. ボーダー半径::
   • アイコンの境界線の角を丸める度合いを調整します。値が大きいほど、角が丸くなります。例えば、50に設定すると、アイコンは完全に丸くなり、丸いボタンのように見えます。

結論

Elementorエディタを使用して、外国貿易スタンドアロンサイトのナビゲーションメニューを強化および最適化します。サブメニューのソース、レイアウト、配置の設定、ホバー時やアクティブ時のスタイルのカスタマイズなど、「ナビメニュー」機能の追加と設定方法を解説します。さらに、ナビゲーションメニューが完全に機能するだけでなく、ウェブサイトの全体的なデザインやスタイルと視覚的に首尾一貫していることを保証するために、背景色、ボーダー、アニメーション効果などのドロップダウンメニューの様々な視覚効果を設定する方法、トグルボタンのサイズ、色、形状を調整する方法についても説明しました。