Studio CMSの表示条件活用例：画像プロパティの登録状況に応じて、画像とテキストを出し分ける

Studioの表示条件設定を活用すると、動的ページやCMS（動的）リストなどの動的な要素で、Studio CMSで設定済みのプロパティに応じて、ボックスの表示・非表示の切り替えが可能です。

この記事では、画像プロパティの登録有無に応じてサムネイル画像とテキストの表示をCMSリスト上で切り替える方法を紹介します。

Point: Studio CMSとは

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

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

表示条件の設定前に、Studio CMSで記事コンテンツを作成し、ページ構成を準備しておきます。

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

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

設定手順

CMSリストにテキストボックスを追加します。
テキストを入力し、右パネル上でフォントサイズ・文字色・背景色・余白などを調整してデザインに整えます。パネルが閉じている場合には、右パネルを開いてください。
以下のヘルプ記事も参考にしてください。
[表示条件]セクションの[表示条件を設定]をクリックします。
ドロップダウンから、画像ボックスに紐付けている画像プロパティを選択します。
条件として[is not]を選択します。
設定が完了すると、画像プロパティが未登録のアイテムのみ、テキストボックスが表示されます。

ライブプレビューを開き、画像ボックスとテキストボックスの表示切り替えが意図した通りになっているか確認します。
公開サイトで表示の確認をします。
該当のCMSアイテムのステータスが公開中であることを確認し、問題がなければ公開パネルからサイトを公開します。
公開中のサイトを編集している場合には、サイトを更新してください。

is is not