ナビゲーションメニューブロックを使用すると、SeedProdのランディングページやウェブサイトテンプレートにナビゲーションメニューを組み込むことができます。ビルダー内で直接シンプルなカスタムメニューを作成する柔軟性があるほか、サイト内の既存のWordPressメニューを接続することも可能です。
このブロックは水平・垂直レイアウト、折りたたみ可能なモバイルメニューの切り替え、完全なスタイル制御が可能なサブメニュー、アイテムごとのリンク設定をサポートしており、ヘッダー、フッター、サイドバー向けの柔軟なナビゲーションソリューションを実現します。
ページへのナビゲーションメニューブロックの追加
SeedProdページにナビゲーションメニューブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロックで、ナビゲーションメニューブロックをページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、ナビゲーションメニューブロックをクリックして設定を開きます。コンテンツタブの「設定」セクションで、まずメニュータイプを選択してください。
メニュータイプ：
- シンプル：SeedProd内で直接カスタムメニューを作成し、項目を手動で追加します。各項目はドラッグで並べ替え、複製、削除が可能です。項目をクリックすると設定が展開され、テキスト（表示されるリンクラベル）、URLリンク（リンク先URL）、新規ウィンドウで開く、ノーフォローオプションを設定できます。+ 新規項目を追加をクリックすると、メニューにさらにリンクを追加できます。
- WordPressメニュー:既存のWordPressメニューをこのブロックに接続します。サイトに登録されているメニューのドロップダウンリストからメニューを選択してください。必要に応じてメニューを作成または管理するためのWordPressメニュー画面へのリンクが提供されています。
設定:
- フォントサイズ：メニュー項目のリンクのフォントサイズを10pxから72pxまで設定します。
- スペースの間隔：メニュー項目間の間隔を1～100pxで設定します。
- 区切り線: メニュー項目間の視覚的な区切りとして使用する文字または文字列を入力してください（例：
|). - 配置:メニューの水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルごとに異なる値をサポートします。
- モバイルメニュー：オンにすると、モバイル端末で折りたたみ可能なハンバーガーメニューを有効にし、小さな画面ではフルメニューをコンパクトなトグルボタンに置き換えます。
モバイルメニューのトグルは、モバイル端末上でハンバーガーメニューアイコンを表示します。タップすると展開され、フルメニューが表示されます。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、ナビゲーションメニューブロックのタイポグラフィ、色、サブメニューのスタイル、および間隔をカスタマイズできます。
高度なスタイル:
- リストレイアウト：メニュー項目を縦方向（積み重ね）または横方向（並列）で表示するかを選択します。
- タイポグラフィ：メニュー項目のリンクに対して、フォントファミリー、フォントの太さ、サイズ、行間、文字間隔、テキスト変換を微調整します。デスクトップ、タブレット、モバイルごとにデバイス単位の値をサポートします。
- アクティブテキストの色:現在アクティブなメニュー項目リンクの色を設定します。
- ホバー時のテキスト色:メニュー項目のリンクにマウスを乗せた際の表示色を設定します。
- テキストシャドウ：メニューリンクテキストに影を追加します。「なし」「ヘアライン」「小」「中」「大」「特大」「2倍特大」から選択してください。
サブメニュー：
- サブメニュー背景色：ドロップダウンサブメニューパネルの背景色を設定します。
- サブメニューのテキスト色:サブメニューリンクのテキスト色を設定します。
- サブメニューホバーカラー:サブメニューリンクのホバー時のテキスト色を設定します。
- サブメニューの角丸半径:サブメニューパネルの角丸半径を1～50pxの範囲で設定します。
- サブメニュー行の高さ:サブメニュー項目の行の高さを1～60pxの範囲で設定します。
- サブメニュー枠線の幅:サブメニューパネルの枠線の幅を1～60ピクセルで設定します。
- サブメニューの枠線の色:サブメニューパネルの枠線の色を設定します。
- サブメニューの影:サブメニューパネルにドロップシャドウを追加します。
- サブメニューのパディング：サブメニューパネルの内側のパディングを設定します（上、右、下、左）。
スペース:
- マージン：ナビゲーションメニューブロックの周囲の余白（上、右、下、左）を制御します。これにより、メニューとページ上の周囲の要素との間に表示されるスペースが決まります。
- パディング：ナビゲーションメニューブロック内の内側の間隔（上、右、下、左）を調整します。これにより、メニューリンクとブロックの端の間に余裕が生まれます。
属性：
- CSS ID:ナビゲーションメニューブロック用に自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面でナビゲーションメニューブロックを非表示にします。
- タブレットで非表示:タブレット端末ではナビゲーションメニューブロックを非表示にします。
- モバイルで非表示:モバイル端末ではナビゲーションメニューブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション：ナビゲーションメニューブロックが画面にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど、多数のオプションが用意されています。
ステップ4: 変更を保存する
ナビゲーションメニューブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにナビゲーションメニューブロックを追加できました！適切に配置されたナビゲーションメニューは、訪問者が目的の情報を素早く見つけられるようにし、サイトへの関心を維持します。簡易メニュータイプでカスタムリンクリストを簡単に作成するか、WordPressメニューを連携させてサイト全体のナビゲーションを統一しましょう。