Point: カルーセルとは
カルーセルは、画像やテキストを含む複数の要素をスライド形式で順番に表示する機能です。スライダーやスライドショーとも呼ばれています。
注意:無限ループ再生はサポートしていません。詳しくは、カルーセルの自動再生機能で、要素の無限ループ再生はできますか?をご覧ください。
Studio CMSのコンテンツを使用したカルーセル
CMSカルーセルは、Studio CMS内のコンテンツデータをスライダー形式で表示する機能です。
CMSダッシュボードで管理しているデータがカルーセルに反映され、他のCMSリストや動的ページとも同じ情報を共有できます。
記事一覧や商品スライダーなど、更新頻度が高いコンテンツや複数ページでコンテンツデータを共通利用したい場合に適しています。
Point: Studio CMSとは
Studio CMSは、Studio上で利用できるCMS(Content Management System)機能です。
仕組みや概要については、以下のヘルプ記事をご覧ください。
CMSカルーセルを追加する
CMSカルーセルは、プリセットされたCMSカルーセルボックスをスクリーンに配置して利用します。
配置したカルーセルボックスにはあらかじめCMSモデルが紐付いており、デフォルトでタイトルや本文、画像などのプロパティが表示されます。
1. 事前準備:Studio CMSのコンテンツデータを準備する
CMSカルーセルを作成する前に、カルーセルに表示するためのコンテンツをStudio CMSで作成しておきます。
Studio CMSのコンテンツはCMSダッシュボードで作成します。
CMSモデルは記事タイプを選んでください。
Point: CMSカルーセルとCMSプロパティ
そのため、タイトル、本文、画像、カテゴリ、ボタンラベル、バッジ用フラグなど、カルーセルで必要な要素をプロパティとして設計する必要があります。
2. CMSカルーセルを追加する
デザインエディタ左側のナビゲーションで、接続アイコン
をクリックします。[CMS]タブから、1で作成したCMSモデルが紐付いた[カルーセル]を選択し、スクリーンに配置します。
CMSカルーセルで表示する情報(プロパティ)を追加する
カルーセル上で表示したい情報が増えた場合には、以下の手順で設定をします。
CMSダッシュボードでCMSモデルにプロパティを追加する
デザインエディタで、カルーセルのレイアウトにプロパティを紐付ける
1. CMSダッシュボードでCMSモデルにプロパティを追加する
カルーセルに紐付いているCMSモデルを選択し、モデル内のアイテム一覧画面を開きます。
一覧を右端までスクロールし、[+]からプロパティを追加します。
詳しい手順は、CMSプロパティを参照してください。
2. デザインエディタで、カルーセルのレイアウトにプロパティを紐付ける
デザインエディタを開きます。
CMSカルーセルのボックスを選択します。
右パネルで[データ]タブを開きます。
※パネルが閉じている場合は、右パネルを開いてください。
先ほど追加したプロパティ先頭の「・」をドラッグし、コネクターでボックス要素と繋ぎます。
CMSカルーセルで表示するコンテンツを編集する
CMSカルーセルで表示する情報(プロパティ)を変更する
タイトル、本文、画像、カテゴリ、ボタンラベル、バッジ用フラグなど、カルーセルで表示する情報を変更する際は、CMSプロパティの内容を編集する必要があります。
CMSカルーセルに紐づけるCMSモデルを変更する
以下の手順でカルーセルに紐付けるCMSモデルを変更できます。モデルを変更しても、カルーセル自体のデザインには影響しません。
対象のCMSカルーセルを選択します。
右パネルで[データ]タブを開きます。
パネルが閉じている場合は、右パネルを開いてください。
リスト右の紐付けデータの表示(青字)をクリックして、紐付けデータの変更をします。
CMSカルーセルアイテムの表示設定をする
表示設定の基本操作
フィルター
あらかじめ設定したCMSプロパティを元にフィルター条件を設定し、リストで表示するアイテムを絞り込めます。
注意:CMSカルーセルに紐付けたデータがCMSモデルの場合にのみ、フィルタリングが可能です。CMSコレクションの場合には利用できません。
設定方法などの詳細は、フィルター:CMSリストの表示アイテムを絞り込むを参照してください。
表示数
リストで表示するアイテムの最大数が指定できます。アイテム表示数は最大50件です。
なお、同一画面に同時に表示できるアイテム数は最大7件までです。
CMSカルーセルのデザイン編集
カルーセルボックス内のアイテムは、レイアウトやスタイルが共通です。
例えば、1アイテムのテキストサイズを編集すると、残り全てのアイテムも同様に編集内容が反映されます。
編集方法
リストアイテムを編集可能な状態(編集モード)にします。
カルーセルリストをダブルクリック、またはレイヤーパネルでリストアイテムを選択します。
ボックスの追加やサイズ・色などのデザイン編集が行います。
レイアウトや外観設定の方法については、以下のヘルプ記事を参照してください。
Tips:デザインの切り替えにCMSプロパティを活用する
CMSプロパティを活用すると、アイテムごとに表示・非表示や色、ラベルなどの見た目を切り替えられます。
<ユースケース>
特定のアイテムにのみ「新着バッジ」を表示する
アイテムごとにボタンの色を変更する
詳しくは、以下の記事をご覧ください。
CMSカルーセルに自動再生を設定する
カルーセルには自動再生が設定できます。
設定方法などの詳細は、カルーセルを自動再生するを参照してください。





