こちらの記事では、ブロックストアで公開している「カルーセル」タイプのブロックテンプレートについて、具体的なご利用方法、注意点をご紹介します。
参考：ブロックストアテンプレートを活用する
「カルーセル」タイプについて
「カルーセル」とは、画像などの複数の項目をスライドさせることで、メインで表示する項目を切り替えることができる仕組みです。スライダー、スライドバナー、などと呼ばれることもあります。
カルーセルを活用することで、ページのファーストビューなど限られたスペースの中でも、ご案内する情報をコンパクトに表示・切り替えし、来訪ユーザーに効果的に訴求することができます。
「カルーセル」タイプのブロックテンプレートを利用する
ページエディターなどで、ブロックを編集する際にブロックストアから直接、もしくは一度ブロックライブラリに取り込んだテンプレートを呼び出して利用することができます。
提供しているテンプレートはデフォルトでレスポンシブ対応しています。 閲覧デバイスのスクリーン幅に合わせてデザインが自動的に調節されます。
カルーセルの内容を変更する
ブロックの編集状態でプレビュー上から、もしくは、左側のレイヤーを開くボタンをクリックし、左パネルに表示された項目から編集したい要素を選択します。
右側の編集パネルで画像・リンク・テキストの内容やスタイルの変更が可能です。
カルーセル枚数を変更する
ブロックの編集モードの状態で左パネルの「レイヤー」を開き（デフォルトで開いている状態）、カルーセルのスライド要素を減らしたい場合は削除 / 増やしたい場合は複製してください。
下記画像のは、スライド要素の親にあたる<a>タグを減らして、カルーセル枚数を変更している様子です。
スライド枚数を1枚ずつ変更した場合、中にはコードによるカスタマイズが必要なテンプレートがあります。 最小限のカスタマイズでスライド枚数を変更したい場合、デザイン元のカルーセルテンプレートにおけるスライド枚数から2枚ずつ変更してください。（例： 元々5スライド → 7スライド、もしくは3スライドへ変更）
ご利用上の注意点
- 設置先のブロックの横幅や縦幅が狭いと表示崩れする可能性があります。
- 設置先サイトのHTML構造とデザインにも依存します。うまく設置できない場合は、
<body>タグにより近いブロックを指定の上、テンプレートから呼び出してください。
- 設置先サイトのHTML構造とデザインにも依存します。うまく設置できない場合は、
- テンプレート自体のカスタマイズ、およびテンプレートから作成されたブロックのカスタマイズはサポート対象外です。
- カルーセルはJavaScriptで制御しています。 設置先のサイトで配信されているJavaScriptとの競合などの影響で、テンプレートがうまく動作しない場合がございます。
- 別のテンプレートをご利用いただくか、サイトを保守運用されている技術ご担当者様にご相談ください（弊社側ではJavaScriptの競合についての調査・対応はできかねます）。