Masonryレイアウトと特別メニュー

高さの異なるブロックを列にきれいに積み重ねたり、カテゴリーの一覧とカテゴリーごとのパネルを表示したりします。

ハウツーガイド Pro Navigation 5 分で読めます

通常のメガメニューでは、各ブロックがそれぞれ1つの列を使うため、短いリンクリストの下には余白ができます。Masonryレイアウトは、複数のブロックを1つの列にまとめて積み重ねます。たとえば、2つの短いブランドリストで最初の列を共有できます。

テンプレート

どちらも、テンプレートを選択 の 特別メニュー グループにあります。

Masonryレイアウト: 4つの列（項目グループ ブロック）で、各列の中にリンクリストが積み重ねられます。
特別メニュー: 左側にカテゴリーの一覧、右側に各カテゴリー専用のリンクリストと画像のパネルが表示されます。大規模なマーケットプレイスのメニューのような構成です。

テンプレートを追加する

エディターの要素ツリーで、トップレベルの項目の下にある サブメニューを追加 をクリックします。特別メニュー (1) にカーソルを合わせ、モザイクレイアウト (2) の選択をクリックします。

(1) 特別メニューグループにカーソルを合わせる、(2) Masonryレイアウトを選ぶ
サンプルのコンテンツを編集する

テンプレートでは、幅25%の 項目グループ ブロックが4つ追加され、中にリンクリストが入っています。各見出しやリンクにカーソルを合わせ、項目を編集 をクリックして、タイトル と リンク を変更します。
列にブロックを追加または削除する

グループ内で ブロックを追加 をクリックすると、リンクリストや画像など、別のブロックを積み重ねられます。削除するには、ブロックにカーソルを合わせて 項目を削除 をクリックします。
保存して公開する

保存、続いて公開をクリックします。

空のメガメニューを追加する

サブメニューを追加 をクリックし、メガメニュー にカーソルを合わせて空白の選択をクリックします。既存のメガメニューでも構いません。
列ごとに項目グループを追加する

ブロックを追加 をクリックし、マルチブロック を選んで 項目グループ を選択します。各グループが1つの列になります。要素ツリーでは、項目グループ（Masonryグリッドレイアウト） と表示されます。

(1) タブを選ぶ、(2) レイアウトにカーソルを合わせて「選択」をクリックする。
グループの幅を設定する

新しいグループの幅は50%です。列が1行に収まるように、各グループの幅を設定します。たとえば、4列なら25%、3列なら33.33%です。
各グループにコンテンツを入れる

各グループ内で ブロックを追加 をクリックし、その列のブロックを追加します。内側の各ブロックの幅を100%にして、横に並ばずに積み重なるようにします。
保存して公開する

保存、続いて公開をクリックします。

テンプレートを追加する

サブメニューを追加 をクリックし、特別メニュー にカーソルを合わせて、特別メニュー テンプレートの選択をクリックします。

(1) 特別メニューグループにカーソルを合わせる、(2) Masonryレイアウトを選ぶ
カテゴリーとパネルを編集する

左側の各カテゴリーはタブです。名前を変更してから、ブロックを追加 を使ってパネルを作成します。タブメニューをご覧ください。
保存して公開する

保存、続いて公開をクリックします。

どちらのテンプレートもメガメニューのパネルとして開くため、親項目の サブメニュー セクションで、パネルの幅、配置、背景を設定します。メガメニューのパネルレイアウトをご覧ください。

ブロックが積み重ならず、横に並んでしまう

要素ツリーで、内側のブロックが 項目グループ の中にあること、また幅が100%であることを確認してください。

グループが2行目に折り返される

グループの幅の合計が100%を超えています。1行に収まるよう、幅を小さくしてください。

このページは役に立ちましたか？