ナビゲーションメニューブロックを使用すると、SeedProdランディングページやウェブサイトテンプレートにナビゲーションメニューを組み込むことができます。ビルダー内で直接シンプルなカスタムメニューを作成することも、サイトの既存のWordPressメニューを接続することも可能です。
このブロックは、水平および垂直レイアウト、折りたたみ可能なモバイルメニューのトグル、完全なスタイリング制御を備えたサブメニュー、および項目ごとのリンク設定をサポートしており、ヘッダー、フッター、サイドバー向けの柔軟なナビゲーションソリューションとなります。
ページにナビゲーションメニューブロックを追加する
ナビゲーションメニューブロックをSeedProdページに追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、ナビゲーションメニューブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、ナビゲーションメニューブロックをクリックして設定を開きます。コンテンツタブの設定セクションで、メニュータイプを選択することから始めます。
メニュータイプ:
- シンプル: アイテムを手動で追加して、SeedProd内で直接カスタムメニューを構築します。各アイテムはドラッグして並べ替えたり、複製したり、削除したりできます。いずれかのアイテムをクリックして展開し、テキスト（表示されるリンクラベル）、URLリンク（宛先URL）、新しいウィンドウで開く、ノーフォローオプションを設定します。+新しいアイテムを追加をクリックして、メニューにさらにリンクを追加します。
- WordPressメニュー: 既存のWordPressメニューをこのブロックに接続します。サイトに登録されているメニューのドロップダウンリストからメニューを選択します。必要に応じてメニューを作成または管理するために、WordPressメニュー画面へのリンクが提供されています。
設定：
- フォントサイズ: メニューアイテムリンクのフォントサイズを10〜72pxに設定します。
- 間隔: メニューアイテム間の間隔を1〜100pxに設定します。
- 区切り文字: メニューアイテム間の視覚的な区切り文字として使用する文字または文字列を入力します（例:
|）。 - 配置: メニューの水平方向の配置を左、中央、右に設定します。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- モバイルメニュー: モバイルデバイスで折りたたみ可能なハンバーガーメニューを有効にするにはオンに切り替えます。これにより、小さい画面ではフルメニューがコンパクトなトグルボタンに置き換えられます。
モバイルメニューのトグルは、モバイルデバイスにハンバーガーメニューアイコンを表示します。タップすると展開してフルメニューが表示されます。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、ナビゲーションメニューブロックのタイポグラフィ、色、サブメニューのスタイル、間隔をカスタマイズできます。
高度なスタイル:
- リストレイアウト: メニューアイテムを垂直（積み重ね）または水平（横並び）のどちらのレイアウトで表示するかを選択します。
- タイポグラフィ: メニューアイテムリンクのフォントファミリー、フォントの太さ、サイズ、行の高さ、文字間隔、テキスト変換を微調整します。デスクトップ、タブレット、モバイルのデバイスごとの値に対応しています。
- アクティブテキストカラー: 現在アクティブなメニュー項目のリンクの色を設定します。
- ホバーテキストカラー: メニュー項目のリンクにマウスを合わせたときのテキストカラーを設定します。
- テキストシャドウ: メニューリンクのテキストに影を追加します。なし、ヘアライン、小、中、大、特大、超特大から選択します。
サブメニュー:
- サブメニューの背景色: ドロップダウンサブメニューパネルの背景色を設定します。
- サブメニューテキストカラー: サブメニューリンクのテキストカラーを設定します。
- サブメニューホバーカラー: サブメニューリンクのホバーテキストカラーを設定します。
- サブメニューの角丸: サブメニューパネルの角の丸みを1pxから50pxまで設定します。
- サブメニューの行の高さ: サブメニュー項目の行の高さを1pxから60pxまで設定します。
- サブメニューの境界線の幅: サブメニューパネルの境界線の幅を1pxから60pxまで設定します。
- サブメニューの境界線の色: サブメニューパネルの境界線の色を設定します。
- サブメニューの影: サブメニューパネルにドロップシャドウを追加します。
- サブメニューのパディング: サブメニューパネルの内側の余白（上、右、下、左）を設定します。
間隔：
- マージン: ナビゲーションメニューブロックの外側の余白（上、右、下、左）を制御します。これにより、メニューとページ上の周囲の要素との間のスペースが決まります。
- パディング: ナビゲーションメニューブロックの内側の余白（上、右、下、左）を調整します。これにより、メニューリンクとブロックの端の間に適切なスペースが生まれます。
属性:
- CSS ID: ナビゲーションメニューブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面でナビゲーションメニューブロックを非表示にします。
- タブレットで非表示: タブレットデバイスでナビゲーションメニューブロックを非表示にします。
- モバイルで非表示: モバイルデバイスでナビゲーションメニューブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: ナビゲーションメニューブロックがビューにスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。
ステップ4：変更を保存
ナビゲーションメニューブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ナビゲーションメニューブロックをページに追加しました！適切に配置されたナビゲーションメニューは、訪問者が探しているものをすばやく見つけるのに役立ち、サイトへのエンゲージメントを維持します。簡単なメニュータイプを使用してカスタムリンクリストをすばやく作成するか、WordPressメニューを接続してサイトの他の部分とのナビゲーションの一貫性を保ちます。