ファーストビューがスライドショーのWEBサイトって素敵ですよね！**画像をスライドできる「カルーセル機能」**を使いこなすことで、デザインに「動き」が加わり、より視覚的インパクトの大きいサイトを作ることができます。

STUIDOでは、２通りの方法でWEBサイトにカルーセルを導入できます。

• ① デザインエディタ上でカルーセルの内容を管理する方法
• ② CMS機能を使ってカルーセルの内容を管理する方法

※CMS（Contents Management System）とは、いわゆるブログ機能のこと

①はSTUDIOのどの料金プランをお使いの方でも使用できますが、②はStarterプランでは使用できません。また、①と②でカルーセルを使う目的も少々異なってきます。

「プランで異なる機能」に注意して、カルーセルを賢く使いましょう！

STUDIO カルーセルその① 〜全料金プラン対応〜

まず、全てのSTUDIOユーザーが使えるカルーセルがこちらです。

デザインエディタでメニューを展開し、**「ボックス」➔「追加」➔「Carousel（カルーセル）」**を選び、アイコンをドラッグ＆ドロップしてカルーセルを配置します。

このカルーセルは、エディタ内の「リスト」で内容を管理します。そこで本記事内では、後述するもうひとつのカルーセルと区別するために、こちらを「リスト型カルーセル」と呼びます。

リスト型カルーセルについては以前の記事でご紹介しておりますので、詳しい設定方法については、下記をご参照ください。

**『STUDIOの便利な画像操作５本ノック！』**➔ https://implist.dev/entries/432ba7f2c3f4c672bbf48978fd1e09c4
この記事の「３. STUDIOで画像のスライド（カルーセル）を入れる方法」をご覧ください。

リスト型カルーセルの特徴

後述するもうひとつのカルーセルとの違いは、CMS機能（ブログ）との連動性です。リスト型カルーセルの内容はCMSで管理せず、エディタ内の「リスト」で管理します。

こちらは、単純に「イメージ画像＋文字」をスライドショーとして掲載する場合に使用します。

スライドショーの内容を、特に「ブログ記事への誘導」として使用しない場合は、このリスト型カルーセルがオススメです。カルーセルの中身の編集がデザインエディタ内で完結するため（つまりCMSの管理画面と行き来する手間がない）、使い勝手が良いといえます。

上記の表示は、以下のリストに対応します（画面右のメニューを展開すると現れる）。

リスト型カルーセルを挿入した場合、これを選択してメニュー（画面右）を展開すると、**「リスト」**が現れます。このリストの内容を編集することで、カルーセルの表示内容を設定していきます。

リスト左端のナンバーが、表示される各スライドの番号です。デフォルトでは、それぞれに**「タイトル」、「カバー（画像）」、「ディスクリプション（コメント）」**…などが割り当てられています。

STUSIOのカルーセルレスポンシブ対応にする

カルーセル内もレスポンシブ対応にできるのでしょうか？……答えはもちろんYESです！カルーセル内の画像や文字も、通常のデザインの編集と同じ操作でレスポンシブ対応にすることができます。

『STUDIOのレスポシブデザインで押さえておきたい技３選』➔ https://implist.dev/entries/da28fc72a916af98bd8e4d25438de514
こちらの例をご覧ください。

基準（パソコン）画面では収まっていた文字も、モバイル（スマホ）では画面から文字があふれてしまいます。

そんなときは、「モバイル」モードにした状態で、文字の大きさやマージン/パディングを調整しましょう。モバイル画面でのみ、再設定した文字サイズや間隔で表示されるようになります。

ここでひとつ、注意すべき点があります。基準（パソコン）画面では**、カルーセルの左右に「クリックしてスライドする」アイコンが表示**されてます。

しかし、モバイル版ではこれが表示されなくなってしまうのです。実際にスマホで開いてみたところ、指で横にスライドすると２枚目、３枚目…の画像が現れました。

…ただ、アイコンがないと、ユーザーは次の画像があることに気づきませんよね。ですので、ここは**「スライドして次の画像へ！」**という文字を入れたり、各画像にそれとわかるイラストを付け加えておくとよいかもしれません。

リスト型カルーセルの「できること・できないこと」

