デザインエディタで編集中に、ボックスの画像・テキスト・リンクを変更した際に、周辺のボックスが意図せず同じ内容に置き換わってしまった場合、そのボックス群はリスト化されています。
リスト化されたボックスでこの置き換えが発生してしまう原因とその修正方法、および正しい編集方法を解説します。
Point:リストとは
リストは、同じレイアウトのボックスをまとめて管理できる機能です。
テキストや画像などのデータを一元管理できるほか、Studio CMSなどと接続すれば、更新に応じて内容が自動反映される動的リストとしても使えます。
デフォルトでは、静的なリストとして機能します。
リスト機能の概要については、リストの記事を参照してください。
状況の整理と原因
画像を変更したケースを例に、状況の整理と原因を解説します。
①のボックスの画像を、右パネルの[画像]タブの[画像]から直接編集した。(画像内:赤の矢印)
その結果、同じ並びの②や③の画像も意図せず同じ画像に置き換わってしまった。(画像内:青の矢印)
原因
①②③のボックスは、リスト化された同じ列のリストアイテムです。
ボックスを直接編集したことにより、画像データのプロパティ連携が外れ、共通プロパティを連携していたボックスすべてに同じ内容が反映されています。
対処法
意図せず置き換わってしまった内容を元に戻すためには、プロパティとボックスを再連携する必要があります。以下の手順を参照してください。
Tips:対象のボックスがリスト化されているか正確に確認するには
対象のボックスがリスト化されているかどうかは、ボックス選択時の表示で確認できます。以下のいずれかに該当する場合、選択中のボックスはリスト化されています。
ボックスの枠線が水色で表示される。
ボックス全体が水色でハイライトされる。
選択中のボックスの左上や、レイヤーパネル上の名前の先頭に、リストアイコン
またはカルーセルアイコン
が表示される。
手順1. 意図せず置き換わったボックスを元に戻す
プロパティとボックスを再連携し、意図せず内容が置き換わってしまったボックスを元に戻します。
リストは静的にも動的にも機能しますが、プロパティ紐付けを修正する手順はどちらでもほぼ共通です。
リスト全体を編集モードに切り替えてから、元に戻したいボックスを選択します。
修正したい内容に合わせ、右パネルで対象タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
画像→[画像]タブ > [URL]欄
テキスト→[テキスト]タブ > [テキスト]欄
リンク→[設定]タブ > [リンク]欄
対象の入力欄をクリックし、表示される一覧(プロパティ一覧、または[CMSプロパティから選択])から対象のプロパティを選択して紐付け直します。
注意:プロパティの名称はサイトごとに異なります。あらかじめリストに接続されたデータ(プロパティ管理表やCMSダッシュボードなど)で対象のプロパティ名を確認してください。
リンクを編集する場合は、後述のリンクを修正する際の注意点をあわせて参照してください。
リンクを修正する際の注意点
リンクが設定されているボックスが見つからない場合
リンクはどの種類のボックスにも設定できるため、設定箇所を探しづらい場合があります。レイヤーパネルを使用することで、設定箇所をすばやく見つけられます。
デザインエディタを開き、対象のページを開きます。
レイヤーパネルを開き、対象のCMSリストのレイヤーを探します。
リスト化された要素の先頭には水色の田の字アイコン
が表示されます。リスト内のアイテムを選択します。
対象のCMSリストのレイヤーが閉じている場合は、[>]をクリックしてトグルを開いてください。
先頭に水色のリストアイテム番号
が表示されたレイヤーを選択します。
[リンク]欄を確認します。文字列等が入力されていれば、その要素にリンクが設定されています。
リンク設定が空欄の場合は、レイヤーパネルの[>]をクリックしてアイテムのトグルを開き、下位のレイヤーを選択してリンク欄を確認してください。
注意:「親ボックスにリンク設定がある場合、このリンクは無効になります」と表示される場合
CMSリストのリストアイテム自体にリンク設定がされているときに、アイテム内の子ボックスが選択されていると表示されます。
リストアイテムのレイヤー(先頭に水色のリストアイテム番号
が付き、右端に<li>タグが表示された要素)を選択し直してください。
リンクの種類と設定方法の注意
リンクの設定方法はリンク先によって異なります。まず、設定したいリンクの遷移先を確認してください。
リンク先 | リストの種類 | 設定方法 |
詳細ページ(動的ページ)へのリンク | 動的リスト |
|
外部URL(アイテムごとに異なる外部リンク) | リスト(通常リスト) 動的リスト
|
|
動的リストで詳細ページ(動的ページ)へのリンク設定を修正したい場合
動的ページは、[リンク]タブ > [設定]欄をクリックして表示されるページリスト上に、リンク先候補として二つの同名ページが表示されます。
動的リストからのリンク設定では、リンクの末尾が:slug ではないページを選びます。
設定手順の詳細は、CMSリスト:詳細ページにリンクする記事一覧を作成するも参考にしてください。
手順2. 正しい方法で編集をする
今後同じ間違いを繰り返さないためには、リストの種類に応じた方法でデータを編集する必要があります。
1. リストの種類を確認する(リスト(通常リスト)または動的リスト)
リストは、接続するデータベースによって静的にも動的にも機能します。
Studio CMSなど、デザインエディタ外のデータベースを接続している動的リストの場合にはデータ元での編集作業が必要なため、まず対象のリストの種類を確認します。
リスト全体を選択します。
右パネルの[データ]タブを開きます。右パネルが閉じている場合は、右パネルを開いてください。
[データ]タブ最上部のプルダウン文言を確認します。
[データを接続する]と表示されている場合:
デザインエディタ外のデータを参照していないため、このリストは静的なリスト(通常リスト)です。
2. リストの種類に合った方法でデータを修正する
リスト(通常リスト)と動的リストでは、修正手順が異なります。
2-1. リスト(通常リスト)のデータを編集する
データの編集は、右パネルの[データ]タブのプロパティ管理表で行います。手順の詳細は以下のヘルプ記事を参照してください。
2-2. 動的リスト(CMSリストなど)の場合
データの編集は、デザインエディタ外(Studio CMSダッシュボードなど、データの接続元)で行います。
CMSリストの具体的な編集手順は、CMSリスト:画像・テキスト・リンクを編集するを参照してください。
アイテム別 リンク URL リンク設定 リスト







