こんばんわ、STUDIOの直感的なWeb制作に毎日感動しているキクチウェブのキクチです。
今日はスライドショーについて解説していきます。スライダーやカルーセルと言ったりもしますね。
一般的にはスライダーやカルーセルと言う方が多いので、今回もそうしたいと思います。
STUDIOを使ってスライダーを作成する場合、2つのケースが考えられます。
単に画像だけをスライダーさせたい場合
記事に紐づいた画像をスライダーさせたい場合
この2つです。
この両方のケースを解説していきます。
画像のスライダーを使いたい場合
まずは、記事に紐付けない画像が流れるだけのスライダーを使う場合を解説していきます。
カルーセル（スライダー）を用意する
上記メニューから
「ボックス」→「カルーセル」を選択します。
余分な項目を削除する
このような画面になっていると思われます。
画像のみを残して、その他の部分は削除していきます。
画面左下のレイヤーを開いて
このレイヤーを選択して
画面真ん中右のこれをクリック
「リスト」の「cover」以外の項目を削除していきます。
「title」にカーソルを当てると枠で囲んだところあたりに削除メニューが出てくるので削除します。
削除するとこんな感じになります
画像を追加する
あとは上記の「リスト」の画像を変更したり、「＋New」で画像を追加してみればOKです。
画像の上の余計なテキストは削除してしまいましょう
これで完成です。
記事のスライダーを使いたい場合
CMSを有効にする
画面真ん中左側のメニューをクリック
「追加」→「CMS」→「CMSをはじめる」
「テンプレートデータを使う」を選択して「CMSをはじめる」
自動でテンプレート記事が出来上がります
画面右上からデザインエディタに戻りましょう
記事一覧のページになっているので、ホームページに戻りましょう
画面真ん中左側のメニューバーから
「ページ」→「Home」
これでホームページに戻ってきました
カルーセル（スライダー）を用意する
「追加」→「ボックス」→「カルーセル」を選択
この状態になったかと思います。
このままですと最初に紹介した画像だけをカルーセル（スライダー）させる状態と同じなので、次の工程で記事と紐付けていきます
カルーセル（スライダー）と記事を紐付ける
画面左下のレイヤーをクリック
枠線で囲っているレイヤーを選択
画面真ん中右側のメニューをクリック
「リスト」の「データを紐付け」
「Posts」を選択
これで先ほど自動でテンプレートから作成した記事が紐付けされました。
記事を追加する
画面左上のプロジェクト名にカーソルを重ねて「CMS」へ
「新規追加」から記事を追加して、
「Cover」に設定した画像がカルーセル（スライダー）の画像として表示されます。
これで完成です。
STUDIOのスライダーでの注意点
ここでは、STUDIOならではの制限について少し触れたいと思います。STUDIOでは直感的に素早く構築できる一方で、一部できないこともあるので解説していきます。
スライダーのフェードでの切り替えができない
スライダーの画像がフェードによって切り替わるパターンはWeb制作をしていると結構見ると思いますが、STUDIOではそれができません。個人的にはこれが結構キツイです。
落ち着いた雰囲気を演出したい時にはフェードによる切り替えを使用したいので、今後のアップデートに期待しています。
Google Tag Managerを使用してコードを記述する方法もあるのですが、ライブプレビューで見れなかったり、広告ブロックアプリと相性が悪かったりするのであまりオススメできません。
スライダーのフェードによる切り替え以外にもSTUDIOではできないことがまだ結構あります。
そちらに関してはこの記事で解説しております。
まとめ
いかがでしたでしょうか？
STUDIOを使うとスライダーもサクッと実装できて便利ですね。
ただ、最初は画像のみをスライダーさせたい場合や記事に紐付けてスライダーさせたい場合など少し戸惑うかもしれないので、この記事が少しでも助けになれれば幸いです。
以上、STUDIOの便利さに感動しまくりのキクチウェブのキクチでした。ではでは。