・スライドの「追加」「削除」
リストの一番下に「+ NEW」のボタンがあります。ここからスライドの追加ができます。また、各スライドの最後の項目が「ごみ箱アイコン」となっており、ここからスライドを削除できます。

・項目の「追加」「削除」「変更」
リストの一番左上の「＋」ボタンから項目を追加できます。また、各項目のタイトルにカーソルを合わせると、メニューボタンが現れますので、ここから各項目タイトルの編集や削除ができます。

なお、文字項目をすべて削除して、画像のみにすることも可能です。

・レイアウトの一括変更
デザインエディタから、マージン、パディング、文字サイズなどを通常の編集と同じように変更できます。ただし、レイアウトの変更は全てのスライドに適用されます。

・スライド毎のレイアウト変更
スライド毎のレイアウトの変更（例えば、「２枚目だけ文字を中央に」など）はできません。

・スライドの自動切り替え
STUDIOのカルーセルに自動切り替え機能はついておりません。

・リンクをつける
カルーセルそのもの（親ボックス）に対してリンクをつけることは可能です。それぞれのスライドに記事へのリンクを付けたい場合は、次にご紹介するCMSを利用したカルーセルを使いましょう。

STUDIO カルーセルその② 〜CMS機能を使う〜

STUDIOでは、カルーセルを導入する方法はもうひとつあります。それは、CMSの機能を使うやり方です。この方法では、カルーセルの内容を「記事」として管理します。

※CMS機能はStarterプランでは使用できません

まずは、作成中のサイトにCMSを追加しましょう。デザインエディタの左上の**「プロジェクト名」（今回の例では「Implist5」となっています）をクリックしてメニューを展開し、「CMS」**を選びます。

画面の案内にしたがって、**「CMSをはじめる」をクリックします。STUDIOのCMSは、細かい設定ができる分、最初はむずかしさを感じるかもしれませんので「テンプレートを使う」**を選択するのが無難です。

すると、以下のような管理画面が現れます**（デフォルトで３つの記事が入っています）。今回はここで、いったん「デザインエディタ」**をクリックしてエディタ画面に戻ってください。

デザインエディタに戻ったら、ページ左のメニューを開き、「CMS」➔「追加」➔「Posts」上から２番目のカルーセルを選択し、ドラッグ＆ドロップでエディタ内に配置します。

この時点で**「ライブプレビュー」**をすると、デフォルトで入っている１つ目の記事のカバー画像とタイトル＆ディスクリプション（文章の一部）が表示されます。左右のボタン（< , >）をクリックすることで、スライドショーが実行され、次の記事の画像に切り替わります。

「CMS」から追加したカルーセルは、追加した時点でCMSの記事と連動していることがおわかりいただけたと思います。

では、ここからスライドショーの体裁と、使用する画像・文言のカスタマイズをしていきましょう。

デザインエディタでの編集 〜体裁を整える〜

デザインエディタで**「カルーセル」の親ボックスが選択された状態で、画面右のメニューを開きましょう。前章では「リスト」があった場所に、今回は「CMS」**という項目がありますね。

まず、「モデル」は「Posts（記事タイプのフォーマット）」に設定します。そして、「表示数」には任意の数字を入れましょう。この数字が表示したいスライド数となります。

また、スライド（またはスライド内の文字）をクリックするとCMSの記事に移動するようにしたい場合は、「リンク」（検索窓をクリックすると候補が展開されます）に**「Posts」**を設定しておきましょう。

「Posts」の文字が青になっていればOKです。CMSと連動しています。

※ユーザーに読ませたい記事がない場合（つまり、カルーセル内の画像と文字をCMSで管理したいだけの場合）は、リンクを貼らなければOKです。画像をクリックしてもページは遷移しません。

次に、文字数の設定を行います。表示されているディスクリプション（タイトルとは別なので注意！）を選択して、メニューを開きます。

**「テキスト」には最初「Body」**とだけ表示されているので、これをクリックします。すると、「Body」の文字に関する設定が展開されます。

展開されたメニューの**「長さ」は表示するディスクリプションの文字数**で、任意に決めることができます。連動する記事の冒頭の文章のうち、設定された文字数分だけがここに表示されます。

