動的なリスト／カルーセル内のボックスに、Studio CMSなどデザインエディタ外で管理するプロパティを反映する手順を、Studio CMSのCMSプロパティを例に紹介します。
対象のリスト／カルーセルのデータソースが不明な場合には、リスト／カルーセルの種類を見分ける方法を参照の上、データソースの確認を行なってください。
Point：Studioのリスト機能とカルーセル機能
リスト／カルーセルで表示する画像やテキストなどの項目はプロパティとして管理し、データソースの管理場所によりリスト／カルーセルの挙動や機能が変わります。
各機能の詳細や操作方法は、それぞれのヘルプ記事を参照してください。
手順1. リスト／カルーセル内のアイテムを編集モードに切り替える
リスト／カルーセル内のボックスとプロパティの紐付けは、アイテムを編集モードに切り替えてから行います。この操作は、全プロパティで共通です。
編集モードへの切り替え手順と編集モードの解除の方法は、以下のヘルプ記事を参照してください。
手順2. プロパティとボックスを紐付ける
2-1. 画像プロパティを紐付ける
画像プロパティを紐付けられるボックスは、画像ボックスのみです。
任意のアイテム上で対象の画像ボックスを選択します。
右パネルで[画像]タブを開きます。
[画像]タブ内の[URL]欄をクリックし、[CMSプロパティから選択]から対象のプロパティを選択します。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じた画像が反映されます。
2-2. テキストプロパティを紐付ける
テキストプロパティを紐付けられるボックスは、テキストボックスのみです。
任意のアイテム上で対象のテキストボックスを選択します。
右パネルで[テキスト]タブを開きます。
[テキスト]タブ内の[テキスト]欄をクリックし、[CMSプロパティから選択]から対象のプロパティを選択します。
以下の画像では、テキストプロパティ[Title]を選択しています。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じたテキストが反映されます。
2-3. slugプロパティを紐付ける
任意のアイテム上で対象のボックスを選択します。
右パネルで[設定]タブを開きます。
[設定]タブ内の[リンク]欄を一度クリックし、設定欄右側に表示された[+]をクリックします。
[CMSプロパティから選択]から対象のプロパティを選択します。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じたslug（記事リンク）が反映されます。
2-4. テキストプロパティとして追加した外部リンクを紐付ける
任意のアイテム上で対象のボックスを選択します。
右パネルで[設定]タブを開きます。
[設定]タブ内の[リンク]欄を一度クリックし、設定欄右側に表示された[+]をクリックします。
[CMSプロパティから選択]から対象のプロパティを選択します。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じた外部リンクが反映されます。
2-6. カラープロパティを紐付ける
任意のアイテム上で対象のボックスを選択します。
右パネルで[設定]タブを開きます。
色設定欄内のカラーサンプルをクリックし、カラーパレットを表示します。
カラープロパティを紐付けたい要素に合わせて、設定欄は変わります。
カラーパレットで[CMS]タブを選択します。
リストから紐付けたいプロパティを選び、紐付けます。
2-5. セレクトプロパティ／マルチセレクトプロパティを紐付ける
セレクトプロパティ／マルチセレクトプロパティは、テキストボックスに紐付けます。
Tips：要素に紐付けるプロパティがマルチセレクトタイプの場合には、プロパティ接続時に[リスト化して接続]が有効になり、紐付けたボックスが自動的にリスト化されます。
任意のアイテム上で対象のテキストボックスを選択します。
右パネルで[テキスト]タブを開きます。
[テキスト]タブ内の[テキスト]欄をクリックし、[CMSプロパティから選択]から対象のプロパティを選択します。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じたテキストが反映されます。
2-6. 動画プロパティを紐付ける
動画プロパティを紐付けられるボックスは、動画ボックスのみです。
任意のアイテム上で対象の画像ボックスを選択します。
右パネルで[動画]タブを開きます。
[動画]タブ内の[URL]欄をクリックし、[CMSプロパティから選択]から対象のプロパティを選択します。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じた画像が反映されます。
2-7. PDFプロパティを紐付ける
PDFプロパティは、ダウンロードリンクとして紐付けます。
任意のアイテム上で対象のボックスを選択します。
右パネルで[設定]タブを開きます。
[設定]タブ内の[リンク]欄を一度クリックし、設定欄右側に表示された[+]をクリックします。
[CMSプロパティから選択]から対象のプロパティを選択します。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じたPDFのダウンロードリンクが反映されます。
2-8. コネクターを利用してプロパティを紐付ける
コネクターを利用してプロパティを紐付けることもできます。コネクターは、すべてのプロパティで利用可能です。
注意：以下のCMSプロパティは、コネクター以外の方法でボックスと紐付けることはできません。
数値プロパティ
ブール値プロパティ
任意のアイテム上で対象のボックスを選択します。
右パネルで[データ]タブを開きます。
対象のプロパティ名先頭の青丸からコネクターを引き出し、紐付けたいボックスにドラッグ＆ドロップします。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じたプロパティが反映されます。
注意：リッチテキストプロパティを紐付けられるボックス
リッチテキストプロパティを紐付け可能なボックスは、リッチテキストボックスのみです。テキストボックスに紐付けることはできません。
参照プロパティを紐付ける
参照プロパティを紐付ける場合には、プロパティがシングルセレクトかマルチセレクトかにより、[CMSプロパティから選択]での見た目や選択方法が異なります。
■シングルセレクトの参照プロパティを紐付ける
他のプロパティとは別枠で表示されます。プロパティ名横の矢印をクリックして、紐付けたいプロパティを選択します。
■マルチセレクトの参照プロパティを紐付ける
注意：マルチセレクトの参照プロパティは、コネクターを利用した紐付けができません。
他のプロパティと同じリスト内に表示されます。
プロパティ接続時に[リスト化して接続]が有効になり、紐付けたボックスが自動的にリスト化されます。
Tips：レイヤーパネルからアイテムを選択し、紐付ける
レイヤーパネルから、対象の要素を選択する方法でも、編集モードと同様にアイテム内のボックスを編集可能な状態に切り替えられます。
レイヤーパネルを開きます。
対象のリスト／カルーセルのレイヤーを選択します。
田の字のアイコン
が表示されているレイヤー名頭の[>]をクリックすると、下層のレイヤーを展開できます。
リストアイテム（[0][1][2]などの番号が振られているレイヤー）を選択します。
[データ]タブを開き、プロパティ一覧と青い点（コネクターの起点）が表示されているか確認します。
設定欄から紐付ける場合には、更に下層の対象ボックスを選択し、右パネルで該当の設定欄を表示します。