カルーセル（横スライド）表示を使って、見せたい情報をコンパクトに・魅力的に
カルーセルは、複数のコンテンツを横にスライドして見せられる表示形式です。
スライドは自動でも手動でも切り替えることができ、スペースが限られている場合にも、順番にたくさんの情報を見せることができます。
たとえば、ブログ記事の一覧やお客様の声、サービスメニューなどを視覚的にわかりやすく、印象的に紹介したいときに便利です。
ちなみに「カルーセル（carousel）」という名前は、メリーゴーランドを意味する英語からきており、情報がくるくる回って表示される様子が由来です。
「複数のコンテンツを設置したいけど、スペースが限られている・・」とお悩みの場合は、是非カルーセルの使用を検討してみてください。
このページでは、「カルーセル」表示形式の活用イメージと設定手順をご紹介します。
こんな時におすすめ
- 最新ブログ記事やお知らせを一覧表示したいとき
- サービスメニューや講座内容を順番に紹介したいとき
- お客様の声や事例紹介をビジュアル付きで並べたいとき
表示例（おすすめの使い方）
- ブログ記事一覧（タイトル＋画像＋ブログ本文冒頭）
- お客様の声（タイトル＋名前＋画像＋コメント冒頭）
- サービス紹介（コース名＋簡単な説明＋画像＋詳細表示ボタン）
表示形式：左右にナビ表示・ 左右に見切れ表示
▶この表示の設定画面を見る
設定手順
- プレビュー画面を開き、カルーセル表示にしたいパーツのタイトル左肩にある黄緑色の歯車アイコンをクリック
表示設定画面が開くので、少し下までスクロールして、薄い青色背景色の「子パーツの表示設定」で下記設定を行っていきます。
- 画面左側「子パーツの表示要素」の中から表示したいものにチェックをつける
- 子パーツのレイアウト：「３列スライド」など任意の列数を選択する
- 子パーツのレイアウト：スライド設定：「手動スライド」または「自動スライド」または「フェード」を選択する
- 子パーツのレイアウト：左右に見切れ表示：「しない」または「見切れ表示」を選択する
※「見切れ表示」とは、スライドの左右に次の（または前の）アイテムの一部が少しだけ見えている表示方法のことです。 - 子パーツのレイアウト：リンクナビゲーション表示：「表示しない」「下部にナビ表示」「左右にナビ表示」「左右＆下部にナビ表示」よりお好みのものを選択する
※ナビ表示とは、スライドの切り替えを促す矢印やドットのことです。表示位置によって、画面下や左右に配置できます。
右側のプレビュー画面を確認しながら、上記１～５の設定を調整してください。
表示内容に納得できたら、画面の一番下にある［保存］ボタンをクリックして設定を確定します。文字数の違いでパーツがズレるときの対処法
「タイトル」や「サブタイトル」に表示される文字の量がパーツごとに違っても、見た目がバラバラにならないようにするには、PC版の“高さの最小値”を設定するのがおすすめです。この設定をしておくと、文字数が少ないパーツも、高さが大きい（＝文字数が多い）パーツに合わせて揃うため、全体がきれいに整って見えます。
この設定は、表示設定画面の左側「子パーツの表示設定」の「子パーツの表示要素：タイトル／サブタイトル」の項目で行えます。
高さは、画面右側のプレビューで見た目を確認しながら調整してみてください。
カルーセルは便利で視覚的にも印象的な表示方法ですが、すべての情報をスライド形式にすればよいというものではありません。
「順番に見てもらうと伝わりやすい」「限られたスペースで見せたい」といった場面でこそ、効果を発揮します。
ホームページの中で“特にじっくり見てもらいたい内容”にしぼって、上手に活用してみてください。
