【日本語版Webflow University】 CMS解説_リッチテキストの概要

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

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

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

‍

‍

Webflow CMSでコレクションフィールドの1種として使用できるリッチテキスト（Rich text）は、お知らせの本文やコラムのコンテンツ部分に使われるCMSフィールドです。

‍

リッチテキストフィールドは、コラボレーターが自由にコンテンツを作成し、書式設定できるようにします。リッチテキストフィールドは、コレクションリストやコレクションページで表示できます。また、リッチテキストフィールドを使用して、コレクションリストをフィルタリングしたり、コレクションページやリスト内の要素に表示/非表示条件を設定することもできます。

‍

一般的な使用方法

• リンクのある長文コンテンツのほとんど
• ブログ記事
• ニュース記事
• チームメンバーの経歴
• 製品の詳細な説明
• イベントの詳細な説明

一言メモ

リッチテキストは、コラボレーターにテキストのスタイルを変更する機能を提供する場合に便利です。この機能を使用したくない場合は、プレーンテキストフィールドを使用することをおすすめします。

‍

レッスン概要

1. リッチテキストフィールドの作成
2. リッチテキストコンテンツの作成
3. 動的なリッチテキストを表示
4. リッチテキストフィールドにネストされた要素をスタイリング
5. リッチテキストフィールドを使用したコレクションリストのフィルタリング
6. リッチテキストフィールドを使用した表示/非表示の条件設定

‍

リッチテキストフィールドの作成

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

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

‍

リッチテキストコンテンツの作成

お客様やコラボレーターは、リッチテキストフィールド内でコンテンツを作成することができます。

大まかな手順は下記の通りです。

1. CMSでコレクションアイテムを開きます
2. リッチテキストコンテンツを入力または貼り付けします
3. さらに書式設定したり、画像や動画などのメディアを追加したりします
4. コレクションアイテムを保存します

リッチテキストには次のコンテンツが追加できます。

• 複数行テキスト
• 画像
• 動画
• リッチメディア
• 箇条書きリスト
• 番号付きリスト
• 太字テキスト
• イタリックテキスト
• リンク
• 見出し
• 引用符

一言メモ

Webflowの標準機能には無いその他の主だったコンテンツを下記に記します。

• 表形式
• テキストのハイライト、文字色変更
• 背景色の変更
• テキスト毎のフォントの設定別け

‍

動的なリッチテキストを表示

コレクションリストやコレクションページでリッチテキストフィールドの内容を表示するには、リッチテキスト要素を追加して、このフィールドに接続します。

この手順は次の通りです。

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

また、テキスト要素を選択し、キャンバス上の要素ラベルの横にある歯車アイコンをクリックするか、設定パネル（ショートカット D）にアクセスすることで、「Inner Text Settings」にアクセスできます。

‍

リッチテキストフィールドにネストされた要素をスタイリング

見出し、リスト、リンクなど、リッチテキストに入れ子になっている各要素に特定のスタイルを設定することができます。これは、リッチテキスト要素をリッチテキストフィールドに接続する前に行います（接続した後も一時的に「Inner Text Settings」のチェックボックスを外して、スタイリングすることができます）。

一言メモ

リッチテキストのスタイリングはPC画面でも重要ですが、特にレスポンシブ対応で重要になります。
特に、画像はデフォルトだとコンテンツ枠からはみ出たり、リンクや見出しが画面外にはみ出てしまったりします。
従って、リッチテキストを実装する場合は、レスポンシブも必ず確認し、まとめて設定することをおすすめします。

‍

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

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

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

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

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

• Is Set - このリッチテキストフィールドに何らかの値が設定されているコレクションアイテムを指定します
• Is Not Set - このリッチテキストフィールドに値が設定されていないコレクションアイテムを指定します

‍

リッチテキストフィールドを使用した表示/非表示の条件設定‍

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

例えば見出しに条件付き書式を設定して、特定のリッチテキストフィールドにコンテンツがあるときだけ表示させることもできます。

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

‍

まとめ

いかがでしょうか。

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

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

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

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

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

‍

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

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

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