CMS:リッチテキストフィールドを追加・設定する

読了時間:12分
リッチテキストフィールドを使用すると、CMS(コンテンツ管理システム)コレクション内のアイテムの書式設定されたテキストを保存することができます。サイトのフォントスタイルは、リッチテキストエディタおよびサイトにフィールドが表示されるときに使用されます。これにより、サイトの見出しと段落スタイル、リッチテキストコンテンツで一貫した外観を維持することができます。

フィールドを使用して、サイトに表示したいコンテンツを保存できます。たとえば、動的アイテムページのバージョンでアイテムの詳細を表示したり、動的リストページのリピーターで複数のアイテムの詳細を表示したりできます。

また、リッチテキストフィールドを使用して、訪問者がカスタムフォームのリッチテキスト入力要素から送信した書式設定されたテキストを保存することもできます。
テキストボックスに表示されたリッチテキスト入力要素のスクリーンショット。
ヒント:
このリッチテキストフィールドでは、コレクションに保存されているテキストにカスタム書式を適用することができます。書式設定されたテキストをメディア、ファイル、HTML コード、Wix ビジネスソリューションなどと組み合わせる場合は、代わりにリッチコンテンツフィールドと要素を使用してください。

コレクションにリッチテキストフィールドタイプを追加する

コレクションに新しいフィールドを作成する際は、「リッチテキスト」フィールドタイプを選択します。サイトにテキストを表示する場合は、コレクション内のリッチテキストエディタを使用して、該当するアイテムのテキストを追加し、書式を設定してください。リッチテキストフィールドで訪問者の回答を収集する場合は、フィールドを空白のままにし、リッチテキスト要素を使用してカスタムフォームを設定できます。

コレクションにリッチテキストフィールドを追加する方法:

  1. サイトダッシュボードの「CMS」にアクセスします。あるいは、エディタ内で「CMS をクリックし、「あなたのコレクション」をクリックします。
  2. 該当するコレクションをクリックします。
  3. フィールドを管理」をクリックします。
  4. +フィールドを追加」をクリックします。
  5. リッチテキスト」を選択し、「フィールドタイプを選択」をクリックします。
リッチテキスト
  1. フィールド名」にフィールド名を入力します。
  2. (Velo のみ)サイトのコードで使用されている「フィールド ID」を更新します。この ID は後で更新することはできません。
  3. (オプション)コレクションにツールチップを表示する場合は、フィールド名の横に「ヘルプテキスト」を入力します。
  4. 保存」をクリックします。
  5. 実行する内容を選択します:

リッチテキストフィールドの書式設定

コレクションからリッチテキストフィールドを編集する際に、上部のオプションから選択してテキストの書式を設定します。リッチテキストエディタには、サイトと同じフォントテーマが使用されます。Wix エディタまたは Wix Studio エディタからサイトのテキストスタイルを更新して、サイト全体とリッチテキストエディタで使用される見出しと段落スタイルを調整します。サイトのテキストテーマで、行と文字の間隔を調整することもできます。
リッチテキストエディタで別の見出しまたは段落スタイルを選択しているスクリーンショット。
サイトのテキストテーマを更新する方法:

サイトにリッチテキストフィールドのコンテンツを表示する

ページにテキスト要素を追加し、コレクションにバインドするデータセットに接続します。次に、データセット接続でリッチテキストフィールドを選択します。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします
  2. リッチテキストフィールドのコンテンツを表示させたいページに移動します。
  3. ページにテキスト要素を追加します:
    1. エディタ左側で「パーツを追加 をクリックします。
    2. テキスト」をクリックして、該当するテキスト要素をページにドラッグします。
  4. テキスト要素の「CMS に接続」アイコン  をクリックします。
  5. データセットを選択」ドロップダウンをクリックし、リッチテキストフィールドを含むコレクションに接続されている既存のデータセットを選択します。回避策としては、データセットを追加」して、リッチテキストフィールドを含むコレクションを選択し、データセットに名前を付けて「作成」をクリックします。
  6. テキストを接続」パネルで「テキストの接続先」ドロップダウンをクリックし、作成したリッチテキストフィールドを選択します。

