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

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

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

この記事では、静的リスト(通常リスト)でアイテムごとに異なるリンクを設定する方法を説明します。

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

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

注意:静的リスト(通常リスト)で他のアイテムのリンクも同じになってしまう場合

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

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

  2. [設定]タブから、テキストを設定します。


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

まずはリスト全体に紐づくコンテンツデータに、[URL]のプロパティを追加します。具体的には、プロパティ管理表の縦軸に、URLを管理する列を作成します。

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

    レイヤーパネルを開き、先頭に水色のリストアイコン が付いた要素を選択します。スクリーン上では、対象の要素の左上にリストアイコンが表示されます。

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

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

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

  5. [URL]プロパティを追加します。

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


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

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

  1. リストアイテムを編集モードに切り替えます。スクリーン上での操作が難しい場合には、レイヤーパネルでリストアイテムのレイヤーを選択します。

  2. 対象のボックスを選択します。

  3. 右パネルで[設定]タブを開きます。パネルが閉じている場合は開いてください。

  4. [設定]タブ内の[リンク]欄を一度クリックし、設定欄右側に表示された[+]をクリックします。

  5. 表示されたメニューから対象のURLプロパティを選択します。

  6. または、[データ]タブのプロパティ一覧で、対象のURLプロパティからコネクタをドラッグし、スクリーン上の画像ボックスに紐付けます。

手順3. リンク先を確認してサイトを更新する

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

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


リンク 同じになる 変えたい それぞれ 連動 反映 影響

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