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

動的リスト・動的ページの表示条件設定

表示条件とは、動的(CMS)リストや動的ページ内の要素を特定の条件下でのみ表示させる機能です。コンテンツの状態や設定済みのプロパティに応じて、要素の表示・非表示の切り替えが可能です。

一週間前以上前にアップデートされました

Point: Studio CMSとは

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

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

表示条件の仕組みと種類

表示条件は、CMSプロパティを基準に設定します。設定可能なプロパティと条件タイプの組み合わせは以下の通りです。

設定できる表示条件の種類

プロパティ

条件タイプ

プロパティの状態

公開日時プロパティ以外のすべてのプロパティ

is set

対象のプロパティが設定されている場合に表示

公開日時プロパティ以外のすべてのプロパティ

is empty

対象のプロパティが設定されていない場合に表示

is

対象のプロパティが指定した値と一致する場合に表示

is not

対象のプロパティが指定した値と一致しない場合に表示

〜から , 日/週間/月間/年間

対象のプロパティが指定期間内の場合に表示


「is set」と「is empty」条件

「is set」「is empty」では、CMSアイテムに対象プロパティが設定されているかどうかにもとづいて、要素の表示・非表示を切り替えます。

ユースケース:

  • 開催中のイベントにのみ申し込みボタンを表示する

  • セール対象の商品にのみ「SALE」バッジを表示する

設定可能なプロパティ:

スクリーンショット:表示条件を設定する様子。


「is」と「is not」条件

「is」「is not」は、指定した値と一致する(または一致しない)場合のみ要素を表示したいときに使用します。

ユースケース

  • 特定のライターアイテムに紐づくブログ記事にだけバッジを表示する

  • 特定カテゴリー以外のブログ記事にのみ要素を表示する

設定可能なプロパティ

スクリーンショット:表示条件が設定された様子。

表示条件を設定する

  1. 要素を選択します。

    エディタ上で、CMSリストまたは動的ページ内にある、特定の条件下でのみ表示する(または表示しない)要素を選択します。

  2. 表示条件を開きます。

    右パネルで[設定]タブを開きます。

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

    スクリーンショット:表示条件を設定する様子。

  3. プロパティを選択します。

    表示条件の[表示条件を設定]入力フィールドをクリックして、条件として使用するプロパティを選択します。

    スクリーンショット:表示条件のプロパティを設定する様子。
  4. 表示条件を選択します。

    スクリーンショット:表示条件を選択する様子。
  5. 動作確認をします。

    • ページパネル下部のセレクターで記事ページ内の表示アイテムを切り替えて、プロパティを紐付けたボックスの表示が適切に切り替わることを確認します。

    • ライブプレビューを開き、正しく表示されているか確認します。​

    • 公開サイトでの表示を確認します。

      • 該当のすべてのCMSアイテムのステータスが公開中であることを確認します。

      • 問題がなければ公開パネルからサイトを公開します。すでに公開中のサイトの場合には、サイトを更新を行い、公開サイトへ反映します。


表示条件を解除する

  1. 要素を選択します。

    エディタ上で、表示条件を解除したい要素を選択します。

  2. 表示条件を開きます。

    右パネルで[設定]タブを開きます。

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

    スクリーンショット:表示条件を設定する様子。

    表示条件右の「×」をクリックして、表示条件を解除します。

    スクリーンショット:表示条件を選択する様子。


よくある質問

Q. 複数の通常ページに同じ動的リストを配置する場合、表示条件は共有されますか?

A: いいえ、通常ページの場合は共有されません。同じ動的リストでも、配置した各通常ページごとに異なる表示条件を設定できます。

つまり、ページAに配置した動的リストと同じリストをページBに配置しても、それぞれ異なる表示条件を適用可能です。

ただし、動的ページに配置したする場合、同じ動的ページ内では表示条件は共通の設定となります。

Q. プロパティが選択肢に表示されません。

A: プロパティが「参照プロパティのマルチセレクト」になっている可能性がありません。参照プロパティのマルチセレクトは表示条件として選択できません。

マルチセレクトの場合、プロパティの削除とシングルセレクトとして再設定が必要になります。

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