生徒STUDIOのカルーセルの使い方が知りたいです
先生STUDIOのカルーセルの使い方を説明します
STUDIOのカルーセルについて
ノーコードのWEBデザインツールSTUDIOには、カルーセルも部品として用意されていて、コードを書かずに簡単に設置できます。
この記事では、STUDIOのカルーセルの使い方を説明します。
STUDIOのカルーセルは2種類
STUDIOのカルーセルには以下の2つの種類があります。
- リストカルーセル（リストのデータを表示する）
- CMSカルーセル（CMSのデータを表示する）
リストカルーセル
リストカルーセルを設置する
カルーセルの設置
リストカルーセルは、画面左側のパネルを開きます。
追加タブでボックスを開いて、下の方にあるCarouselをクリックするとカルーセルが追加されます。
カルーセルは7個のボックスのリストで構成されています。
配置した直後は、4番目のボックスがスクリーン内に表示されている状態です。
カルーセルの操作ボタン
リストと同じ階層の一番上のボックスには、カルーセルの操作ボタンが配置されています。
操作ボタンは以下の3つがあります。
- 前の項目に戻る
- カルーセルの動作の一時停止（再度クリックすると再開します）
- 次の項目に進む
リストカルーセルの編集
リスト内容の表示
カルーセルの内容を表示するには、画面左側のパネルを開きます。
レイヤーを選択すると、カルーセルのデータのリストが表示されます。
表示データの編集
カルーセルに表示する内容を編集するにはリストのデータを編集します。
編集したいセルをクリックして内容を書き換えると、カルーセルに表示される内容が変わります。
画像を変更するには、リストの画像をクリックします。
画像を選択する画面が表示されて、リストから選択するかアップロードして画像を置き換えることができます。
リストデータを追加する
カルーセルに表示するデータを増やすには、リストの最下行の ＋Newボタンをクリックします。
リストの一番下に行が追加されます。
リスト項目のプロパティを追加
カルーセルに表示する内容を増やすために、リストの項目を増やすには、リストの右上隅の ＋ボタンをクリックします。
追加できるデータの形式がリストに表示されるので選択します。
| 項目 | 内容 |
|---|---|
| テキスト | カルーセルに表示したい文字を入力します。 |
| 画像 | 画像を登録することができます。 |
| URL | 外部サイトのURL、またはプロジェクト内のページへのリンクを設定できます。 |
| ブール値 | ONまたはOFFの2つの値を持ちます。 |
| カラー | RGBやHEX、またはHSLの値で色の値を持ちます。 |
選択した形式の列がリストに追加されます。
プロパティ名の編集と削除
リストのプロパティの削除や名称の変更を行いたい場合は、リストの各列の見出し行をクリックします。
プロパティ名の編集またはDeleteボタンでプロパティの列を削除することができます。
リストデータの削除
リストのデータを削除するには、右端の列にカーソルを合わせると表示されるごみ箱アイコンの列をクリックします。
表示レイアウトの編集
カルーセルに表示する内容を編集するには、リストのボックスの内容を編集します。
カルーセルのリストのボックス内の要素を選択します。
項目の追加や削除
カルーセルのリストのボックス内は、項目の追加や削除など自由に編集できます。
リストの連携を編集
表示する値を取得するリストの項目を選択します。
表示データの編集
リストのデータのテキストからタグを除去したり、最大文字数を設定できるフィルタを追加できます。
リンクの追加
画面項目をクリックすると開くリンクを設定できます。
カルーセルの動作を設定する
カルーセルの1番上のボックスを選択して画面右側のパネルを開くと、カルーセルの動きを設定できます。
カルーセルの動作設定
カルーセルの動作設定には以下の項目があります。
| 項目 | 説明 |
|---|---|
| 自動再生 | カルーセルを自動で進ませたい場合はONにします。 |
| 再生時間 | 次の内容に切り替わるまでの時間をミリ秒で指定します。 |
| 送り時間 | 次の内容へのスライド動作の時間をミリ秒で指定します。 |
| ホバーで停止 | ONの場合マウスカーソルを載せた時に自動再生を停止します。 |
CMSカルーセル
CMSカルーセルを設置する
CMSカルーセルも、画面左側のパネルから追加します。
追加を開いてCMSを選択すると、CMSカルーセルがあるので配置します。
CMSにはじめてアクセスする場合 CMSをはじめるボタンが表示されるのでクリックします。
初期データとして、サンプル用のデータを作成するか選択できます。
ここではテンプレートデータを使うを選択してサンプル用のデータを使用します。
ブログ記事のサンプルデータPostsが作成されます。
この記事では、このデータを使用する形で説明していきます。
CMSカルーセルのデータの編集
一番上のボックスを選択して、画面左側のパネルでレイヤーを開くとCarouselに表示するデータの設定が表示されます。
モデル
モデルカルーセルで表示するデータを、CMSのモデルから選択します。
ひとつ上のリストからも、CMSカルーセルに紐付けるデータを選択できます。
フィルター
CMSデータの中の特定のデータのみ表示したい場合に、表示するデータの条件を設定します。
モデルでのフィルタ
モデルのデータでフィルタする場合は、フィルターでモデルを選択します。
フィルター条件にモデルの値のリストが表示されるので、カルーセルに表示するデータを選択します。
表示数
カルーセルに表示するデータの数を設定します。
先頭から設定した数までのデータが、カルーセルにループして表示されます。
CMSカルーセルの表示の編集
画面左側のレイヤーで、カルーセルのリストボックスを選択すると、連携しているデータが表示されます。
表示項目の編集
画面に項目を追加するには、画面左側のパネルの追加を開いて画面要素を追加します。
連携するデータの編集
レイヤーを開いて、表示したいデータ項目の右端の・を追加した項目にドラッグします。
画面項目とCMSデータの項目が連携されて、画面に表示されるようになります。
CMSカルーセルのデータの編集
CMSカルーセルに表示するデータの編集は、CMSのデータを編集して行います。
CMSのデータの編集に関しては、以下の記事で説明しています。
CMSカルーセルの動作や操作の設定
CMSカルーセルの動作設定はリストカルーセルと同じです。
操作ボタンについてもリストカルーセルと同じです。
