この記事では、リストアイテムごとに異なる画像を設定する方法を説明します。
注意:他のアイテムの画像も同じになってしまう場合
リスト内ボックスの画像を以下の方法で直接変更すると、同じ列にある画像ボックスすべてに同一の画像が反映されてしまいます。
リストアイテムを選択し、右パネルを開きます。
[画像]タブから、画像を設定します。
事前確認:リストの種類を確認する
[データを接続する]が表示されている場合
対象のリストは、静的リストです。本記事で説明する画像設定方法を利用できます。
データソース([CMS][API]など)が表示されている場合
対象のリストは動的リストです。操作方法は以下の記事を参照してください。
CMSリストで、画像・テキスト・リンクを一つのアイテムだけ変更したいのに、他のアイテムも同じ内容になってしまう
静的リストであると確認できたら、以下の手順に沿って画像を設定してください。
手順1. リストに画像プロパティを追加する
既存の画像を変更する場合
プロパティ管理表にある画像プロパティのセルをクリックし、画像を差し替えます。
画像を新規で追加する場合
プロパティ管理表右上にある[+]をクリックします。
[画像]プロパティを追加します。
表に追加された[画像]列の入力欄に、それぞれのリストアイテムに設定したい個別の画像を設定します。
手順2. 画像プロパティと画像ボックスを紐付ける
次に、リストの画像プロパティをスクリーン上の画像ボックスへ紐付けます。 これにより、アイテムごとに登録したそれぞれの画像プロパティが、対応するボックスに自動反映されます。
右パネルの[データ]タブを開きます。パネルが閉じている場合は開いてください。
[画像]プロパティのコネクタをドラッグし、スクリーン上の画像ボックスに紐付けます。
手順3.サイトを更新して反映する
リストアイテムの画像にaltを設定する
通常の画像ボックスと同様の方法でリストアイテム内の画像にaltを設定すると、全ての画像に同じalt文言が登録されます。
リストアイテムの画像ごとに個別のaltを登録する方法は、以下の記事をご覧ください。
ヘルプ記事:リストアイテムの画像にaltを設定する





