デザインエディタで、ボックス要素とCMSプロパティを紐付ける

Studio CMSでは、以下のようにビジュアルデザインとコンテンツを分けて、作成や管理を行います。

デザインエディタ上でボックス要素とCMSプロパティを紐付けて、初めてサイト上に正しく表示されます。

この記事では、CMSダッシュボードで設定済みのプロパティをデザインエディタで紐付ける方法を解説します。

各種プロパティの詳細や設定方法は、CMSプロパティを参照してください。

この記事の手順は、以下の設定を完了していることを前提としています。

動的要素（動的ページ・動的モーダル・動的リスト）内のボックス要素のうち、プロパティを紐付けたい要素を選択します。

紐付けて表示したいプロパティにより、使用するボックスが変わります。

右パネルで、選択した要素に合わせた設定タブを開きます。パネルが閉じている場合には、右パネルを開いてください。

各タブ内の入力フィールドをクリックして、[CMSプロパティから選択]から、紐付けたいプロパティを選択します。

紐付けるプロパティがマルチセレクトタイプのプロパティの場合には、プロパティ接続時に[リスト化して接続]が有効になり、紐付けたボックスが自動的にリスト化されます。

CMS記事アイテムのbody（本文）プロパティを表示する場合は、リッチテキストボックスとCMSプロパティを[データ]タブからコネクタで紐付けます。

動的要素（動的ページ・動的モーダル・動的リスト）内のリッチテキストボックスを選択します。

右パネルで[データ]タブを選択し、CMSデータ一覧を表示します。

パネルが閉じている場合には、右パネルを開いてください。

データタブ内のCMS記事アイテムのbody（本文）プロパティと、スクリーン上のリッチテキストボックスをコネクタで繋ぎます。

動的要素（動的ページ・動的モーダル・動的リスト）内のボックス要素のうちプロパティを紐付けたい要素を選択します。

動的要素（動的ページ・動的モーダル・動的リスト）内のボックス要素のうちプロパティを紐付けたい要素を選択します。