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

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

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

今日アップデートされました

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

Point:リストの種類を確認する(静的リスト/動的リスト)
リストには静的リストと動的リストがあります。以下の方法で識別してください。

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

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

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

    [データを接続する]の場合
    静的リストです。本記事の方法を利用できます。


    それ以外ソース(CMSなど)が用事されている場合
    そのリストは動的リストです。操作方法は以下の記事をご覧ください。
    参考:CMSリストで、画像・テキスト・リンクを一つのアイテムだけ変更したいのに、他のアイテムも同じ内容になってしまう


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

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

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

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

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

既存の画像を変える場合

プロパティ管理表にあるテキストを編集して差し替えます。

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

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

  2. [テキスト]プロパティを追加します。

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


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

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

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

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

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

(3)サイトを更新する

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


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

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

  2. [設定]タブの[テキスト]入力欄にテキストを入力します。


テキスト 文字 同じになる 変えたい

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