Point: Studio CMSとは
Studio CMSは、Studio上で利用できるCMS(Content Management System)機能です。
仕組みや概要については、以下のヘルプ記事をご覧ください。
Studio CMSプロパティのカラープロパティを活用して、CMSリスト内のアイテムごとに個別の色を設定できます。
本記事では、対象のCMSモデルに直接カラープロパティを追加し、その値をボックスの背景色に反映する手順を説明します。
Tips:カラープロパティの活用
カラープロパティは、ボックスの塗りだけでなく、テキストボックスの文字色として使うこともできます。
カテゴリごとにバッジの色を変えたり、ステータスごとにテキストの色を変えたりする用途にも適しています。
事前準備
この記事で紹介する手順は、CMS記事コンテンツを作成済みであることを前提としています。以下について対応済みであることを確認してください。
CMSダッシュボードで、お知らせ記事を作成します。
記事タイプのCMSモデルを作成し、記事アイテム(CMSアイテム)を追加します。
CMSアイテムの詳細編集画面で記事アイテムの本文を入力し、カテゴリなどの関連情報をプロパティとして追加します。
編集が完了した記事アイテムの公開ステータスを[公開中]に設定します。
デザインエディタで、動的ページを使用して、1で作成したCMSモデルを紐付けたお知らせ記事詳細ページを作成します。
デザインエディタで、CMSリストを使用して、1で作成したCMSモデルを紐付けたお知らせ記事リストを作成します。
CMS記事作成から公開までの全体像は、次の記事も合わせて参照してください。
手順1. モデルにカラープロパティを追加する
対象のCMSモデルに[カラー]プロパティを追加し、アイテムごとの色を設定します。
CMSダッシュボードで対象のCMSモデルを開きます。
アイテム一覧の右端の[+]をクリックします。
[+プロパティを追加]をクリックし、プロパティ一覧から[カラー]を選択します。
プロパティ名に「背景色」など、用途が分かる名前を入力して保存します。
アイテム一覧または各アイテムの詳細編集画面から、カラーコードなどを活用して色を設定します。
手順 2. CMSリスト内のボックスを用意する
リストアイテム内で色を反映させるボックスを用意します。
デザインエディタで、対象のCMSリストを配置しているページを開きます。
CMSリスト内に色を変更したい箇所にボックスを配置します。(既存のボックスを使っても構いません)
ボックスのサイズや位置を調整し、色を変えたいラベルやカードの背景として使える状態に整えます。
手順3. カラープロパティをボックスの塗りに設定する
CMSモデルの[カラー]プロパティを、リストアイテム内ボックスの塗りに紐づけます。
手順 4. 表示を確認する
最後に、カラープロパティが意図した通りに反映されているかを確認します。






