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

Studio CMSのプロパティ活用例:CMSアイテムごとに要素の色を変える

Studio CMSの[カラー]プロパティを活用して、CMSリスト内のアイテムごとに個別の色を設定する方法を紹介します。

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

Point: Studio CMSとは

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

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

Studio CMSプロパティのカラープロパティを活用して、CMSリスト内のアイテムごとに個別の色を設定できます。
本記事では、対象のCMSモデルに直接カラープロパティを追加し、その値をボックスの背景色に反映する手順を説明します。

Tips:カラープロパティの活用

カラープロパティは、ボックスの塗りだけでなく、テキストボックスの文字色として使うこともできます。
カテゴリごとにバッジの色を変えたり、ステータスごとにテキストの色を変えたりする用途にも適しています。


事前準備

この記事で紹介する手順は、CMS記事コンテンツを作成済みであることを前提としています。以下について対応済みであることを確認してください。

  1. CMSダッシュボードで、お知らせ記事を作成します。

  2. デザインエディタで、動的ページを使用して、1で作成したCMSモデルを紐付けたお知らせ記事詳細ページを作成します。

  3. デザインエディタで、CMSリストを使用して、1で作成したCMSモデルを紐付けたお知らせ記事リストを作成します。

CMS記事作成から公開までの全体像は、次の記事も合わせて参照してください。​


手順1. モデルにカラープロパティを追加する

対象のCMSモデルに[カラー]プロパティを追加し、アイテムごとの色を設定します。

  1. CMSダッシュボードで対象のCMSモデルを開きます。

  2. アイテム一覧の右端の[+]をクリックします。

  3. [+プロパティを追加]をクリックし、プロパティ一覧から[カラー]を選択します。

  4. プロパティ名に「背景色」など、用途が分かる名前を入力して保存します。

  5. アイテム一覧または各アイテムの詳細編集画面から、カラーコードなどを活用して色を設定します。

手順 2. CMSリスト内のボックスを用意する

リストアイテム内で色を反映させるボックスを用意します。

  1. デザインエディタで、対象のCMSリストを配置しているページを開きます。

  2. CMSリスト内に色を変更したい箇所にボックスを配置します。(既存のボックスを使っても構いません)

  3. ボックスのサイズや位置を調整し、色を変えたいラベルやカードの背景として使える状態に整えます。

手順3. カラープロパティをボックスの塗りに設定する

CMSモデルの[カラー]プロパティを、リストアイテム内ボックスの塗りに紐づけます。

  1. リストアイテム内で、色を変えたいボックスをスクリーン上で選択します。

    レイヤーパネルで対象のボックスが選択されていることを確認します。

  2. 右パネルで[ボックス]タブを開き、[外観]メニューの[背景色]を探します。パネルが閉じている場合は、右パネルを開いてください。

  3. 背景色のサムネイル画像をクリックして、カラーパレットで[CMS]タブを選択します。

  4. カラープロパティを選択し、反映します。

手順 4. 表示を確認する

最後に、カラープロパティが意図した通りに反映されているかを確認します。

  1. ライブプレビューを開き、表示を確認します。​

  2. 該当のCMSアイテムのステータスが公開中であることを確認し、問題がなければ公開パネルからサイトを公開します。

  3. すでに公開中のサイトの場合には、サイトを更新を行い、公開サイトへ反映します。

    スクリーンショット:サイトを公開する様子。
こちらの回答で解決しましたか?