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