カルーセルブロック

純粋なCSSだけで動く、スワイプ可能な画像ギャラリーです — JavaScriptは一切使わないため、基盤となる:checkedテクニックに対応するすべてのクライアントで動作し、それ以外の環境では1枚の分かりやすい画像にフォールバックします。

仕組み

キネティックティアはラジオボタンによるステートマシンです: 各スライドには、1つのグループ名を共有する隠しラジオ入力、ドットとして描画されるラベル、そして:checked ~の兄弟セレクタで表示・非表示が制御されるフレームが割り当てられます。ドットをタップ(対応環境ではスワイプも可)すると対応するラジオがチェックされ、一致するフレームが表示され、他はdisplay:noneのままになります。最初のスライドのラジオは初期状態でチェックされているため、ブロックは常にスライド1枚目から開きます。これはアコーディオンやスクラッチブロックが使っているのと同じ仕組みで、独立したトグルの代わりに、互いに排他的なフレームの並びに適用しているだけです。

そのCSSテクニックが有効にならない環境(Outlookのワード描画エンジンや、<style>ブロックを除去したり兄弟セレクタを無視するクライアント)では、ブロックは静的なカードにフォールバックします。そのカードには最初のスライドの画像とキャプションのみが表示され、ホスティングされたライブビューへの「全N枚のスライドを見る」リンクが添えられます。ライブビューは本物のWebページなので、そこでは全スライドがワンタップで見られ、失われることはありません — 本物のブラウザは常に対応しているため、同じ:checkedマークアップがそのまま再利用されます。スライドが1枚しかないカルーセルはステートマシン全体をスキップし、単一の静的画像としてレンダリングされます — ページ送りするギャラリーがそもそも存在しないためです。

設定可能なフィールド、すべてブロック自身のインスペクターパネル内にあります:

• 背景色 — カード自身の背景で、メールのテーマとは独立しています。
• パディング — ブロックの内側の余白です。
• ボーダー — カード全体の幅・スタイル・色です。
• カードのボーダーの角丸。
• キャプションの色とキャプションのフォントサイズ — すべてのスライドのキャプションテキストに一律で適用されます。

各スライド(カルーセルの子要素で、他のツリー項目と同様に追加・並べ替えできます)は独自の3つのフィールドを持ちます: 画像(メディアライブラリから選択)、キャプション、そして任意のリンクURLです。設定されている場合、スライドの画像をタップするとそのリンクが開きます — スライド間を移動するためのドットナビゲーションとは独立しています。

スライドはインタラクションイベントではありません — 受信者がカルーセルをページ送りしても何かを送信するわけではないため、カルーセルのナビゲーションに関する情報は回答ダッシュボード、CSVエクスポート、プロジェクトのWebhookのいずれにも表示されません。スライド自身のリンクが設定されている場合、それは単純なリンクを持つ要素です: ボタンやリンク付き画像と同じように、受信者のトラッキングされたリダイレクトを経由する"click"アクションが発生し、プロジェクトのクリックヒートマップに集計されます。

例

商品ドロップのメールでは、カルーセルを使って新商品を3〜4アングルで見せ、各スライドをその特定バリエーションのページにリンクできます — 1枚のヒーロー画像だけでは商品の魅力が伝わらない場面全般で役立ちます。プロモーション送信からクリックを直接引き出す、より広いパターンについてはEコマースと商品ドロップを参照してください。「今月の新着情報」ダイジェストでは、機能や記事1つにつきスライドを1枚使い、それぞれにキャプションを付けて全文へリンクすることで、長い縦積みの代わりに、まとめ全体を1つのスキャンしやすいブロックに収められます。イベントの振り返りでは、その瞬間を説明するキャプション付きで、直前のセッションの写真をページ送りできます。すべてを見たい受信者はタップして進むだけでよく、アニメーションに対応していないクライアントの受信者でも、カバー写真と残りへのリンクは確実に受け取れます。

静的フォールバックの見え方

<div style="margin:12px 0;background-color:transparent">
  <div class="carousel-fallback">
    <div class="lv-frame lv-frame-0">
      <a href="https://example.com/product-a">
        <img src="https://cdn.example.com/slide1.jpg" alt="Slide 1" style="width:100%;max-width:100%">
      </a>
      <p style="margin:8px 0 0;font-size:14px;color:#374151">Slide 1</p>
    </div>
    <p style="margin:8px 0 0;font-size:13px">
      <a href="https://mailinapp.com/v/eyJhbGci..." style="color:#4f46e5">See all 4 slides &rarr;</a>
    </p>
  </div>
</div>

これはOutlook系クライアントがレンダリングする内容です: 最初のスライド、そのキャプション、そしてギャラリーの残りにアクセスできるホスティングされたライブビューへのリンクです。キネティックティアに対応するクライアントでは、この同じマークアップはCSSで非表示にされた状態で存在し、代わりにラジオ/ドットのステートマシンが機能します。

関連ページ

• ブロックリファレンス概要
• フォールバックの仕組み
• インタラクションと分析