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

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

Studioのリスト内アイテムごとに、個別のリンク先を設定する手順を解説します。右パネルの[設定]タブでリンクを設定すると、全てのリストアイテムに同じリンクが設定されます。異なるリンクを設定するには、右パネルの[データ]タブでプロパティ管理表に追加したリンクを紐づけます。

過去15分内にアップデートされました

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

Point:リストの種類を確認する(静的リスト/動的リスト)
リストには静的リストと動的リストがあります。

【静的リスト/動的リストの判別方法】

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

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

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

    ・ [データを接続する]の場合は静的リストです。本記事の方法を利用できます。
    ・それ以外ソース(CMSなど)が用事されている場合、そのリストは動的リストです。操作方法は以下の記事をご覧ください。
    参考:CMSリストのアイテムごとに異なる外部リンクを設定する


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

(1)リストにURLプロパティを追加する

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

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

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

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

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

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

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


(2) リストデータの[URL]プロパティと、スクリーン上のボックスを紐付ける

(1)で追加したURLプロパティを、スクリーン上のリストアイテム内のボックスに紐づけることで、リストアイテムごとのリンク設定が反映されます。

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

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

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

接続が完了すると、同じリスト内の他のアイテムにも、該当する[url]プロパティが自動的に適用されます。

(3)リンク先を確認し、サイトを更新する

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

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


注意:リストに対して以下の方法でリンクを設定してしまうと、全てのリストアイテムに同じリンクが設定されてしまいます。

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

  2. [設定]タブの[リンク]入力欄にURLを入力します。


リンク 同じになる

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