静的なリスト／カルーセル内のボックスにプロパティを紐付ける

静的なリスト／カルーセル内のボックスに、デザインエディタ内で管理するリストプロパティを反映する手順を紹介します。画像・テキスト・URL・ブール値・カラーのそれぞれのプロパティごとの紐付け手順と、コネクターを利用した紐付け方法をそれぞれ解説します。

Studio CMSなど、デザインエディタ外で管理するプロパティを反映する手順については、動的なリスト／カルーセル内のボックスにプロパティを紐付けるを参照してください。

対象のリスト／カルーセルのデータソースが不明な場合には、リスト／カルーセルの種類を見分ける方法を参照の上、データソースの確認を行なってください。

Point：Studioのリスト機能とカルーセル機能

共通した構造・レイアウトを持つボックスの集まりがリストです。また、リスト機能を元に、複数のコンテンツをスライド形式で順番に表示できる機能がカルーセルです。

リスト／カルーセルで表示する画像やテキストなどの項目はプロパティとして管理し、データソースの管理場所によりリスト／カルーセルの挙動や機能が変わります。

各機能の詳細や操作方法は、それぞれのヘルプ記事を参照してください。

手順1. リスト／カルーセル内のアイテムを編集モードに切り替える

リスト／カルーセル内のボックスとプロパティの紐付けは、アイテムを編集モードに切り替えてから行います。この操作は、全プロパティで共通です。

編集モードへの切り替え手順と編集モードの解除の方法は、以下のヘルプ記事を参照してください。

画像プロパティを紐付けられるボックスは、画像ボックスのみです。

アイテム上で対象の画像ボックスを選択します。
右パネルで[画像]タブを開きます。
[画像]タブ内の[URL]欄をクリックし、表示されたメニューから対象の画像プロパティを選択します。
以下の画像では、画像プロパティ[image]を選択しています。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じた画像が反映されます。

テキストプロパティを紐付けられるボックスは、テキストボックスのみです。

アイテム上で対象のテキストボックスを選択します。
右パネルで[テキスト]タブを開きます。
[テキスト]タブ内の[テキスト]欄をクリックし、表示されたメニューから対象のテキストプロパティを選択します。
以下の画像では、テキストプロパティ[text]を選択しています。
正しく設定が完了すると、選択したアイテム以外にも、それぞれの登録内容に応じたテキストが反映されます。

コネクターを利用してプロパティを紐付けることもできます。コネクターは、すべてのプロパティで利用可能です。

Tips：カラープロパティとブール値プロパティは、コネクター以外の方法でボックスとの紐付け操作ができません。

Tips：レイヤーパネルからアイテムを選択し、紐付ける

レイヤーパネルから、対象の要素を選択する方法でも、編集モードと同様にアイテム内のボックスを編集可能な状態に切り替えられます。

レイヤーパネルを開きます。
対象のリスト／カルーセルのレイヤーを選択します。レイヤーが閉じられている場合には、レイヤー名先頭の[>]をクリックして下位レイヤー表示します。
アイテムのレイヤー（文頭に[0][1][2][3]などの番号が振られているレイヤー）
を選択します。
アイテムのレイヤーを選択すると、右パネルの[データ]タブにプロパティと青い点（コネクターの起点）が表示されます。
コネクターによる紐付けを行う場合には、この状態で操作を行います。
画像プロパティ、テキストプロパティ、URLプロパティを設定欄から紐付ける場合には、対象のボックスを選択し右パネルで該当の設定欄から紐付けを行います。