【日本語版Webflow University】 CMS解説_プレーンテキストの概要

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

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

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

‍

‍

Webflow CMSでコレクションフィールドの1種として使用できるプレーンテキスト（Plain text）は、見出し、インラインスタイル、インラインメディアなどの書式設定を必要としない基本的なテキストとして使用できます。

‍

プレーンテキストフィールドは、コレクションアイテムで使用する短いテキストブロックまたは短いパラグラフ用のフィールドです。プレーンテキストフィールドを使用して、コレクションリストをフィルタリングしたりソートしたり、コレクションページまたはリストで表示/非表示切り替えることもできます。

CMSの複数行プレーンテキストフィールドでは、1行のプレーンテキストフィールドに収まらないテキストを複数行（改行可能なテキスト）にわたって入力し、保存、編集することが容易にできます。ブラウザ上では、複数行テキストもプレーンテキストとして、1つの要素に内包されて表示されます。

CMSのコンテンツにインラインスタイル（改行を含む）を追加する場合は、プレーンテキストではなくリッチテキストフィールドを使用してください。

‍

一般的な使用方法

• 書式を必要としない短文テキスト
• 名前やタイトル
• チームメンバーの経歴
• 製品の簡単な説明
• イベントの簡単な説明
• ブログや記事のサマリー

プレーンテキストは、コラボレーターが行える書式設定を制限したい場合に効果的です。リッチテキストとは異なり、プレーンテキストではインラインでのスタイル指定ができないため、テキストの大きさが変わったり、メディアが入ったりしません。

‍

レッスン概要

1. プレーンテキストフィールドの作成
2. プレーンテキストの表示方法
3. プレーンテキストフィールドを使用したコレクションリストのフィルタリング
4. プレーンテキストフィールドを使用したコレクションリストのソート
5. プレーンテキストフィールドで表示/非表示を制御

プレーンテキストフィールドの作成

プレーンテキストフィールドは、新規または既存のコレクションに追加することができます。コレクション設定で、「＋Add New Field」をクリックし、「Plain Text」フィールドを選択します。

フィールドを保存する前に、テキストフィールドの種類を指定できます。また、このフィールドに許可される最小文字数、最大文字数を設定することができます。また、他のフィールドと同様に、ヘルプテキストを追加たり、フィールドが必須かどうかを指定することができます。

‍

テキストフィールドの種類

プレーンテキストフィールドを使用すると、短いテキストブロックまたは1つの短い段落をコレクションアイテムに追加することができます。テキストフィールドのタイプを設定することで、テキストフィールドのタイプと機能を指定することができます。

• 「Single-line」（短いテキスト用）
• 「Multiple-line」（長いテキスト用）

これにより、CMSパネルとエディターでのテキストフィールドの表示方法が変更されます。

‍

プレーンテキストの表示方法

プレーンテキストフィールドは、任意のテキスト要素に接続することができます。

その手順は以下の通りです。

1. コレクションリストまたはコレクションページでテキスト要素を追加します
2. 表示される「Settings」ウィンドウで「Get text from」チェックボックスにチェックを入れます
3. フィールドドロップダウンから、接続したいプレーンテキストフィールドを選択します

これらの設定には、テキスト要素を選択し、キャンバス上の要素ラベルの横にある歯車アイコンをクリックするか、設定パネル（ショートカット D）を開いてアクセスすることもできます。接続を解除するには、「Get text from」チェックボックスのチェックを外します。

‍

プレーンテキストフィールドを使用したコレクションリストのフィルタリング

プレーンテキストフィールドを使用してコレクションリストの表示に条件を付けることができます。

設定の手順は下記の通りです。

1. フィルタリングしたいコレクションリストを選択します
2. 要素設定パネル（ショートカット D）に移動します
3. 「Collection List Settings」の下にある「Filter」をクリックします
4. 最初のドロップダウンで、参照するプレーンテキストフィールドを選択します
5. 2番目のフィールドでルールを選択します
6. 必要であれば、値を指定します
7. 「Save」をクリックします

プレーンテキストのフィールドと値で使用できるフィルタールールは以下の通りです。

• Equals - このルールに指定した値と等しいプレーンテキスト文字列を持つコレクションアイテムを指定します
• Does Not Equal - このルールに指定した値と等しくないプレーン テキスト文字列を持つコレクションアイテムを指定します
• Is Set - このプレーンテキストフィールドに何らかの値が設定されているコレクションアイテムを指定します
• Is Not Set - このプレーンテキストフィールドに値が設定されていないコレクションアイテムを指定します

一言メモ

「Is Set」と「Is Not Set」は、デフォルトで必須項目です。したがってデフォルトの「Name」テキストフィールドでは利用できません。

デフォルトの項目はこうした制限があるため、当社では「Name」フィールドは管理用の項目として扱い、ページに表示するようのNameフィールドは追加で作成することが多いです。

‍

プレーンテキストフィールドを使用したコレクションリストのソート

プレーンテキストを使用して、コレクションアイテムを任意のテキスト フィールドで並べ替えることができます。（例：A to Z順など）

1. フィルタリングしたいコレクションリストを選択します
2. 要素設定パネル（ショートカット D）に移動します
3. 「Collection List Settings」の下にある「Sort Order」をクリックします
4. 最初のドロップダウンで、参照するプレーンテキストフィールドを選択します
5. 2番目のフィールドでソート順を選択します
6. 「Save」をクリックします

‍

プレーンテキストフィールドで表示/非表示を制御

プレーンテキストフィールドを使用して、コレクションリストまたはコレクションページで個々の要素の表示または非表示に条件を付けて制御することができます。

たとえば、リンクフィールドと同様にプレーンテキストフィールドに接続されているボタン要素がある場合。2つの条件を設定して、リンクフィールドとテキストフィールドの両方が設定されているときだけ、ボタンがページ上に表示されるようにすることができます。

1. 条件を付けたい要素を選択します
2. 要素設定パネル（ショートカット D）に移動します
3. 「Conditional visibility」の下にある「Condition」を追加します
4. 最初のドロップダウンで、参照するプレーンテキストフィールドを選択します
5. 2番目のフィールドでルールを選択します（例：「Is Set」）
6. 「Save」をクリックします

一言メモ

一方で、必須項目をフィールドに設定しておくことで、こうした表示/非表示の複雑な設定を回避することができます。

‍

まとめ

いかがでしょうか。

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

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

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

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

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

‍

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

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

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