メールで分岐ブロックを使用する方法
このページで学べること
Klaviyo で分岐ブロックを使用してコンテンツを横並びに配置する方法を確認してください。
分岐ブロックを使用するタイミング
Klaviyo のメールエディタでコンテンツを横並びに配置する方法は 3 つあります。分割ブロック、列、テーブルブロックです。各オプションには、特定の利点とトレードオフがあります。分岐ブロックが最適なのは次の場合です：
- 2 列が必要で、各列の幅を完全に制御したい場合。
- テキストや画像を横に並べて配置したい場合があります。
- モバイルで列を積み重ねて表示するか、横並びのまま表示するかを選択します。
以下のチャートで、分岐ブロック、列、テーブルについて詳しくご確認ください。
コンテンツ レイアウト | 列の数 | 幅のオプション | 許可されているコンテンツタイプ | モバイル ビューで列を積み重ねられますか？ |
分岐ブロック | 2 | 精密な制御（スタイル>レイアウトを使用） | 画像またはテキスト | はい |
列 | 1-4 | 限定された選択 | 任意の種類のコンテンツブロック（例：テキストブロック、画像ブロック、レビュー引用ブロック） | はい |
テーブルブロック | 任意の数 | 正確な制御（列幅 > 手動を使用） | 画像またはテキスト | いいえ |
テーブルは、スクリーン リーダーが解析しづらいため、アクセシビリティの観点で課題となる場合があります。
メール テンプレートに分岐ブロックを追加
モバイルのスタッキングとモバイルプレビューを使用するには、メールの［モバイル向けに最適化］がスタイル>モバイル最適化設定でオンになっていることを確認してください。
- メールテンプレート内で、分岐 ブロックをキャンバスにドラッグします。
- 列セレクタで、分岐の左右を切り替えます。
- 列のコンテンツで、分岐の現在選択されている側に画像とテキストのどちらを含めるかを選択してください。
- テキストの場合は、メールキャンバス内のテキストをダブルクリックして、内容を入力します。画像の場合は、サイドバーの画像コントロールを使用して画像を選択するか、アップロードします。
- 分岐のもう一方の側についても、このプロセスを繰り返します。
- ブロックの スタイル タブを開きます。
- Layoutで、列の幅を割合で設定するには、Col 1 widthまたはCol 2 widthを変更します。合計が100％になるように、もう一方の列が自動的に調整されます。
- 間隔を設定して、列間のスペースをピクセル単位で調整します。
- ブロックのスタイルタブでモバイルの積み重ねの項目を開き、列を積み重ねるには左から右または右から左を選択します。横に並べたままにするには積み重ねなしを選択します。
- プレビューをクリックし、次にデスクトップとモバイルを切り替えて、列の幅、間隔、積み重ねを確認してください。
その他のリソース
- フローメールで動的ブロックを構築する方法
動的テーブルのブロックを用い、トリガーにメトリックを使用したフローに商品情報やイベント情報を追加する方法を学びます。この記事では、カゴ落ちリマインダーで「カートに残された商品」を表示するを例を用いて、動的ブロックを作成する手順を紹介します。
- メールに列を追加する方法
必要に応じてメールにカラムを追加し、テンプレートをより見栄えよくする方法をご覧ください。テンプレートに列を追加する方法はいくつかあります。この記事では、メールに列を追加するすべての方法と、デバイスに基づいてデザインを最適化する方法について説明します。