コレクションリスト

コレクションリストの追加方法

コレクションアイテムを持つ1つ以上のコレクションがある限り、サイトの静的ページまたはコレクションページにコレクションリストを追加できます。コレクションリストを追加するには：

1. Add panelを開きます。
2. Collection listをサイトページにドラッグアンドドロップします。

また、クイック検索を使用してコレクションリストを追加することもできます：MacではCommand + E、WindowsではControl + Eを使用します。

コレクションリストをコレクションに接続する方法

コレクションリストは、コレクションに接続されるまで役に立ちません。コレクションリストをコレクションに接続するには

1. Collection listをダブルクリックしてコレクションリストの設定を開きます。
2. Sourceから接続したいコレクションを選択します（例：著者、ブログ投稿、クライアントなど）。

注意： コレクションリストをコレクションに接続すると、コレクションリストのアイテムタグにコレクションアイテムの名前が表示されません（コレクションを以前にCMSパネルで開いていない場合）。この問題を軽減するために、コレクションリストをコレクションに接続する前に、CMSパネルでコレクションを開いてください。

コレクションリストのデザイン方法

コレクションをコレクションリストに接続すると、コレクションリストにはそのコレクションのすべてのアイテムが空のブロックとして表示されます。コレクションリストに要素を追加し、それらの要素をコレクションフィールドに接続できます。その後、これらの要素はコレクションのデータから自動的にデータが埋められます。

静的および動的要素の追加

空のコレクションリストブロックの1つに要素を追加すると、その要素は各コレクションリストブロックに複製されます。これを「静的」コンテンツと呼びます。つまり、コレクションから取得されないコンテンツです。

要素をコレクションフィールドに接続すると、その要素のデフォルトコンテンツ（例：見出し要素の「Heading」など）がコレクションアイテムごとのコンテンツで自動的に置き換えられます。これは、コンテンツがCMSコレクションから取得されるため、「動的」コンテンツとなります。

静的要素はキャンバス上で青い輪郭を持ち、動的要素（CMSからデータを持っている要素）は紫色の輪郭を持っています。

要素をコレクションフィールドに接続

静的要素をコレクションフィールドに接続して、その要素のコンテンツを動的に更新できます。要素をコレクションフィールドに接続するには：

1. Add panelに移動します。
2. コレクションリストにelement（例：見出し、段落など）を追加します。
3. コレクションリストで要素を選択します。
4. Element settingsに移動します。
5. “Get text from Blog postというラベルのチェックボックスをオンにします（要素とコレクションの種類によって、フィールドのタイプとコレクション名が異なる場合があります）。
6. Select fieldドロップダウンを開きます。
7. コンテンツを取得したいCollection fieldを選択します。

コレクションフィールドから要素を切断

要素をコレクションフィールドから切断することもできます：

1. コレクションリスト内の要素を選択します。
2. Element settingsに移動します。
3. “Get text from Blog posts”ラベルのチェックボックスをオフにします（要素とコレクションの種類によって、フィールドのタイプとコレクション名が異なる場合があります）。

動的要素にスタイルを適用

コレクションリスト内の任意の要素（静的または動的）にスタイルを追加すると、そのスタイルがそのコレクションリスト内のすべてのコレクションアイテムに適用されます。例えば、見出しをコレクションフィールドに接続し、見出しに緑色のフォントカラーを適用した場合、そのコレクションリスト内のすべての見出しに同じ緑色のフォントカラーが適用されます。

また、Dynamic style settingsをコレクションリストに適用することもできます。これにより、コレクションアイテムのカラーフィールドやイメージフィールドから色や背景画像を取得できます。

コレクション・リストの構造

コレクションリストラッパー（Collection list wrapper）

デフォルトでは、コレクションリストラッパーには Collection listとEmpty stateが含まれます。ページネーションが有効になっている場合、paginationラッパーも含まれます。ラッパーを複製して複数のページネーションラッパーを追加できます。

コレクションリスト（Collection list)

