CMSアイテムごとに表示を変える方法
Studioの表示条件を使用すると、CMSプロパティの状態によって表示する内容を動的に変えることができます。
本記事では一例として、画像が登録されている場合には登録画像を表示して、登録されていない場合にはテキストを表示させる方法をご紹介します。
表示をアイテムごとに切り替える際には、本記事の方法を応用してみてください。
表示条件とCMSプロパティについては、以下の記事をご覧ください。
設定手順
1. カスタムタイプモデルを新規作成
カスタムタイプモデルを新規作成し、その後アイテムを追加します。
2. プロパティの追加
「+プロパティを追加」ボタンをクリックして、追加したアイテムに画像プロパティを追加し、画像をアップロードします。
3. CMSリストの配置
次にエディタへ移動します。追加パネルのCMSメニューから、作成したカスタムタイプモデルのCMSリストをページに配置します。プロパティの紐付けとデザイン調整を行なってください。
4. 表示画像の設定
CMSリストに画像ボックスを追加し、画像プロパティを紐付けます。
次に、画像ボックスを選択した状態で、設定パネルの「表示条件」セクションをクリックし、以下の順で設定します。
ドロップダウンから対象のCMSプロパティを選択します(例:画像)。
「条件」ドロップダウンで「is」を選択し、登録されている画像がある場合に表示を行うよう設定します。
5. 表示テキストの設定
CMSリストにテキストボックスを追加します。アイテムのタイトルなどを紐付けて表示できます。
次に、ボックスを選択した状態で、設定パネルの「表示条件」セクションをクリックし、以下の順で設定します。
ドロップダウンから対象のCMSプロパティを選択します(例:
画像
)。「条件」ドロップダウンで「is not」を選択します。
Studioの表示条件を活用することで、CMSプロパティの状態に応じて動的に表示を切り替えることが可能です。CMSの内容を活かしたインタラクティブなWebページを設計する際に、この機能をぜひご活用ください。
is
is not