リスト：アイテムごとに異なる画像を設定する

この記事では、リスト（通常リスト）でアイテムごとに異なる画像を設定する方法を説明します。

💡 リストの種類が不明な場合は、リスト／カルーセルの種類を見分ける方法を参照してください。

💡 Studio CMSと連携した動的リスト（CMSリスト）で意図せず画像がすべて同じ内容になってしまう場合は、CMSリストで、画像・テキスト・リンクを変更したら、他のアイテムも同じ内容に置き換わってしまうを参照してください。

注意：リスト（通常リスト）で他のアイテムの画像も同じになってしまう場合

リスト内ボックスの画像を以下の方法で直接変更すると、同じ列にある画像ボックスすべてに同一の画像が反映されてしまいます。

手順1. リストに画像プロパティを追加する

リスト全体を選択します。
レイヤーパネルを開き、先頭に水色のリストアイコンが付いた要素を選択します。スクリーン上では、対象の要素の左上にリストアイコンが表示されます。
右パネルを開きます。閉じている場合は、右パネルを開いてください。
[データ]タブを開きます。

プロパティ管理表にある画像プロパティのセルをクリックし、画像を差し替えます。

次に、リストの画像プロパティをスクリーン上の画像ボックスへ紐付けます。これにより、アイテムごとに登録したそれぞれの画像プロパティが、対応するボックスに自動反映されます。

リストアイテムを編集モードに切り替えます。スクリーン上での操作が難しい場合には、レイヤーパネルでリストアイテムのレイヤーを選択します。
対象の画像ボックスを選択します。
右パネルで[画像]タブを開きます。パネルが閉じている場合は開いてください。
[画像]タブ内の[URL]欄をクリックし、表示されたメニューから対象の画像プロパティを選択します。
または、[データ]タブのプロパティ一覧で、対象の画像プロパティからコネクタをドラッグし、スクリーン上の画像ボックスに紐付けます。

通常の画像ボックスと同様に、リストアイテム内の画像に直接altを設定すると、全ての画像に同じalt文言が登録されます。

リストアイテムの画像ごとに個別のaltを登録する方法は、リストアイテムの画像にaltを設定するを参照してください。