Studio CMSの表示条件活用例：公開日時から指定した期間のみ「NEW」バッジを表示する

Studio CMSでは、CMSアイテムに登録したプロパティをもとに、要素の表示・非表示を切り替えられます。

この記事では、公開日時プロパティを使い、公開から一定期間だけ「NEW」バッジを表示する方法を説明します。

本記事では、お知らせ記事1件分のデータを「記事アイテム」と呼びます。

Point: Studio CMSとは

Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。

Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。

ユースケース

公開日時プロパティは、公開からの経過期間で表示を自動的に切り替えたい場合に向いています。

この記事では、お知らせ記事リストで、公開日時から1週間以内の記事アイテムにのみ「NEW」バッジを表示します。

注意：日付で表示を切り替えられるのは公開日時プロパティのみです

公開日時以外に、日付情報を持ち表示条件に使えるプロパティはありません。特定の日付から表示を始めたい場合は、CMSダッシュボードで公開日時を編集します。

表示条件に使うプロパティによって、表示を切り替えられる条件が変わります。目的に合う方法を選んでください。

表示を切り替える条件	使うプロパティ	活用例
公開から一定期間だけ表示する	公開日時	この記事
アイテムごとに手動で切り替える	ブール値	特定のCMSアイテムにのみ「SOLD OUT」ラベルを表示する
画像の登録有無で切り替える	画像	画像プロパティの登録状況に応じて、画像とテキストを出し分ける

この記事の手順は、お知らせ記事のCMSモデルとCMSリストを作成済みであることを前提としています。次の項目が完了しているか確認してください。

CMSダッシュボードで、お知らせ記事を作成します。
- 記事タイプのCMSモデルを作成し、記事アイテムを追加します。
- CMSアイテムの詳細編集画面で本文を入力し、カテゴリなどの情報をプロパティとして追加します。
- 編集が完了した記事アイテムの公開ステータスを[公開中]に設定します。
デザインエディタで、動的ページを使ってお知らせ記事詳細ページを作成します。ページには、1で作成したCMSモデルを紐付けます。
デザインエディタで、CMSリストを使ってお知らせ記事リストを作成します。リストには、1で作成したCMSモデルを紐付けます。

CMSアイテムの作成から公開までの全体像は、次の記事を参照してください。

CMSダッシュボードで記事アイテムの公開日時を確認し、必要に応じて変更します。

お知らせ記事リストの中に「NEW」バッジを配置します。リストの1つ目のアイテムに配置すると、ほかのアイテムにも同じ要素が反映されます。

デザインの調整方法は、次の記事を参照してください。

配置した「NEW」バッジに、公開日時を基準とした表示条件を設定します。

「NEW」バッジを選択します。
右パネルで[設定]を選択します。パネルが閉じている場合は、右パネルを開いてください。
[表示条件]の入力欄をクリックします。
プロパティリストから[公開日時]を選択します。
期間を[1][週間]に設定します。
期間の単位は[日][週間][月間][年間]から選べます。公開日時から指定した期間内の記事アイテムにのみ、バッジが表示されます。

バッジが意図した期間の記事アイテムにのみ表示されているか確認します。