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

CMSリストで、画像・テキスト・リンクを変更したら、他のアイテムも同じ内容に置き換わってしまう

CMSリストでアイテムごとの画像・テキスト・リンクが全て同じ内容になってしまう場合の原因と、プロパティの紐付けを修正する手順を説明します。

注意:

この記事は、CMSリストで画像・テキスト・リンクがすべて同じ内容になってしまった場合のトラブルシューティングガイドです。

対象のボックス要素がCMSリストであるか不明な場合は、以下の記事で要素の種類を確認してください。

CMSリストですべての要素が同じ内容になる原因

CMSプロパティとボックスの紐付けが外れていることが原因です。

CMSリストでは、デザインエディタ上で画像やテキストを直接編集すると、その変更はリスト内の全アイテムに反映されます。これはCMSリストの仕様です。

アイテムごとに異なる内容を反映するには、以下の設定をそれぞれの編集画面で行う必要があります。

編集画面

設定内容

CMSプロパティ(画像・テキスト・URL)を登録する

CMSダッシュボードで登録したプロパティを、CMSリスト内のボックス要素に紐付けて反映する

画像・テキスト・URLそれぞれの編集手順を以下で説明します。


画像がすべて同じ内容になってしまった場合

CMSリストでは、CMSダッシュボードで設定済みの画像プロパティを画像ボックスに紐付けてページ上に表示します。紐付け状況を確認し、必要に応じて再設定してください。

手順1. 紐付けを確認・修正する

まず、対象のボックス要素へのプロパティ紐付け状況を確認し、修正します。

  1. デザインエディタを開き、意図せず同じ画像が表示されているボックスを選択します。

  2. 右パネルで[画像]タブを選択します。パネルが閉じている場合には、右パネルを開いてください。

  3. [URL]設定欄を確認します。

    青文字のプロパティ名ではなく、画像のURLが直接入力されている場合、直接編集によってCMSプロパティとの紐付けが解除されています。

  4. [URL]設定欄をクリックし、[CMSプロパティから選択]のリストから、ボックスに紐付けたい画像プロパティを選びます。

手順2. 画像プロパティを変更する

手順1で紐付けを修正しても表示したい画像と異なる場合は、CMSダッシュボードで画像プロパティを変更します。

  1. CMSダッシュボードを開き、変更したいアイテムが含まれるモデルを選択します。

  2. 変更したいアイテムの画像プロパティをダブルクリックして、画像を置き換えます。

  3. 公開中ステータスのアイテムを変更した場合には、ステータスを「変更あり」から「公開中」に変更します。

  4. デザインエディタとライブプレビューで、変更した画像が反映されているか確認します。


テキストがすべて同じ内容になってしまった場合

CMSリストでは、CMSダッシュボードで設定済みのテキストプロパティをテキストボックスに紐付けてページ上に表示します。

紐付け状況を確認し、必要に応じて再設定してください。

手順1. 紐付けを確認・修正する

まず、対象のボックス要素へのプロパティ紐付け状況を確認し、修正します。

  1. デザインエディタを開き、意図せず同じテキストが表示されているボックスを選択します。

  2. 右パネルで[テキスト]タブを選択します。パネルが閉じている場合には、右パネルを開いてください。

  3. [テキスト]の設定欄を確認します。

    青文字のプロパティ名ではなく、テキストが直接入力されている場合、直接編集によってCMSプロパティとの紐付けが解除されています。

  4. [テキスト]の設定欄をクリックし、[CMSプロパティから選択]のリストから、該当のボックスに紐付けるテキストプロパティを選びます。

手順2. テキストプロパティを変更する

手順1で紐付けを修正しても表示したいテキストと異なる場合は、CMSダッシュボードでテキストプロパティを変更します。

  1. CMSダッシュボードを開き、変更したいアイテムが含まれるモデルを選択します。

  2. 以下の方法でテキストを登録します。

  3. 変更したいアイテムのテキストプロパティをダブルクリックして、テキストを打ち替えます。

  4. 公開中ステータスのアイテムを変更した場合には、ステータスを「変更あり」から「公開中」に変更してください。

  5. デザインエディタとライブプレビューで、変更した画像が反映されているか確認します。


リンクがすべて同じ内容になってしまった場合

リンクの設定方法は、リンク先の種類によって異なります。まず、設定したいリンクの種類を確認してください。

リンク先

設定方法

サイト内の動的ページ

リンク設定欄でCMSリストと同じCMSモデルが紐付いた動的ページを選択する

外部URL(アイテムごとに異なるURL)

