Studio CMSでは、CMSアイテムに登録したプロパティをもとに、要素の表示・非表示を切り替えられます。
本記事では、記事1件分のデータを「記事アイテム」と呼びます。
Point: Studio CMSとは
Studio CMSは、Studio上でコンテンツを構造化して管理・更新できるCMS（Content Management System）機能です。 モデルやアイテム、プロパティを組み合わせて、ブログやニュースなどの更新性が高いコンテンツを一元管理します。
Studio CMSの仕組みや基本的な使い方は、以下の記事も参照してください。
ユースケース
画像プロパティは、画像の登録有無で表示を切り替えたい場合に利用できます。
記事リストで、サムネイル画像が未登録の記事に代わりのテキストを表示する
メンバー紹介リストで、プロフィール画像が未登録のメンバーに名前の頭文字を表示する
この記事では、記事リストで、サムネイル画像が未登録の記事アイテムにテキストを表示します。
表示条件に使えるプロパティと活用例
表示条件に使うプロパティによって、表示を切り替えられる条件が変わります。目的に合う方法を選んでください。
表示を切り替える条件 | 使うプロパティ | 活用例 |
画像の登録有無で切り替える | 画像 | この記事 |
アイテムごとに手動で切り替える | ブール値 | |
公開から一定期間だけ表示する | 公開日時 |
事前準備
この記事の手順は、記事のCMSモデルとCMSリストを作成済みであることを前提としています。次の項目が完了しているか確認してください。
CMSダッシュボードで、記事を作成します。
記事タイプのCMSモデルを作成し、記事アイテムを追加します。
CMSアイテムの詳細編集画面で本文を入力し、サムネイル画像やカテゴリなどの情報をプロパティとして追加します。
編集が完了した記事アイテムの公開ステータスを[公開中]に設定します。
デザインエディタで、動的ページを使って記事詳細ページを作成します。ページには、1で作成したCMSモデルを紐付けます。
デザインエディタで、CMSリストを使って記事一覧を作成します。リストには、1で作成したCMSモデルを紐付けます。
記事リストの中に、画像プロパティを紐付けた画像ボックスを配置します。
CMSアイテムの作成から公開までの全体像は、次の記事を参照してください。
手順 1. 画像プロパティを紐付けた画像ボックスに表示条件を設定する
画像プロパティが登録されている記事アイテムにのみ、画像ボックスを表示する設定をします。
レイヤーパネルでリストの1つ目のアイテムを展開し、画像ボックスを選択します。
[表示条件]の入力欄をクリックします。
プロパティリストから、画像ボックスに紐付けている画像プロパティを選択します。
条件に[is set]を選択します。
画像プロパティが登録されている記事アイテムにのみ、画像ボックスが表示されます。
手順 2. 画像が未登録のときに表示するテキストを配置する
画像の代わりに表示するテキストボックスを配置し、表示条件を設定します。
画像ボックスを選択した状態で、追加パネルの[基本]から[Text]をクリックします。画像ボックスの直後にテキストボックスが追加されます。
右パネルの[テキスト]で、表示したいテキストを入力します。
テキストの見た目を調整します。
[テキスト]：フォントサイズ・太さ・文字色
[ボックス]：背景色・パディング
右パネルで[設定]を選択します。
[表示条件]の入力欄をクリックします。
プロパティリストから、手順1と同じ画像プロパティを選択します。
条件に[is not]を選択します。
画像プロパティが未登録の記事アイテムにのみ、テキストボックスが表示されます。
デザインの調整方法は、次の記事を参照してください。
手順 3. 表示を確認して公開する
画像とテキストが意図どおりに切り替わっているか確認します。
関連記事
is is not