メインコンテンツにスキップ

CMSカルーセル

Studio CMSのコンテンツデータを反映させたカルーセルスライダーの作成方法を紹介します。データの編集や自動再生設定、表示件数やデザインの調整を行う方法を説明します。

今日アップデートされました

Point: カルーセルとは

カルーセルは、画像やテキストを含む複数の要素をスライド形式で順番に表示する機能です。スライダーやスライドショーとも呼ばれています。

Studioでは、静的なリストデータを使った「リストカルーセル」と、Studio CMSのデータを使った「CMSカルーセル」の2種類を実装できます。

注意:無限ループ再生はサポートしていません。詳しくは、カルーセルの自動再生機能で、要素の無限ループ再生はできますか?をご覧ください。

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で作成しておきます。

Point: CMSカルーセルとCMSプロパティ

CMSカルーセルに表示できる情報は、CMSモデルに定義したCMSプロパティに基づきます。

そのため、タイトル、本文、画像、カテゴリ、ボタンラベル、バッジ用フラグなど、カルーセルで必要な要素をプロパティとして設計する必要があります。

2. CMSカルーセルを追加する

  1. デザインエディタ左側のナビゲーションで、接続アイコンをクリックします。

  2. [CMS]タブから、1で作成したCMSモデルが紐付いた[カルーセル]を選択し、スクリーンに配置します。


CMSカルーセルで表示する情報(プロパティ)を追加する

カルーセル上で表示したい情報が増えた場合には、以下の手順で設定をします。

  1. CMSダッシュボードでCMSモデルにプロパティを追加する

  2. デザインエディタで、カルーセルのレイアウトにプロパティを紐付ける

1. CMSダッシュボードでCMSモデルにプロパティを追加する

  1. カルーセルに紐付いているCMSモデルを選択し、モデル内のアイテム一覧画面を開きます。

  2. 一覧を右端までスクロールし、[+]からプロパティを追加します。

詳しい手順は、CMSプロパティを参照してください。

2. デザインエディタで、カルーセルのレイアウトにプロパティを紐付ける

  1. CMSカルーセルのボックスを選択します。

  2. 右パネルで[データ]タブを開きます。

    ※パネルが閉じている場合は、右パネルを開いてください。

  3. 先ほど追加したプロパティ先頭の「・」をドラッグし、コネクターでボックス要素と繋ぎます。


CMSカルーセルで表示するコンテンツを編集する

CMSカルーセルで表示する情報(プロパティ)を変更する

タイトル、本文、画像、カテゴリ、ボタンラベル、バッジ用フラグなど、カルーセルで表示する情報を変更する際は、CMSプロパティの内容を編集する必要があります。

  1. カルーセルに紐付いているCMSモデルを選択し、編集したいCMSアイテムの詳細画面を開きます。

  2. 該当のCMSプロパティの内容を編集します。

    アイテムの編集項目や編集方法の詳細は、CMSアイテムを参照してください。

CMSカルーセルに紐づけるCMSモデルを変更する

以下の手順でカルーセルに紐付けるCMSモデルを変更できます。モデルを変更しても、カルーセル自体のデザインには影響しません。

  1. 対象のCMSカルーセルを選択します。

  2. 右パネルで[データ]タブを開きます。

    パネルが閉じている場合は、右パネルを開いてください。

  3. リスト右の紐付けデータの表示(青字)をクリックして、紐付けデータの変更をします。


CMSカルーセルアイテムの表示設定をする

表示設定の基本操作

  1. 表示設定をしたい動的リストを選択します。

    リスト内のアイテムではなく、リスト自体を選択してください。

    (レイヤーパネルで要素を選択する場合には、リストアイコンのレイヤーを選択します)

  2. 右パネルで[データ]タブを開きます。

    パネルが閉じている場合は、右パネルを開いてください。

  3. 各項目の設定を行います。

  4. すでにサイトを公開済みの場合には、設定後、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。

フィルター

あらかじめ設定したCMSプロパティを元にフィルター条件を設定し、リストで表示するアイテムを絞り込めます。

注意:CMSカルーセルに紐付けたデータがCMSモデルの場合にのみ、フィルタリングが可能です。CMSコレクションの場合には利用できません。

設定方法などの詳細は、フィルター:CMSリストの表示アイテムを絞り込むを参照してください。

表示数

リストで表示するアイテムの最大数が指定できます。アイテム表示数は最大50件です。

なお、同一画面に同時に表示できるアイテム数は最大7件までです。


CMSカルーセルのデザイン編集

カルーセルボックス内のアイテムは、レイアウトやスタイルが共通です。

例えば、1アイテムのテキストサイズを編集すると、残り全てのアイテムも同様に編集内容が反映されます。

編集方法

  1. リストアイテムを編集可能な状態(編集モード)にします。

    カルーセルリストをダブルクリック、またはレイヤーパネルでリストアイテムを選択します。

  2. ボックスの追加やサイズ・色などのデザイン編集が行います。

    レイアウトや外観設定の方法については、以下のヘルプ記事を参照してください。

Tips:デザインの切り替えにCMSプロパティを活用する

CMSプロパティを活用すると、アイテムごとに表示・非表示や色、ラベルなどの見た目を切り替えられます。

<ユースケース>

  • 特定のアイテムにのみ「新着バッジ」を表示する

  • アイテムごとにボタンの色を変更する

詳しくは、以下の記事をご覧ください。


CMSカルーセルに自動再生を設定する

カルーセルには自動再生が設定できます。

設定方法などの詳細は、カルーセルを自動再生するを参照してください。


関連記事

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