Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS(Content Management System)機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
ユースケース
商品リストや記事詳細ページ上で、新着商品に限定して「NEW」バッジを表示する。
イベントのリストや詳細ページ上で、開催中のイベントに限定して申し込みボタンを表示する。
この記事では、レストランのメニューを登録したCMSモデルを例に、新着メニューにのみメニューリスト(CMSリスト)上で「NEW」バッジを表示する手順を説明します。
Tips:表示条件に他のCMSプロパティを活用する
事前準備
この記事で紹介する手順は、CMS記事コンテンツを作成済みであることを前提としています。以下について対応済みであることを確認してください。
CMSダッシュボードで、お知らせ記事を作成します。
記事タイプのCMSモデルを作成し、記事アイテム(CMSアイテム)を追加します。
CMSアイテムの詳細編集画面で記事アイテムの本文を入力し、カテゴリなどの関連情報をプロパティとして追加します。
編集が完了した記事アイテムの公開ステータスを[公開中]に設定します。
デザインエディタで、動的ページを使用して、1で作成したCMSモデルを紐付けたお知らせ記事詳細ページを作成します。
デザインエディタで、CMSリストを使用して、1で作成したCMSモデルを紐付けたお知らせ記事リストを作成します。
CMS記事作成から公開までの全体像は、次の記事も合わせて参照してください。
手順 1. ブール値プロパティを設定する
CMSダッシュボードでブール値プロパティを作成し、「NEW」バッジの表示対象となるCMSアイテムを切り分けます。
CMSダッシュボードで、対象のCMSモデルを開き、CMSアイテムの一覧を表示します。
アイテム一覧を右にスクロールし、右端の[+]をクリックします。
[+ プロパティを追加]をクリックします。
プロパティタイプから[ブール値]プロパティを選択し、[追加]をクリックします。
プロパティ名は「NEWバッジ」など、用途がわかりやすい名前を入力します。デザインエディタ上で判別しやすくなります。
追加した[NEWバッジ]列で、各CMSアイテムごとに有効・無効を設定します。
「NEW」バッジを表示したいCMSアイテムのブール値を有効(オン / 青)にします。
手順 2. デザインエディタで「NEW」バッジを配置する
CMSリストに「NEW」バッジを配置します。
デザインエディタで、対象のCMSモデルが紐付いたCMSリストを配置しているページを開きます。
テキストボックスを追加して、「NEW」バッジを配置したいレイヤーに移動します。
テキストボックスに「NEW」と入力します。
テキストボックスをダブルクリック、または右パネルの[テキスト]タブ内のテキスト設定フィールドで文言と書式を編集します。
右パネルで、フォントサイズ・文字色・背景色・余白などを調整し、バッジとして視認しやすいデザインに整えます。以下のヘルプ記事も参考にしてください。
パネルが閉じている場合には、右パネルを開いてください。
手順 3. デザインエディタで表示条件を設定する
配置した「NEW」バッジに対して、手順1で追加したブール値プロパティを使った表示条件を設定します。
手順 4. 表示を確認する
最後に、「NEW」バッジが意図した期間にだけ表示されているか確認します。
関連記事
出し分け 新着 表示のカスタマイズ





