Skip to content

リンクメニュー (Link Menu)

リンクメニューパーツは、カスタムリンクのリストを作成して表示するためのパーツです。特集ページ内の特定セクションへのナビゲーションや、関連する外部ページへのリンク集として使用できます。

設定タブ

リンクメニューパーツを選択すると、設定エリアに以下のタブが表示されます。

  • コンテンツ: メニューに表示するリンクリストを管理します。
  • スタイル: メニューのレイアウト(縦/横)、各リンクの見た目、背景、余白などを設定します。
  • メニュー: このパーツ自体をモバイルメニューや追従メニューに含めるかどうかを設定します。

コンテンツ設定

「コンテンツ」タブでは、メニュー項目(各リンク)を追加・編集・管理します。

リンクメニュー コンテンツタブ (コンテンツタブ全体のスクリーンショット - リンクリスト管理UI)

  1. リンク項目の追加: 「+ リンクを追加」ボタンをクリックすると、新しいリンク項目がリストに追加されます。
  2. 表示テキスト: 各リンク項目に、メニュー上で表示されるテキスト(例: 「トップページへ」「商品一覧」)を入力します。
  3. リンク URL: 対応するリンク先のURLを入力します。内部リンク(同じサイト内のページ)も外部リンクも設定可能です。
  4. ターゲット (Target): (※もしあれば) リンクをクリックした際に、ページを新しいタブ (_blank) で開くか、同じタブ (_self) で開くかを選択します。
  5. アイコン (Icon): (※もしあれば) 各リンクテキストの前に表示するアイコンを選択します。
  6. 並び替え: リスト内のリンク項目は、ドラッグ&ドロップで表示順序を変更できます。
  7. 削除: 不要になったリンク項目は、右端の「×」ボタンなどで削除します。

スタイル設定

「スタイル」タブでは、リンクメニュー全体の見た目やレイアウトを調整します。

リンクメニュー スタイルタブ (スタイルタブ全体のスクリーンショット)

  • レイアウト (Layout) / 方向 (Direction): メニュー項目の並び方(縦方向リスト / 横方向リスト)を選択します。
  • 配置 (Alignment): メニュー項目全体の配置(左揃え、中央揃え、右揃え、均等割り付け)を設定します。
  • 区切り線 (Divider): (※もしあれば) 各メニュー項目の間に区切り線を表示するかどうか、線の種類や色を設定します。
  • リンクスタイル: ナビゲーションリンクの通常時・ホバー時・アクティブ時の文字色、背景色、装飾(下線など)を設定します。
  • 背景 (Background): パーツ全体の背景色や背景画像を設定します。
  • パディング・マージン (Padding/Margin): パーツの内側・外側の余白を調整します。
  • 枠線 (Border): パーツに枠線を追加します。
  • … その他、フォントサイズなどのスタイルオプションがあれば記載。

メニュー設定

「メニュー」タブでは、このリンクメニューパーツをモバイルメニューや追従メニューに含めるかどうかを設定します。

設定方法の詳細は「6. メニュー設定(モバイル・追従)」ガイドを参照してください。


これでリンクメニューパーツの設定は完了です。