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



STUDIOのカルーセルの使い方を説明します
ノーコードのWEBデザインサービスSTUDIOには、カルーセルも部品として用意されていてノーコードで使用できます。
この記事ではSTUDIOのカルーセルの使い方を説明します。
- STUDIOのカルーセルの使い方
STUDIOのカルーセルは2種類
STUDIOのカルーセルには以下の2種類があります。
- リストデータのカルーセル
- CMSデータのカルーセル
リストデータのカルーセルの使い方
カルーセルの設置
リストデータのカルーセルはボックス
グループから配置します。


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


カルーセルは7個のボックスのリストで構成されています。
配置した直後は、4番目のボックスがスクリーン内に表示されている状態です。




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


操作ボタンは以下の3個があります。
- 前の項目に戻る
- カルーセルの動作の一時停止(再度クリックすると再開します)
- 次の項目に進む


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


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


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


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


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


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


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


プロパティの追加
カルーセルに表示する内容を増やすためにリスト項目にプロパティを増やすには、リストの右上隅の +ボタンをクリックします。
追加できるデータの形式がリストに表示されるので選択します。
項目 | 内容 |
---|---|
テキスト | カルーセルに表示したい文字を入力します。 |
画像 | 画像を登録することができます。 |
URL | 外部サイトのURL、またはプロジェクト内のページへのリンクを設定できます。 |


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


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


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


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


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


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




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


カルーセルの動作の設定
カルーセルの設定もカルーセルの1番上のボックスを選択すると表示されます。
カルーセルの設定項目
カルーセルには以下の設定項目があります。
項目 | 説明 |
---|---|
自動再生 | カルーセルを自動で進ませたい場合はONにします。 |
再生時間 | 次の内容に切り替わるまでの時間をミリ秒で指定します。 |
送り時間 | 次の内容へのスライド動作の時間をミリ秒で指定します。 |
ホバーで停止 | ONの場合マウスカーソルを載せた時に自動再生を停止します。 |
CMSデータのカルーセルを設置する
CMSデータのカルーセルはCMS
にあります。


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


CMSデータのカルーセルの編集
CMSデータのカルーセルに表示するデータの編集は、CMSのデータを編集して行います。
CMSのデータの編集に関しては、以下の記事で説明しています。


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


初期データとして、サンプル用のデータを作成するか選択できます。
ここではテンプレートデータを使う
を選択してサンプル用のデータを使用します。


ブログ記事のサンプルデータPosts
が作成されます。
この記事では、このデータを使用する形で説明していきます。


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


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


フィルタ
CMSデータの中の特定のデータのみ表示したい場合に、表示したいデータの条件を設定します。
表示数
カルーセルに表示するデータの数を設定します。
先頭から設定した数までのデータが、カルーセルにループして表示されます。
CMSデータのカルーセルの動作設定
CMSデータのカルーセルの動作の設定もリストデータと同じです。