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

ボックスの画像・テキスト・リンクを変更すると、他のボックスも同じ内容に置き換わってしまう

ボックスの画像・テキスト・リンクを変更した際に、他のボックスの内容も置き換わってしまう場合には、対象のボックスがリスト化されていることが原因です。この記事では、具体的な原因の判別方法と、ボックスごとに異なる内容を設定する方法の記事を案内します。

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

状況の整理と原因

ボックスの画像・テキスト・リンクを変更した際に、同列の他のボックスも同じ内容に置き換わってしまう場合、対象のボックスはリストとして配置されています。

例:画像を変更したケース

  1. ①のボックスの画像を、右パネルの[画像]タブから変更した。(画像内:赤の矢印)

  2. その結果、同じ並びの②や③の画像も意図せず同じ画像に置き換わってしまった。(画像内:青の矢印)

原因

上記で①だけでなく②や③でも画像が置き換わってしまう原因は、①②③がリスト化されているためです。

リスト内の画像、テキスト、URLなどのデータを、通常のボックスと同じように直接編集すると、リスト内の共通要素がすべて同じ内容に置き換わります。

対処法

上記で①の画像のみを変更したい場合には、ボックスを直接編集せずに、スクリーン外で管理するプロパティのデータを紐付ける方法で行います。

この記事では、次の手順で原因の確認・適切な設定方法を案内をします。

(1) 対象のボックス群がリストであることを確認する

(2) リストの種類を確認する(静的リストまたは動的リスト)

(3) リストの種類に合う方法でデータを編集する


(1) 対象のボックスがリストであることを確認する

画像やテキストが連動して置き換わるボックス群が、リスト化されているかを確認します。

Point:リストとは

リストとは、共通した構造やレイアウトを持つボックスをまとめて管理し、内容だけを切り替えて一覧表示するための機能です。

例えばカード型の一覧のように、レイアウトは同じまま、テキストや画像・リンクだけを変えて表示したい場合に利用します。

リストの外観は、次の親子関係で構成されます。

  • 同じレイアウトを持つ複数のボックス群(リストアイテム)

  • それらのボックスをまとめるボックス(リスト本体)

リストの全体像や詳しい仕組みは、リストの記事も参照してください。

リストの見分け方

対象のボックスがリスト化されているかどうかは、ボックス選択時の表示で確認できます。

以下のいずれかに該当する場合、選択中のボックスはリスト化されています。

  • ボックスの枠線が水色で表示される。

  • ボックス全体が水色でハイライトされる。

  • 選択中のボックスの左上や、レイヤーパネル上の名前の先頭に、リストアイコンまたはカルーセルアイコンが表示される。


(2)リストの種類を確認する(静的リスト/動的リスト)

リストアイテムごとに異なる内容を設定する操作方法は、そのリストが静的リストか動的リスト(CMSリストなど)かによって異なります。 そのため、まず対象のリストがどちらの種類かを確認します。

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

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

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

    • [データを接続する]と表示されている場合:
      リストのデータがエディタ外に接続されていないため、このリストは静的リストです。

    • [CMS]または[API]などと表示されている場合:
      リストがCMSなどの外部データに接続されているため、このリストは動的リストです。(CMSが紐づいている動的リストはCMSリストとなります。)

(3) リストの種類に合う方法でデータを編集する

静的リストと動的リストでは、データの管理場所と設定方法が異なります。

静的リストのデータ編集

静的リストのデータ編集は、右パネルのプロパティ管理表で行います。

編集したデータをボックスに反映するには、スクリーン上のボックスにドラッグして紐づけます。操作方法の詳細は、リストの記事を参照してください。

動的リストのデータ編集

動的リストのデータ編集は、データを管理している場所(デザインエディタ外)で行います。

  • APIに接続中の場合:Studio外のサービスでデータを管理します。

  • CMSに接続中の場合:CMSダッシュボードでデータを管理します。

作成したデータをボックスに反映するには、デザインエディタの右パネルでデータを開き、スクリーン上のボックスにドラッグして紐づけます。 操作方法の詳細は、動的リストの記事を参照してください。


アイテム別 リンク URL リンク設定 リスト

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