コレクションリストラッパーには、コレクションリストのコレクションアイテムが含まれています。ラッパーに他の要素を追加することはできません。

コレクションアイテム（Collection item）

コレクションアイテムには、コレクションリストに追加した実際のコンテンツが含まれます。ここに追加した要素は、リスト内のすべてのアイテムに表示されます。これらの要素は、コレクションフィールドに接続するか、 conditional visibilityを適用するまで静的です。これらの変更により、それらは動的な要素に変わります。動的な要素は、ナビゲータで紫色のアイコンで示されます。

空の状態（Empty state）

空の状態は、リストに表示するアイテムがない場合にコレクションリストを置き換えます。デフォルトでは、灰色の背景があり、「アイテムが見つかりません（No items found.）」というテキストブロックが含まれています。スタイルを変更し、カスタムの空の状態を作成するために、スタイリングを変更したり、要素を追加または置き換えたりできます。

ページネーション（Pagination）

ページネーションには2つのリンクブロックが含まれています：previousボタンとnextボタン。それぞれをスタイル設定してカスタマイズできます。

コレクションリストの設定方法

コレクションリスト内に表示されるコンテンツとコレクションリストのレイアウトをコレクションリストの設定で制御できます。コレクションリストの設定にアクセスするには：

1. キャンバス上でCollection list wrapperまたはCollection listを選択します。
2. Element settings panelに移動します。

コレクション（Collection）

ここでは、コレクションリストに接続するコレクションを選択できます。コレクションリスト内の要素が現在コレクションに接続されていないことを確認してから、コレクションリストに接続する異なるコレクションを選択する必要があります。

UIステート（UI State）

この設定を使用すると、コレクションリストのアイテムステートと空ステートの間を切り替えて両方のステートを編集できます。

この設定を変更しても、ライブサイトのコレクションリストのステートは変更されません。コレクションリストの実際のステートはそのアイテムによって決まります。emptyステートは、コレクション内にアイテムがない場合や、アイテムがフィルタリングされた場合にのみ表示されます。

レイアウト（Layout)

コレクションリストを垂直に積み重ねたままにするか、列にレイアウトを変更できます。また、コレクションリストにグリッドを適用して、ダイナミックなグリッドを作成することもできます。この場合、コレクションリストのレイアウト設定を全幅に設定したままにしておく必要があります。

プロのヒント: コレクションリストの等しい高さのレイアウトを構築するには、フレックスボックスを使用することをお勧めします。各コレクションアイテムのコンテンツは異なる場合があり、フレックスボックス以外のカラムレイアウトでは整列がずれることがあります。

フィルタ（Filters）

フィルタを追加すると、特定のフィルタ条件に一致するコレクションアイテムのみを表示できます。

並べ替え順序（Sort order）

Sort orderでは、特定のフィールドに基づいてコレクションリストをソートできます。

ページネート アイテム（Paginate items）

並べ替え順序を使用すると、特定のフィールドに基づいてコレクションリストを並べ替えることができます。

アイテム数の制限（Limit items）

This option lets you define how many items to show in a Collection list and which item starts the Collection list. For example, you can have your list start at item 5 and show only 3 items. Then, your list will show items 5, 6, and 7. Learn more about limiting Collection items.

このオプションを使用すると、コレクションリストに表示するアイテム数と、コレクションリストを開始するアイテムを定義できます。例えば、リストをアイテム5から開始し、3つのアイテムのみを表示するように設定することができます。その場合、リストにはアイテム5、6、および7が表示されます

注意: コレクションリストごとに最大100個のアイテム、ページごとに最大20個のコレクションリストの制限がありますが、ページネーションが有効になっている場合はこれらの制限を超えるアイテムを表示できます。

コレクションリスト内のコンポーネント

コレクションリストアイテム内にコンポーネントを追加または作成できます。その後、コンポーネントのプロパティにコレクションフィールドを接続し、コンポーネント内で動的なデータを使用できます。