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

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. ボックスの追加やサイズ・色などのデザイン編集が行います。

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


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

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

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


関連記事

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