なお、エディタ画面では、カルーセル内の文字エリアのマージンやパディング、文字サイズ・色なども、通常の編集と同じ要領で行うことができます。

また、通常の編集と同じようにテキストボックスを挿入し、これに「更新日」をあてるなどの機能もあります。便利な機能を活用して、自分好みにカスタマイズしましょう！

ONE POINT
STUDIOのCMSは、複数のライターによる大規模な記事サイトの運営も想定されています。このため、記事をカテゴリーやライター毎に分類し、それを表示に反映させるための様々な設定機能があります（そのため、今回は使わない設定項目もたくさん見かけます）。

今回は、CMSで記事を分類管理・カスタマイズする方法は割愛します。CMSの機能を使って**「カルーセルの中身を管理する方法」**として覚えましょう。

CMSでの編集 〜内容の設定〜

ここでは、カルーセルに表示させる画像と文字の編集を行っていきます。画面左上の**「プロジェクト名（あなたが設定した名前が表示されています）」➔「CMS」**からCMS管理画面を開きましょう。

記事タイトルにカーソルを合わせると**「両矢印のアイコン」**が現れます。これをクリックすると、個別の記事に移動します。

こちらが個別記事の編集画面です（デフォルトで入っている一番上の記事を表示しています）。

CMSと連動したカルーセルには、この記事の**「タイトル」「本文（設定した文字数）」そして「画像」**が、ひとつのスライドに載ります。

まず、「画像」を実際のスライドに使いたいものに差し替えましょう。そして、デフォルトの記事を全て削除します。文字は載せなくてもOKですが、乗せる場合は**「タイトル」もしくは「タイトル＋本文」**を書き込むと、表示に反映されます。

**Slug（URLのようなもの）**は何でもよいですが、デフォルトのままでは不自然なので、「Slide1」とでもしておきましょう。**Author（著者）やTag（タグ）**など、ブログの管理に必要な項目は、今は必要ないので削除してOKです（カーソルを合わせると「✕」アイコンが現れます）。

デフォルト記事を編集して、スライド１を以下のように設定しました。

スライド２および３も同様に作成します。スライドをもっと増やしたいときは、**「新規追加」**から追加します。

スライド用に編集した各記事は、「公開」状態になっていないと公開したサイトのカルーセルに反映されないので注意しましょう。（デザインエディタで「下書き」を編集するときや、ライブプレビューで確認する段階では、CMS記事が「公開」になっていなくても大丈夫です）

ここまでできたら、「デザインエディタ」ボタンから、デザインエディタに戻りましょう。

デザインエディタに戻ると、カルーセルにCMSで編集した内容が反映されていることがわかりますね！スライドを追加した場合は、表示数も忘れずに変更しておきましょう。

ライブプレビューで、スライドショーが思い通りに表示されているかの確認もお忘れなく！

※スライド（画像や文字）に記事へのリンクを貼らなければ、CMSで作成したカルーセルスライドのための記事が人目に触れることはありません。

STUDIOの料金プランで異なる使える機能

CMSの使用をお考えの際は、STUDIOの料金プランについてよく確認しておきましょう。

なんと、Starterプラン（1,280円/月）にすると、独自ドメインなどが使えるようになる代わりに、無料版で使用できていたCMS機能が使えなくなるのです。

無料版も使える範囲が広いだけに悩みどころですね…。

また、「STUDIOのカルーセルは自動スライド機能がない」ことはすでに述べましたが、有料版のAppsという機能を使うと、実はその限りではないのです。

STUDIOのAppsを利用して、Google Tag Manager と連携することで（Java Scriptなどのコードを各必要があります）、自動再生をプログラムすることができます。

まとめ

STUDIOでは、２通りの方法でカルーセルを作成・管理できます。１つ目はデザインエディタ内の「リスト」で編集が完結するカルーセル、２つ目はCMSで内容を管理するカルーセルです。

CMSは料金プランが「Starterプラン」の場合にはご利用できません。また、有料プランのAppsを使うことでカルーセルに自動スライドをつけるよう設定することも可能です。

カルーセルを入れる目的と、どんな情報を見せたいか（ブログ記事と連動させたいかどうか）をはっきりさせて、自分のWEBサイトにしっくりくる方を選びましょう！