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

2023年5月15日

URLをコピーしました！

生徒

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

先生

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

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

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

この記事で分かること

STUDIOのカルーセルの使い方

STUDIOのカルーセルは2種類

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

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

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

カルーセルの設置

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

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

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

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

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

操作ボタン

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

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

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

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

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

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

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

表示データの編集

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

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

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

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

リストデータの追加

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

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

プロパティの追加

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

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

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

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

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

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

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

リストデータの削除

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

表示レイアウトの編集

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

項目の追加や削除

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

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

リストとの連携を編集

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

カルーセルの動作の設定

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

カルーセルの設定項目

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

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