状況の整理と原因
ボックスの画像・テキスト・リンクを変更した際に、同列の他のボックスも同じ内容に置き換わってしまう場合、対象のボックスはリストとして配置されています。
例:画像を変更したケース
①のボックスの画像を、右パネルの[画像]タブから変更した。(画像内:赤の矢印)
その結果、同じ並びの②や③の画像も意図せず同じ画像に置き換わってしまった。(画像内:青の矢印)
原因
上記で①だけでなく②や③でも画像が置き換わってしまう原因は、①②③がリスト化されているためです。
リスト内の画像、テキスト、URLなどのデータを、通常のボックスと同じように直接編集すると、リスト内の共通要素がすべて同じ内容に置き換わります。
対処法
上記で①の画像のみを変更したい場合には、ボックスを直接編集せずに、スクリーン外で管理するプロパティのデータを紐付ける方法で行います。
この記事では、次の手順で原因の確認・適切な設定方法を案内をします。
(1) 対象のボックス群がリストであることを確認する
(2) リストの種類を確認する(静的リストまたは動的リスト)
(3) リストの種類に合う方法でデータを編集する
(1) 対象のボックス群がリストであることを確認する
画像やテキストが連動して置き換わるボックス群が、リスト化されているかを確認します。
Point:リストとは
リストとは、共通した構造やレイアウトを持つボックスをまとめて管理し、内容だけを切り替えて一覧表示するための機能です。
例えばカード型の一覧のように、レイアウトは同じまま、テキストや画像・リンクだけを変えて表示したい場合に利用します。
リストの外観は、次の親子関係で構成されます。
同じレイアウトを持つ複数のボックス群(リストアイテム)
それらのボックスをまとめるボックス(リスト本体)
リストの全体像や詳しい仕組みは、リストの記事も参照してください。
リストの見分け方
対象のボックスがリスト化されているかどうかは、ボックス選択時の表示で確認できます。
以下のいずれかに該当する場合、選択中のボックスはリスト化されています。
ボックスの枠線が水色で表示される。
ボックス全体が水色でハイライトされる。
選択中のボックスの左上や、レイヤーパネル上の名前の先頭に、リストアイコンまたはカルーセルアイコンが表示される。
(2)リストの種類を確認する(静的リスト/動的リスト)
リスト本体を選択します。
右パネルの[データ]タブを開きます。右パネルが閉じている場合は、右パネルを開いてください。
[データ]タブ最上部のプルダウン文言を確認します。
(3) リストの種類に合う方法でデータを編集する
静的リストと動的リストでは、データの管理場所と設定方法が異なります。
静的リストのデータ編集
静的リストのデータ編集は、右パネルのプロパティ管理表で行います。
編集したデータをボックスに反映するには、スクリーン上のボックスにドラッグして紐づけます。操作方法の詳細は、リストの記事を参照してください。
動的リストのデータ編集
動的リストのデータ編集は、データを管理している場所(デザインエディタ外)で行います。
APIに接続中の場合:Studio外のサービスでデータを管理します。
CMSに接続中の場合:CMSダッシュボードでデータを管理します。
作成したデータをボックスに反映するには、デザインエディタの右パネルでデータを開き、スクリーン上のボックスにドラッグして紐づけます。 操作方法の詳細は、動的リストの記事を参照してください。
アイテム別 リンク URL リンク設定 リスト