テキストプロパティに外部URLを登録し、リンク設定欄で対象のボックスに紐付ける

手順1. リンク設定がされているボックスを探す

リンクが設定されているボックスを特定します。レイヤーパネルを使用する方法を紹介します。

  1. デザインエディタを開き、対象のCMSリストがあるページを開きます。

  2. レイヤーパネルを開き、対象のCMSリストのレイヤーを探します。リスト化された要素の先頭には水色の田の字アイコン が表示されます。

    レイヤーを選択すると、スクリーン上で該当の要素が連動して選択されます。ページ内に複数のリストがある場合は、スクリーン上の選択状態を確認しながら対象のレイヤーを探してください。

  3. リスト内のアイテムを選択します。対象のCMSリストのレイヤーが閉じている場合は、[>]をクリックしてトグルを開いてください。

    先頭に水色のリストアイテム番号が付き、右端に<li>タグが表示されたレイヤーを選択します。

  4. 右パネルで[設定]タブを選択します。パネルが閉じている場合には、右パネルを開いてください。

  5. [リンク]の設定欄に入力されている内容を確認します。文字列等が入力されていれば、その要素にリンクが設定されています。

    リストアイテムのリンク設定が空欄の場合は、さらに下位のレイヤー(子要素)にリンク設定がされています。[>]をクリックしてリストアイテムのトグルを開き、下位のレイヤーを選択してリンク設定欄を確認してください。

Tips:「親ボックスにリンク設定がある場合、このリンクは無効になります」と表示される場合

CMSリストのリストアイテム自体にリンク設定がされているときに、アイテム内の子ボックスが選択されていると表示されます。

リストアイテムのレイヤー(先頭に水色のリストアイテム番号 が付き、右端に<li>タグが表示された要素)を選択し直してください。

手順2. 紐付けを確認・修正する

対象のボックスのリンク設定を確認し、プロパティとの紐付けを修正します。

  1. 対象の要素の[リンク]設定の内容を確認します。

    変数(青文字のプロパティ名)がなく、URLが直接入力されている場合、直接編集によってプロパティとの紐付けが解除されています。

  2. 入力されているリンクを削除して、設定欄を空にします。

  3. リンク先の種類に合わせて、以下の設定をします。

    • サイト内の動的ページへのリンク:

      [リンク]設定欄をクリックし、サイト内のリンク先リストから、CMSリストと同じCMSモデルが紐付いた動的ページを選択します。

    • 外部URLへのリンク:

      リンク]設定欄をクリックし、右側に表示される[+]をクリックし、[CMSプロパティから選択]からCMSダッシュボードで登録済みのテキストプロパティを選択します。

手順3. CMSダッシュボードで外部リンクを変更する

手順2で紐付けを修正してもリンク先が意図したものと異なる場合には、CMSダッシュボードでテキストプロパティを修正し、リンク先URLの変更をします。

リンク先の変更ができるのは、外部リンクのみです。

テキストプロパティを変更すると、リンク先がダイレクトに切り替わります。

Point:

外部リンクは、外部リンクURLをテキストプロパティとして登録してリンク先として紐付けます。

外部リンクをプロパティとして登録する手順は、CMSリストのアイテムごとに異なる外部リンクを設定するを参照してください。

  1. 外部リンクを変更したいアイテムが含まれるモデルを選択します。

  2. 変更したいアイテムをクリックし、対象のテキストプロパティの内容を変更します。

  3. 公開中ステータスのアイテムを変更を加えた場合には、アイテムのステータスが変更ありに変わります。再度、ステータスを公開中に変更してください。

  4. デザインエディタに戻り、ライブプレビューや公開サイトでリンク先が変更されていることを確認します。

補足:動的ページのURLを変更する

動的ページへのリンクのURL自体を変更したい場合は、CMSダッシュボードでスラッグ(Slug)プロパティを変更します。

Slugを変更するとURLは変わりますが、リンク先のページ自体を変えることはできません。

注意:スラッグ(Slug)を変更すると、変更前のURLにアクセスできなくなります。外部サイトからのリンクやブックマークがある場合は、事前に影響範囲を確認してください。

  1. CMSダッシュボードを開きます。

  2. URLを変更したいアイテムが含まれるモデルを選択します。

  3. 変更したいアイテムのSlugプロパティをクリックして、URLの文字列を変更します。

  4. 公開中ステータスのアイテムを変更を加えた場合には、アイテムのステータスが変更ありに変わります。再度、ステータスを公開中に変更してください。

  5. デザインエディタに戻り、ライブプレビューや公開サイトでリンク先が変更されていることを確認します。

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