【日本語版Webflow University】 CMS解説_スイッチフィールド

2022-12-23

Webflow 基礎編

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

引用元：https://university.webflow.com/lesson/switch-field

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

‍

スイッチフィールドは、主にフィルタリングツールとして使用されるコレクションフィールドです。スイッチは、YesもしくはNoの2つの値のいずれかを持つことができるフィールドタイプです。

‍

コラボレーターは、スイッチのオン・オフを切り替えて、例えば、ブログ記事が「特集」であるかどうかを指定することができます。スイッチフィールドは、コレクションリストのフィルタリングに使用することができます。また、スイッチを使ってリストをソートすることもできます。また、スイッチフィールドの最も良い使い方の1つに、コレクションリストやコレクションページの要素の表示/非表示を制御することがあります。

‍

一般的な使用方法

非営利団体だけを表示したい場合に「Non-profit?」スイッチを作成します
注目の記事だけを表示したい場合に「Featured?」スイッチを作成します
特定のアイテムをサイトに表示する準備が整うまで非表示にしたい場合に「Hidden?」スイッチを作成します
選択したアイテムにのみ「セール中」ラベルを表示したい場合に「Is On Sale?」スイッチを作成します

‍

レッスン概要

スイッチフィールドの作成
スイッチの値の設定
スイッチフィールドを使用したコレクションリストのフィルタリング
スイッチフィールドを使用したコレクションリストのソート
スイッチフィールドを使用して表示/非表示条件を設定

‍

スイッチフィールドの作成

スイッチフィールドは、新規または既存のコレクションに追加することができます。「Collection settings」で「＋Add New Field」をクリックし、「Switch」フィールドを選択します。

一言メモ

スイッチのデフォルト値は「No」です。したがって、スイッチを作成するときは、ほとんどの場合「No」が答えとなるような質問をラベル付けるようにしてください。つまり、少数の「Yes」の答えに対してのみ、スイッチをオンにすることになります。たとえば、100件あるブログ記事のうち、数件だけを非表示にしたい場合は、「show」ではなく「hidden」というスイッチを作成するようにしましょう。

‍

スイッチの値の設定

CMSでデザイナー画面から新しいアイテムを作成する場合でも、エディターから作成する場合でも、YesかNoに切り替えるだけで、スイッチのON/OFFを設定することができます。

‍

スイッチフィールドを使用したコレクションリストのフィルタリング

特集記事のコレクションリストのように、特定のスイッチがYesに設定されている項目のみを表示するコレクションリストを作成したい場合、そのようなフィルタを作成することで実現できます。

フィルタリングしたいコレクションリストを選択します
要素設定パネル（ショートカットキー D）に移動します
「Collection List Settings」下にある「Filter」に条件を追加します
最初のドロップダウンでスイッチフィールドを選択します
2番目のドロップダウンで「Is On」を選択します
「Save」をクリックします

フィールドと値で使用できるフィルタルールは以下の通りです。

Is On - このスイッチフィールドのスイッチをオンに設定したCMSアイテムを指定します

Is Off- このスイッチフィールドのスイッチをオフのままにしているCMSアイテムを指定します

‍

スイッチフィールドを使用したコレクションリストのソート

コレクションリストでコレクションアイテムを除外したくないが、特定のアイテムを最初に表示し、その後に重要度の低いアイテムを表示したい場合があります。そこで、フィルタを使う代わりに、スイッチフィールドを使ってソート順を指定することができます。

フィルタリングしたいコレクションリストを選択します
要素設定パネル（ショートカットキー D）に移動します
「Collection List Settings」で「Sort Order」を追加します
最初のドロップダウンでスイッチフィールドを選択します
2番目のドロップダウンでソート順序を選択します（Is Off First（オフが先）または Is On First（オンが先）
「Save」をクリックします

スイッチフィールドを使用して表示/非表示条件を設定

Switchを最大限に活用するために、条件付き表示機能を使って様々なデザインを実現することができます。

以下はその例です。

特定のラベルを表示

注目の商品、セール中、在庫切れ、などのラベルがある場合。条件付き表示を使って、特定のスイッチが「Yes」に設定されているアイテムにのみ表示させることができます。

ラベルを選択します
要素設定パネル（ショートカットキー D）へ移動
「Conditionan Visiblity」下に「条件」を追加します。
最初のドロップダウンでスイッチフィールドを選択します
2番目のドロップダウンで「Is On」を選択します。
「Save」をクリックします。

セクション全体を表示

コレクションページのセクションに設定された条件に基づいて、それぞれ全く異なるレイアウトを持つことができるユニークなコレクションページを作成することができます。

例えば、コレクションページにコンタクトフォームセクションを作成することができます。そして、コレクションに「コンタクトフォームを表示」というスイッチを作成することができます。ここで、このセクションに表示/非表示条件を設定すると、コンタクトフォームスイッチが「Yes」に設定されたコレクションアイテムのコレクションページにのみ、コンタクトフォームが表示されるようになります。

このような条件を作成する手順は次の通りです。