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

CMSリストで、画像・テキスト・リンクを一つのアイテムだけ変更したいのに、他のアイテムも同じ内容になってしまう

デザインエディタ上でカード状に並ぶ画像やテキストを変更した際に、他の要素も同じ内容に変わってしまう場合の原因と対処方法を説明します。リストが動的なCMSリストである場合には、Studio CMSのモデルとCMSアイテムを編集することで、各カードの内容を個別に変更できます。

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

同一デザインの画像やテキストがカード状に複数並んでいる要素は、リストCMSリストを使用して作成されている場合があります。​
この記事では、CMSリストなどの動的な要素で画像・テキスト・リンクを編集する方法を説明します。

リスト要素(通常のリスト)の編集方法については、リストのアイテムごとに異なるリンクを設定するを参照してください。

Point: Studio CMSとは

Studio CMSは、Studio上で利用できるCMS(Content Management System)機能です。

仕組みや概要については、以下のヘルプ記事をご覧ください。


CMSリストの画像を変更する

  1. 変更したい画像がプロパティとして含まれるモデルを選択します。

  2. アイテム一覧画面から、該当のアイテムを選択します。

  3. 変更したい画像のプロパティをクリックして、新しい画像をアップロードして画像を変更します。

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

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


CMSリストのテキストを変更する

  1. 変更したいテキストが含まれるモデルを選択します。

  2. アイテム一覧画面から該当のアイテムを選択して、アイテムの詳細編集画面を開きます。

  3. 変更を加えたい記事を選択し、変更したいテキスト(タイトル、本文など)を更新してください。

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

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


CMSリストの外部リンクを変更する

外部リンクは、CMSダッシュボードでテキストプロパティとして登録した値を、デザインエディタ側のリンク設定フィールドから紐付けます。

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

  1. 変更したい外部リンクが登録されているテキストプロパティを含むCMSモデルを選択します。

  2. アイテム一覧画面から、該当のアイテムを選択します。

  3. 変更したい外部リンクのテキストプロパティを変更します。

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

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


CMSリストのCMS記事ページリンクを変更する方法

CMSリスト内アイテムの元ページであるCMS記事ページのリンクを変更する場合には、Slugプロパティを変更します。

  1. 記事ページリンク(Slugプロパティ)を変更したいアイテムが含まれるCMSモデルを選択します。

  2. アイテム一覧画面から該当のアイテムを選択します。

  3. 変更したいSlugプロパティをクリックして、プロパティを変更します。

  4. 設定後、デザインエディタまたはライブプレビューでリンクが変更されているか確認します。

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


誤って変更した画像・テキスト・リンクを元に戻したい

すでに画像やテキストがすべて同じ内容になっている場合は、CMSプロパティとの紐付けが外れている状態です。

この場合、各プロパティを再度ボックスに紐付けることで、アイテムごとに異なる内容を表示できます。

  1. 再度CMSプロパティを紐付けたいボックス要素を選択します。

  2. 右パネルで、要素に合わせた設定タブを開きます。

    • 画像の場合には、[画像]タブを選択し、画像URLの設定フィールドを表示します。

    • テキストの場合には、[テキスト]タブを選択し、テキストの設定フィールドを表示します。

    • リンクの場合には、[設定]タブを選択し、リンクの設定フィールドを表示します。

  3. 各設定フィールドをクリックして、[CMSプロパティから選択]から紐付けたいCMSプロパティを選択します。

    • リンク設定フィールドで外部リンクを設定する場合には、フィールド内の[+]をクリックして、[CMSプロパティから選択]から該当のテキストプロパティを選択します。

    • リンク設定フィールドで、CMS記事ページのリンクを設定する場合には、該当のCMS記事ページ(動的ページ)を選択します。

※サイトを公開する際、アイテムの公開ステータスが [下書き] のままの場合は公開サイトに反映されません。 必ず [公開] に設定してください。

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