リッチテキスト入力要素を使用してサイト訪問者からコンテンツを収集する

リッチテキスト入力要素を使用して、書式設定されたテキストをリッチテキストコレクションフィールドに送信するカスタムフォームを作成します。訪問者からさまざまなタイプの入力を収集したい場合は、フォームに他の入力要素を追加できます。
Wix エディタ
Wix Studio エディタ
  1. エディタにアクセスします
  2. リッチテキスト入力要素を追加します:
    1. 訪問者がコレクションにテキストを送信できるようにしたいページ、またはセクションに移動します。
    2. エディタ左側で「パーツを追加 をクリックします。
    3. 入力欄」をクリックします。
    4. リッチテキスト」をクリックします。
    5. 該当するリッチテキストボックスをクリックして、ページにドラッグします。
Wix エディタでリッチテキスト要素を追加しているスクリーンショット。
  1. リッチテキスト要素を、訪問者からの回答を保存する CMS コレクションに接続します:
    1. リッチテキスト要素の「CMS に接続」アイコン  をクリックします。
    2. データセットを選択」ドロップダウンをクリックし、リッチテキストフィールドに訪問者の回答を保存するコレクションに接続する既存のデータセットを選択します。または、「データセットを追加」をクリックし、リッチテキストフィールドに訪問者の回答を保存するコレクションを選択します。データセットに名前を付け、「作成」をクリックします。
    3. Value を接続」ドロップダウンをクリックし、回答を保存するタグフィールドを選択します。
      ヒント:回答を保存する新しいフィールドを追加するには、ドロップダウン下部の「新しいフィールドを追加」を選択し、フィールド名を入力して「追加」をクリックします。
    4. データセットモードとコレクションの権限を設定します:
      1. データセット設定」をクリックします。
      2. データセットモード」ドロップダウンをクリックし、「書き込み」または「読み取り&書き込み」を選択します。
      3. (必要に応じて)「コレクションの権限」横の権限タイプをクリックし、最初のドロップダウンで「フォームの回答」を選択します。その他のドロップダウンをクリックして、権限を絞り込むことができます。権限の設定が完了したら、「保存する」をクリックします。
データセット設定
  1. リッチテキスト入力要素をクリックしてカスタマイズします:
    • 設定」をクリックし、以下を編集します:
      • 項目タイトル:テキスト入力要素の上に表示されるタイトルを入力します。
      • 初期テキストを表示:初期表示されるテキストを選択します。
      • 項目タイプ:(オプション)該当するオプションを選択します:
        • 必須項目:訪問者が送信前にこのボックスに値を入力することを必須にします。
        • 読み取り専用:このテキスト入力要素に、コンテンツの表示のみを許可します。訪問者は値を編集することはできませんが、コピーすることは可能です。
      • リンクの入力を許可:トグルを有効にして、訪問者が要素内でリンクを送信できるようにします。
      • 文字数制限を設定:トグルを有効にして、訪問者が入力できる文字数を制限します。
    • レイアウト」アイコン  をクリックして、テキスト配置、余白、ツールバーの位置を設定します。
    • デザイン」アイコン をクリックし、その他のプリセットのデザインを選択するか、デザインをさらにカスタマイズします。
  2. 送信したいテキストの入力が終わったら、訪問者がクリックして送信できるように「送信」ボタンを追加します。データセットのクリックアクションにボタンを接続することで、編集用の他のボタンを追加することができます。
「ボタンを接続」
  1. プレビュー」をクリックして、リッチテキスト入力要素の動作をテストします。
  2. 変更内容を公開する準備ができたら、「公開」をクリックします。

お役に立ちましたか?

|