【日本語版Webflow University】 コレクションリストのフィルタ機能について

この投稿はWebflow社が提供する「Filter Collection lists」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/filter-collection-lists

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

‍

WebflowのCMS機能を使えば、動的コンテンツの一覧をノーコードで簡単に作成できます。一覧には最大で100アイテムを表示させることができますが、フィルタ機能を使用することで、表示するアイテムの種類を絞ることもできます。

この投稿では、要素設定パネルから設定できる、コレクションリストのフィルタ機能について解説します。

‍

レッスン概要

1. コレクションリストにフィルタを追加する方法
2. フィルタの削除方法
3. フィルタの使用例：特集記事のみ表示する
4. フィルタの使用例：カレントのアイテムを隠す
5. フィルタの使用例：関連コンテンツを表示する

一言メモ

この投稿では、コレクションリスト（Webflow CMS機能を用いた動的一覧コンテンツ）に表示させるアイテムを開発者があらかじめ制御しておくための方法を解説しています。一方閲覧者が任意の条件で一覧を絞り込むフィルタリング機能はWebflowの標準機能では対応できません。別途構築する必要がありますので注意してください。

‍

コレクションリストにフィルタを追加する方法

フィルタを使用すると、作成した条件に一致する特定のコレクションアイテムだけをコレクションリストに表示することができます。コレクションアイテム内の各種フィールドを参照して、様々なフィルタ条件を作成することができます。

フィルタを作成する方法は次の通りです。

1. フィルタリングしたいコレクションリスト要素を選択します
2. 設定パネル(ショートカット D)に移動します
3. プラスマークをクリックして、コレクションリストにフィルタを追加します
4. 1つ目のドロップダウンでフィルタリングで参照するコレクションアイテム内のフィールドを選択します
5. 2つ目のドロップダウンで絞り込みルールを選択します
6. 必要に応じて、ルールの値を指定します
7. 「Save」をクリックします。

フィルタはいくつでも追加可能です。

また、複数のフィルタ条件をand条件で適用するか、or条件で適用するかを選択することができます。

「All Filters」＝and条件

「Any Filters」＝or条件

‍

フィルタ削除方法

適用されたフィルタは、フィルタの横にあるゴミ箱のアイコンをクリックすることで削除できます。

‍

フィルタの使用例：特集記事のみ表示する

例えば、ブログのトップページで特集記事だけを表示させたいとします。その場合は次の手順で実装可能です。

1. ブログ記事用のコレクションリストをメインキャンバスに追加し、任意にスタイルを設定します
2. コレクションリストの要素設定パネルでフィルタを追加します
3. 最初のドロップダウンから「Featured?」スイッチフィールドを選択します
4. 2番目のドロップダウンで「On」を選択します
5. 「Save」をクリックします

一言メモ

ドロップダウンから 「Featured?」スイッチフィールドを選択するためには、ブログ記事用のCMSコレクションにあらかじめスイッチタイプで「Featured?」フィールドを作成しておく必要があります。

‍

フィルタの使用例：現在のアイテムを隠す方法

例えば、ブログの記事詳細ページでほかのブログ記事の一覧を表示させたいとします。その場合は次の手順で実装可能です。

1. ブログ記事用のコレクションリストをメインキャンバスに追加し、任意にスタイルを設定します
2. コレクションリストの要素設定パネルでフィルタを追加します
3. 最初のドロップダウンから記事のCMSコレクションを選択します
4. 2番目のドロップダウンで「Is not set」を選択します
5. 3番目のフィルタ条件には自動的に「Current ～」が表示されています。（～は3で選択したコレクション名）
6. 「Save」をクリックします

‍

フィルタの使用例：関連コンテンツを表示する方法

例えば、ブログ一覧に表示する記事を任意のカテゴリによるものだけに絞り込みたいとします。その場合は次の手順で実装可能です。

1. ブログ記事用のコレクションリストをメインキャンバスに追加し、任意にスタイルを設定します
2. コレクションリストの要素設定パネルでフィルタを追加します
3. 最初のドロップダウンからカテゴリを選択します（Reference field）
4. 2番目のドロップダウンで「Equals」を選択します
5. 3番目のフィルタ条件でカテゴリ名を指定します
6. 「Save」をクリックします

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。