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

Studio CMSの表示条件活用例:特定のCMSアイテムにのみ「NEW」バッジを表示する

CMSアイテムのブール値を基準に、特定のCMSアイテムにのみ特定の要素を表示することができます。この記事では、新着商品(CMSアイテム)にのみ「NEW」バッジを表示する手順をご紹介します。

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

Point: Studio CMSとは

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

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

動的な要素に設定できる表示条件をCMSプロパティのブール値プロパティと組み合わせて活用すると、特定の要素の表示・非表示をアイテムごとに制御できます。

ユースケース

  • 商品リストや記事詳細ページ上で、新着商品に限定して「NEW」バッジを表示する。

  • イベントのリストや詳細ページ上で、開催中のイベントに限定して申し込みボタンを表示する。

この記事では、レストランのメニューを登録したCMSモデルを例に、新着メニューにのみメニューリスト(CMSリスト)上で「NEW」バッジを表示する手順を説明します。

Tips:表示条件に他のCMSプロパティを活用する

CMSプロパティと表示条件を組み合わせると、動的ページCMSリストで要素の表示を柔軟に制御できます。
活用例は、次の記事も参照してください。


事前準備

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

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

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

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

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


手順 1. ブール値プロパティを設定する

CMSダッシュボードでブール値プロパティを作成し、「NEW」バッジの表示対象となるCMSアイテムを切り分けます。

  1. CMSダッシュボードで、対象のCMSモデルを開き、CMSアイテムの一覧を表示します。

  2. アイテム一覧を右にスクロールし、右端の[+]をクリックします。​

  3. [+ プロパティを追加]をクリックします。​

  4. プロパティタイプから[ブール値]プロパティを選択し、[追加]をクリックします。

    プロパティ名は「NEWバッジ」など、用途がわかりやすい名前を入力します。デザインエディタ上で判別しやすくなります。

  5. 追加した[NEWバッジ]列で、各CMSアイテムごとに有効・無効を設定します。

    「NEW」バッジを表示したいCMSアイテムのブール値を有効(オン / 青)にします。

手順 2. デザインエディタで「NEW」バッジを配置する

CMSリストに「NEW」バッジを配置します。

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

  2. テキストボックスを追加して、「NEW」バッジを配置したいレイヤーに移動します。

  3. テキストボックスに「NEW」と入力します。

    テキストボックスをダブルクリック、または右パネルの[テキスト]タブ内のテキスト設定フィールドで文言と書式を編集します。

  4. 右パネルで、フォントサイズ・文字色・背景色・余白などを調整し、バッジとして視認しやすいデザインに整えます。以下のヘルプ記事も参考にしてください。

    パネルが閉じている場合には、右パネルを開いてください。

手順 3. デザインエディタで表示条件を設定する

配置した「NEW」バッジに対して、手順1で追加したブール値プロパティを使った表示条件を設定します。

  1. 「NEW」バッジを選択します。

  2. 右パネルで[設定]タブを選択します。

    パネルが閉じている場合には、右パネルを開いてください。

  3. 表示条件フィールドをクリックします。

  4. プロパティリストからブール値プロパティ[NEWバッジ]を選択します。

  5. 条件に[is True]を設定します。

    これにより、[NEWバッジ]が有効(true)になっているCMSアイテムに紐づく場合のみ、「NEW」バッジが表示されるようになります。

手順 4. 表示を確認する

最後に、「NEW」バッジが意図した期間にだけ表示されているか確認します。

  1. ライブプレビューを開き、「NEW」バッジを表示したいCMSアイテムにのみ「NEW」バッジが表示されているか確認します。

  2. 公開サイトを確認します。

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

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

    スクリーンショット:サイトを公開する様子。

関連記事

出し分け 新着 表示のカスタマイズ

こちらの回答で解決しましたか?