こちらの記事では、ブロックストア(β)で公開している「カルーセル」タイプのブロックテンプレートについて、具体的なご利用方法、注意点をご紹介します。
参考:ブロックストア(β)概要

本機能はβ版です。不具合などのリスクが相対的に高く、また、今後機能内容、仕様やUIが大幅に変更になる可能性がありますのでご了承ください。
ブロックストアでのブロックテンプレートの追加ご要望もお待ちしております。お気軽にチャット窓口までご連絡ください。

「カルーセル」タイプについて

「カルーセル」とは、画像などの複数の項目をスライドさせることで、メインで表示する項目を切り替えることができる仕組みです。スライダー、スライドバナー、などと呼ばれることもあります。

カルーセルを活用することで、ページのファーストビューなど限られたスペースの中でも、ご案内する情報をコンパクトに表示・切り替えし、来訪ユーザーに効果的に訴求することができます。

「カルーセル」タイプのブロックテンプレートを利用する

事前にブロックストアから利用したいテンプレートをライブラリに取り込みます。
参考:ブロックストア(β)概要

ページエディターなどで、置き換えブロックを編集する際に取り込んだテンプレートを呼び出します。

提供しているテンプレートはデフォルトでレスポンシブ対応しています。 閲覧デバイスのスクリーン幅に合わせてデザインが自動的に調節されます。

null

カルーセルの内容を変更する

ブロックの編集モードで、左側の「レイヤーを開く」をクリックします。
左ペインに表示された項目を選択し、右ペインで画像・リンク・テキストの内容やスタイルの変更が可能です。

null

ご利用上の注意点

  • 設置先のブロックの横幅や縦幅が狭いと表示崩れする可能性があります。
    • 設置先サイトのHTML構造とデザインにも依存します。うまく設置できない場合は、<body>タグにより近いブロックを指定の上、テンプレートから呼び出してください。
  • カルーセルの枚数を増やす・減らす場合はコード編集でカスタマイズが必要です。
    • テンプレート自体のカスタマイズ、およびテンプレートから作成されたブロックのカスタマイズはサポート対象外です
  • カルーセルはScriptで制御しています。 設置先のサイトで配信されているScriptとの競合などの影響で、テンプレートがうまく動作しない場合がございます
    • 別のテンプレートをご利用いただくか、サイトを保守運用されている技術ご担当者様にご相談ください(弊社側ではScriptの競合についての調査・対応はできかねます)。