Studio CMSでは、CMSアイテムに登録したプロパティをもとに、デザインエディタ上の要素の表示・非表示を切り替えられます。
この記事では、CMSアイテムの公開日時プロパティを使って、CMS記事を公開した直後の一定期間だけ「NEW」バッジを表示する方法を説明します。
Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
指定期間中のみ要素を表示する
公開日時プロパティ以外で日付情報を持ち、表示条件に利用できるプロパティは現在ありません。
そのため、特定の日付から一定期間だけ表示したい場合は、CMSダッシュボードで公開日時の編集を行います。
ユースケース
公開日から1週間以内の新着ブログ記事に「NEW」バッジを表示する。
期間限定価格の商品に、3日間だけ価格ラベル用のバッジを表示する。
キャンペーン商品に、1か月間「おすすめ」マークを表示する。
この記事では、お知らせ記事リストで公開日時から1週間以内の記事にだけ「NEW」バッジを表示するケースを扱います。
事前準備
表示条件で表示を切り替える対象（「NEW」バッジ）を作成する前に、Studio CMSで記事コンテンツを作成し、ページ構成を準備しておきます。
CMSダッシュボードで、お知らせ記事を作成します。
記事タイプのCMSモデルを作成し、記事アイテム（CMSアイテム）を追加します。
CMSアイテムの詳細編集画面で記事アイテムの本文を入力し、カテゴリなどの関連情報をプロパティとして追加します。
編集が完了した記事アイテムの公開ステータスを[公開中]に設定します。
デザインエディタで、動的ページを使用して、1で作成したCMSモデルを紐付けたお知らせ記事詳細ページを作成します。
デザインエディタで、CMSリストを使用して、1で作成したCMSモデルを紐付けたお知らせ記事リストを作成します。
CMS記事作成から公開までの全体像は、次の記事も合わせて参照してください。
「NEW」バッジの作成手順
Step 1. CMSダッシュボードで公開日時プロパティを設定する
まず、お知らせ記事の公開日時プロパティを確認し、必要に応じて編集します。
CMSダッシュボードで対象のお知らせ記事のCMSアイテムを開きます。
公開日時プロパティを確認します。デフォルトでは、記事を公開した日時が自動で設定されます。
公開開始日を調整したい場合は、記事の公開後に任意の日時に変更して、バッジの表示期間をコントロールします。
Step 2. デザインエディタで「NEW」バッジを配置する
お知らせ記事リストに「NEW」バッジを配置します。
デザインエディタで、記事リスト（CMSリスト）を表示しているページを開きます。
テキストボックスを追加して、「NEW」バッジを配置したいレイヤーに移動します。
テキストボックスに「NEW」と入力します。
テキストボックスをダブルクリック、または右パネルの[テキスト]タブ内のテキスト設定フィールドで文言と書式を編集します。
右パネルで、フォントサイズ・文字色・背景色・余白などを調整し、バッジとして視認しやすいデザインに整えます。以下のヘルプ記事も参考にしてください。
パネルが閉じている場合には、右パネルを開いてください。
Step 3. デザインエディタで表示条件を設定する
配置した「NEW」バッジに対して、公開日時を基準とした表示条件を設定します。
Step 4. 表示を確認する
最後に、「NEW」バッジが意図した期間にだけ表示されているか確認します。
関連記事