メインコンテンツにスキップ

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

静的リストで、各アイテムごとに異なる画像を設定する方法を説明します。リスト内の画像が同じすべてになってしまう場合の注意も紹介します。

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

注意:他のアイテムの画像も同じになってしまう場合

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

  1. リストアイテムを選択し、右パネルを開きます。

  2. [画像]タブから、画像を設定します。


事前確認:リストの種類を確認する

リストには静的リスト動的リストがあります。この記事では静的リストの編集方法を解説します。以下の方法で、編集したいリストが静的リストかを確認してください。

  1. リスト全体を選択します。

  2. 右パネルの[データ]タブを開きます。右パネルが閉じている場合は、開いてください。

  3. [データ]タブ最上部のプルダウン文言を確認します。

[データを接続する]が表示されている場合

対象のリストは、静的リストです。本記事で説明する画像設定方法を利用できます。

データソース([CMS][API]など)が表示されている場合

対象のリストは動的リストです。操作方法は以下の記事を参照してください。
CMSリストで、画像・テキスト・リンクを一つのアイテムだけ変更したいのに、他のアイテムも同じ内容になってしまう


静的リストであると確認できたら、以下の手順に沿って画像を設定してください。

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

  1. リスト全体を選択します。※選択中のボックスが水色で囲まれ、ボックスの左上に田の字型のアイコンが表示されていれば、リスト全体を選択できています。

  2. 右パネルを開きます。閉じている場合は、右パネルを開いてください。

  3. [データ]タブを開きます。

既存の画像を変更する場合

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

画像を新規で追加する場合

  1. プロパティ管理表右上にある[+]をクリックします。

  2. [画像]プロパティを追加します。

  3. 表に追加された[画像]列の入力欄に、それぞれのリストアイテムに設定したい個別の画像を設定します。


手順2. 画像プロパティと画像ボックスを紐付ける

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

  1. リストアイテムを選択します。リスト内のどのリストアイテムを選択しても構いません。スクリーン上でリストアイテムを直接選択しづらい場合は、レイヤーパネルから選択します。

  2. 右パネルの[データ]タブを開きます。パネルが閉じている場合は開いてください。

  3. [画像]プロパティのコネクタをドラッグし、スクリーン上の画像ボックスに紐付けます。

手順3.サイトを更新して反映する

  1. ライブプレビューでリンクが正しく設定されているかを確認します。

  2. サイトの公開または更新をして、設定内容を反映します。この操作を行うまで、変更点は公開中のサイトに反映されません。


リストアイテムの画像にaltを設定する

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

リストアイテムの画像ごとに個別のaltを登録する方法は、以下の記事をご覧ください。

こちらの回答で解決しましたか?