STUDIOでのカルーセルの使い方

  • URLをコピーしました!
生徒

STUDIOのカルーセルの使い方が知りたいです。

先生

STUDIOのカルーセルの使い方を説明します

ノーコードのWEBデザインサービスSTUDIOには、カルーセルも部品として用意されていてノーコードで使用できます。

この記事ではSTUDIOのカルーセルの使い方を説明します。

この記事で分かること
  • STUDIOのカルーセルの使い方
目次

STUDIOのカルーセルは2種類

STUDIOのカルーセルには以下の2種類があります。

  • リストデータのカルーセル
  • CMSデータのカルーセル

リストデータのカルーセルの使い方

カルーセルの設置

リストデータのカルーセルはボックスグループから配置します。

配置したカルーセルの一番上のボックスを選択すると、カルーセルに表示するデータのリストや動作を設定するカルーセルが表示されます。

カルーセルは7個のボックスのリストで構成されています。

配置した直後は、4番目のボックスがスクリーン内に表示されている状態です。

この7個のボックスの増減はできないので、サイズを小さくしても一度に表示できるデータは7個までです。

操作ボタン

リストと同じ階層の一番上のボックスには、カルーセルの操作ボタンが配置されています。

操作ボタンは以下の3個があります。

  • 前の項目に戻る
  • カルーセルの動作の一時停止(再度クリックすると再開します)
  • 次の項目に進む

ボタンの見た目を変えたり位置を変えたりできますが、操作ボタンを新たに作成することはできないようです。

リストデータのカルーセルの編集

カルーセルの一番上のボックスを選択して、画面右端にのアイコンボタンをクリックします。

ボックスのプロパティに表示データのリストが表示されます。

表示データの編集

カルーセルに表示する内容の編集は、リストのデータを編集して行います。

編集したいセルをクリックして内容を変えると、カルーセルに表示される内容が変わります。

画像はクリックすると選択画面が開くので、リストから選択またはアップロードした画像に置き換えることができます。

選択した画像が置き換わって表示されます。

リストデータの追加

カルーセルに表示するデータを増やすには、リストの最下行の +Newボタンをクリックします。

リストの一番下に行が追加されます。

プロパティの追加

カルーセルに表示する内容を増やすためにリスト項目にプロパティを増やすには、リストの右上隅のボタンをクリックします。

追加できるデータの形式がリストに表示されるので選択します。

項目内容
テキストカルーセルに表示したい文字を入力します。
画像画像を登録することができます。
URL外部サイトのURL、またはプロジェクト内のページへのリンクを設定できます。

選択した形式の列がリストに追加されます。

プロパティ名の編集と削除

リストのプロパティの削除や名称の変更を行いたい場合は、リストの各列の見出し行にカーソルを合わせると表示されるボタンをクリックします。

プロパティ名の編集またはDeleteボタンでプロパティの列を削除することができます。

リストデータの削除

リストのデータを削除するには、右端のごみ箱アイコンの列をクリックします。

表示レイアウトの編集

カルーセルに表示する内容を編集するには、リストのボックスの内容を編集します。

項目の追加や削除

カルーセルのリストのボックス内は項目の追加や削除など自由に編集できます。

ボックスごとに表示レイアウトを変えることはできません。リストのすべてのボックスが同時に編集されます。

リストとの連携を編集

画面に表示するリストの項目をリストから選択します。

カルーセルの動作の設定

カルーセルの設定もカルーセルの1番上のボックスを選択すると表示されます。

カルーセルの設定項目

カルーセルには以下の設定項目があります。

項目説明
自動再生カルーセルを自動で進ませたい場合はONにします。
再生時間次の内容に切り替わるまでの時間をミリ秒で指定します。
送り時間次の内容へのスライド動作の時間をミリ秒で指定します。
ホバーで停止ONの場合マウスカーソルを載せた時に自動再生を停止します。

CMSデータのカルーセルを設置する

CMSデータのカルーセルはCMSにあります。

一番上のボックスを選択すると、表示するデータのリストや動作を設定するカルーセルが表示されます。

CMSデータのカルーセルの編集

CMSデータのカルーセルに表示するデータの編集は、CMSのデータを編集して行います。

CMSのデータの編集に関しては、以下の記事で説明しています。

CMSを初めて開くプロジェクトの場合

CMSにはじめてアクセスする場合 CMSをはじめるボタンをクリックします。

初期データとして、サンプル用のデータを作成するか選択できます。

ここではテンプレートデータを使うを選択してサンプル用のデータを使用します。

ブログ記事のサンプルデータPostsが作成されます。

この記事では、このデータを使用する形で説明していきます。

じぶん

CMSデータを設定

CMSデータのカルーセルの一番上のボックスを選択してリストの内容を編集します。

モデル

カルーセルで表示するデータを、CMSのモデルから選択します。

フィルタ

CMSデータの中の特定のデータのみ表示したい場合に、表示したいデータの条件を設定します。

表示数

カルーセルに表示するデータの数を設定します。

先頭から設定した数までのデータが、カルーセルにループして表示されます。

例えば、CMSデータが5個あっても表示数が1だと最初の1個だけがカルーセルに表示されます。

CMSデータのカルーセルの動作設定

CMSデータのカルーセルの動作の設定もリストデータと同じです。

カルーセルの動作の設定

よかったらシェアしてね!
  • URLをコピーしました!
目次