【第3回 カルーセル機能編】

たけやん：こんにちは、ヤプリデザイナーチームです！第三回目では、カルーセル機能についてお伝えします！カルーセルとは、画像などのコンテンツを横にスライドして複数表示する方法です。

ぴーやま：限られたスペースでより多くの情報を見せることができるので、たくさんのアプリが導入していますね！

たけやん：そうなんです。ちなみにこちらは３つともカルーセル機能を使って表現しています！

ぴーやま：カルーセルと一括りにしても、さまざまなデザインがありますね！

たけやん：しかもヤプリならどれも、コツを掴めば簡単に実装できちゃいます。さっそく試してみましょう！

設定方法は4STEP！

①機能設定でフリーレイアウト機能を新規作成します。

②カルーセルで表示させたい画像やテキストを設定します。

１ブロック目にまず画像やテキストを設定し、必要に応じて詳細設定（マージンやカラム数など）を調整します。作成したブロックを複製して詳細設定を引き継ぎ、２ブロック目以降の画像やテキストを設定します。

③カルーセルの中身を設定したフリーレイアウト機能のコードを取得します。

コンテンツ管理画面右上にある「リンク生成」をクリックし、カルーセル用フリーレイアウト機能を選択します。上部に表示される文字列の「/tab/bio/xxxxxx」の部分をコピーして取得します。

④カルーセルを設置したいフリーレイアウト機能を開き、新規ブロックのタイトル欄に下記の文字列を入力します。

horizontal_scroll(③で取得したコード,カルーセル機能で指定できる要素A,B,C,D,E)

ぴーやま：カルーセル機能設定完了♪カルーセルの中身を設定したフリーレイアウト機能を変更するとカルーセルも変更されるので、アプリの更新も楽々ですね！

たけやん：画像をテキストと組み合わせたり、詳細設定でマージンなどを調整することでさまざまなデザインのカルーセルができちゃいます！ここからは、はじめにご紹介した３種類のカルーセルの設定方法を説明します！

3種類のカルーセルの設定方法をご紹介

①左右矢印付きの大きな画像のカルーセル

②ハッシュタグ風カルーセル

③画像とテキストの組み合わせカルーセル

たけやん：画像やテキストの組み合わせや詳細設定に手を加えれば、カルーセルの表現方法は無限大！ 管理画面をたくさん触って、オリジナルの素敵なカルーセルを作ってくださいね！

今回ご紹介したカルーセル機能の詳しい設定方法はこちら >

※ご不明点は担当のカスタマーサクセスにお問い合わせください。

それでは次回の更新をお楽しみに！！！！