コレクションリストをコレクションにリンクすると、そのコレクションの最初の100個の要素が表示されます。ただし、 どれの フィルターを実装することで表示する要素の数を増やすことができます。ページ区切りを有効にすると100以上の要素を表示できます。要素をフィルターする機能は、 コレクションリストの設定 以内 要素設定パネル(D).
このチュートリアルでは
- リストにフィルターを組み込む
- フィルターを消去
- フィルタリングの例
- 限定特集アイテムを表示
- 現在の要素を非表示にする
- 関連コンテンツを表示する
このチュートリアルでは、デザイナーでフィルターされたコレクション リストを作成する方法について説明します。ライブ Web サイトでのリアルタイムのフィルター処理/並べ替え (ファセット ナビゲーション) はまだ組み込み機能ではありません。 この機能を支持する.
フィルターを組み込む

フィルターを使用すると、生成したフィルターに一致するコレクション リスト内の特定のコレクション要素を表示できます。コレクション フィールド タイプごとに、多数のフィルター規則から選択できます。フィルターを生成するには、次の手順を実行します。
- フィルタリングするコレクションリストを選択します
- 進む 設定パネル(D)
- 統合する フィルター 下 コレクションリストの設定 プラス記号(+)を押す
- 最初のドロップダウンでフィルタリングするフィールドを選択します
- 2番目のフィールドでルールを選択します
- 必要に応じて値を定義する
- プレス 保存
フィルターは必要な数だけ含めることができます。フィルターは AND 演算子を使用して結合されます。
理解することが必須
同じコレクション フィールドに複数のフィールドを使用することはできません。
フィルターを消去
フィルターの横にあるゴミ箱アイコンを選択すると、適用したフィルターを削除できます。

注目アイテムのみを展示する [フィルター例]
ホームページでハイライトされたブログ投稿のみを表示したいとします。これを実現するには、次の手順に従います。
- 「ブログ投稿」コレクションリストを組み込み、作成し、スタイル設定する
- 追加 フィルター の中に 設定パネル
- を選択 「注目」スイッチフィールド 最初のドロップダウンから
- 選ぶ オンです 2番目のドロップダウン
- 選択する 保存

続きを読む:スイッチフィールド
現在の要素を非表示にする [フィルターの例]
ブログを所有していて、各ブログ投稿ページに他のブログ投稿のリストを表示したい場合は、フィルターを使用して現在のブログ投稿をリストから除外できます。現在のコレクション要素 (この例ではブログ投稿) をブロックするには、次の手順を実行します。
- 「ブログ投稿」コレクションリストを統合、作成、スタイル設定する
- 挿入 フィルター の中に 設定パネル
- 最初のドロップダウンからコレクション名を選択します
- 選ぶ ではありません 2番目のドロップダウン
- 3番目のフィールドには「現在のコレクションアイテム」が表示されます。
- 選択する 保存

続きを読む: コレクションページ
関連コンテンツを展示する [フィルターの例]
ある著者が書いたブログ投稿をすべて著者のページに表示したいとします。フィルターを使用して、この著者を参照するブログ投稿だけを表示できます。
- 「ブログ投稿」コレクションリストを組み込み、作成し、スタイル設定する
- 追加 フィルター
- 最初のドロップダウンから著者の参照フィールドを選択します
- 選ぶ 等しい 2番目のドロップダウン
- 3番目で「現在の著者」を選択します
- クリック 保存
今後、各著者ページには、その著者を参照しているブログ投稿のリストが表示されます。 制限 特定の数の関連コンテンツのみを表示したい場合は、このリストを使用してください。
![64b94addbbef9ab1bccecedc_60a5967b24baed9e6ee1a371_フィルターコレクションリスト_5 [フィルターの追加] パネルには、3 つのフィールドに [著者が現在のブログ投稿の著者と等しい] 設定が含まれています。また、[x] 閉じるボタンと [保存] ボタンもあります。](https://webflow-s3.tenten.co/2024/04/64b94addbbef9ab1bccecedc_60a5967b24baed9e6ee1a371_filter-collection-lists_5.png)
続きを読む
- 参照フィールド
- コレクションリストの制限
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日