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

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

リスト(通常リスト)でアイテムごとに異なる画像・テキスト・リンクを設定する手順と、設定後に内容を変更する方法をあわせて説明します。

この記事では、リスト(通常リスト)でリストアイテムごとに異なる画像・テキスト・リンクを設定する方法と、設定後に内容を変更する方法を説明します。

Point:

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

💡 編集中に近辺のボックスがすべて同じ内容に変わってしまった場合は、ボックスの画像・テキスト・リンクを変更したら、他のボックスも同じ内容に置き換わってしまったを参照してください

💡 Studio CMSと接続した動的リスト(CMSリスト)の内容を編集する場合は、CMSリスト:画像・テキスト・リンクを編集するを参照してください

リストアイテム内のボックスとプロパティの関係

リストアイテム内のボックスは同じ列にあるアイテム間で共通のレイアウトを持ち、ボックスを直接編集をすると、同じ列のボックスすべてに同一の内容が反映される仕様です。

アイテムごとに異なる内容を設定するには、プロパティ管理表を編集する必要があります。


はじめて設定する場合

プロパティが未作成の場合は、次の手順で追加してから紐付けます。

手順1. プロパティを追加する

リスト全体を選択し、右パネルのプロパティ管理表に、設定したいデータ種別のプロパティ(テキスト・画像・URLのいずれか)を追加します。

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

  2. [データ]タブでプロパティ管理表を表示し、設定したいプロパティを追加します。
    追加方法の詳細は、リスト:リストプロパティ > 列(プロパティ)の追加・削除・並べ替え・名称の編集を参照してください。

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

追加したプロパティを、リストアイテム内の対象のボックスに紐付けます。紐付けにより、アイテムごとに登録した内容が、対応するボックスへ自動的に反映されます。

プロパティ種別ごとの紐付け方法の詳細は、次を参照してください。

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

  1. ライブプレビューで、設定した内容が正しく反映されているかを確認します。

  2. すでにサイトを公開済みの場合は、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。


設定済みの内容を変更する場合

プロパティの追加・紐付けが済んでいるアイテムであれば、プロパティ管理表の値を書き換えるだけで内容を変更できます。

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

  2. 変更したいアイテムの行にある、対象プロパティの値をクリックして書き換えます。

  3. ライブプレビューで内容を確認します。すでにサイトを公開済みの場合は、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。


画像プロパティのalt設定について

リストアイテム内の画像に直接altを設定すると、全アイテムに同じalt文言が反映されます。アイテムごとに個別のaltを設定する方法は、画像ボックス:代替テキストを設定する(alt) > リストアイテムの画像に代替テキストを設定するを参照してください。


リンク 同じになる 変えたい それぞれ 連動 反映 影響 テキスト 文字

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