すべてのコレクション
よくある質問
CMS
画像プロパティの状況によってCMSアイテムごとに表示内容変える方法
画像プロパティの状況によってCMSアイテムごとに表示内容変える方法

STUDIOの表示条件の活用方法の一例として、CMSプロパティに画像の登録があるかどうかに基づいて表示内容を変える方法を解説します。

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

CMSアイテムごとに表示を変える方法

STUDIOの表示条件を使用すると、CMSプロパティの状態によって表示する内容を動的に変えることができます。

本記事では一例として、画像が登録されている場合には登録画像を表示して、登録されていない場合にはテキストを表示させる方法をご紹介します。

表示をアイテムごとに切り替える際には、本記事の方法を応用してみてください。

スクリーンショット:表示条件を設定したCMSリストの例。

表示条件とCMSプロパティについては、以下の記事をご覧ください。

設定手順

1. カスタムタイプモデルを新規作成

2. プロパティの追加

「+プロパティを追加」ボタンをクリックして、追加したアイテムに画像プロパティを追加し、画像をアップロードします。

スクリーンショット:プロパティを追加する様子。

3. CMSリストの配置

次にエディタへ移動します。追加パネルのCMSメニューから、作成したカスタムタイプモデルのCMSリストをページに配置します。プロパティの紐付けとデザイン調整を行なってください。

4. 表示画像の設定

CMSリストに画像ボックスを追加し、画像プロパティを紐付けます。

スクリーンショット:プロパティを紐付ける様子。

次に、画像ボックスを選択した状態で、設定パネルの「表示条件」セクションをクリックし、以下の順で設定します。

  1. ドロップダウンから対象のCMSプロパティを選択します(例:画像)。

  2. 「条件」ドロップダウンで「is」を選択し、登録されている画像がある場合に表示を行うよう設定します。

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

5. 表示テキストの設定

CMSリストにテキストボックスを追加します。アイテムのタイトルなどを紐付けて表示できます。

次に、ボックスを選択した状態で、設定パネルの「表示条件」セクションをクリックし、以下の順で設定します。

  1. ドロップダウンから対象のCMSプロパティを選択します(例:画像)。

  2. 「条件」ドロップダウンで「is not」を選択します。

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

STUDIOの表示条件を活用することで、CMSプロパティの状態に応じて動的に表示を切り替えることが可能です。CMSの内容を活かしたインタラクティブなWebページを設計する際に、この機能をぜひご活用ください。

is is not

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