ドラッグ＆ドロップエディターブロック

メールエディターブロックを使う

エディターブロックは、メールメッセージのコンテンツセクションの下にあります。エディターブロックを使うには、ドラッグ＆ドロップエディターでエディターブロックをカラム内にドラッグします。カラム幅に自動調整されます。各エディターブロックには、パディングのきめ細かなコントロールなど、独自の設定があります。

これらのエディターブロックをメールで使用しカスタマイズする方法の詳細については、その他のカスタマイズを参照してください。

種類

次の表は、ユーザーが各エディターブロックタイプをどのように使用できるかについて説明しています。

名前	説明
タイトル	メール内のヘッダーにテキストを追加します。
段落	メッセージにテキストを入力します。ツールバーでフォントやテキストの編集機能を利用できます。
リスト	箇条書きリストを追加します。
ボタン	標準ボタンを追加します。このブロックのプロパティでは、リンクを簡単に編集・設定できます。
区切り線	実線、点線、または破線を挿入し、間隔を調整します。
スペーサー	他のブロックの間にスペース（パディング）を追加します。
画像	メディアライブラリから画像を挿入します。
動画	動画コンテンツへのリンクを作成します。
ソーシャル	ソーシャルメディアプラットフォームのアイコンを挿入します。ブランド固有のアイコン用にカスタム画像をアップロードできます。
アイコン	アイコンを挿入します。カスタム画像をアップロードできます。Brazeは画像がアップロードされるまで、大きめのプレースホルダーアイコンを使用します。
HTML	生のHTMLを挿入します。コネクテッドコンテンツや条件文などのLiquidに推奨されます。
メニュー	デザインするメッセージに合わせたフレキシブルなメニューを作成します。

メールでのパーソナライゼーション

• Liquid: コンテンツ > パーソナライゼーションで属性を選択し、スニペットをコピーして、テキストブロック（基本的なLiquid）またはHTMLブロック（高度なLiquid）に貼り付けます。一般的に、テキストブロックで基本的なLiquidを使用できますが、レイアウトの問題を避けるために、複雑なロジックにはHTMLブロックの使用をお勧めします。なお、画像ブロックやボタンのURLフィールドではLiquidはサポートされていません。
• コネクテッドコンテンツ: HTMLブロックを追加し、そこに {% connected_content %} コールを配置します。

プロパティ

各エディターブロックのプロパティの詳細は以下の表に記載されています。

タイトル

Title エディターブロックのプロパティの詳細については、以下の表を参照してください。

プロパティ	説明
タイトル	見出しのスタイルを選択します。
フォントファミリ	タイトルのフォントスタイルです。
フォントの太さ	フォントの全体的な太さです。
文字サイズ	テキストのサイズを決定します。
テキストの色	タイトルの色を変更します。
リンクの色	リンクの色を変更します。
整列	タイトルを左寄せ、中央揃え、または右寄せにします。
行の高さ	テキストの行間の距離を変更します。
文字間隔	各文字間の距離を変更します。
文字の向き	デフォルトでは左から右へ表示されますが、右から左へ表示するように編集できます。

段落

Paragraph エディターブロックのプロパティの詳細については、以下の表を参照してください。

プロパティ	説明
フォントファミリ	段落テキストのフォントスタイルです。
フォントの太さ	フォントの全体的な太さです。
文字サイズ	テキストのサイズを決定します。
テキストの色	タイトルの色を変更します。
リンクの色	リンクの色を変更します。
整列	テキストを左寄せ、中央揃え、または右寄せにします。
段落の間隔	段落間のスペースを変更します。
行の高さ	テキストの行間の距離を変更します。
文字間隔	各文字間の距離を変更します。
文字の向き	デフォルトでは左から右へ表示されますが、右から左へ表示するように編集できます。

リスト

List エディターブロックのプロパティの詳細については、以下の表を参照してください。

プロパティ	説明
リストのタイプ	リストの種類です。箇条書きまたは番号リストを選択できます。
リストスタイルの種類	リストのスタイルを決定します。
リストの開始番号	リストの開始番号を決定します。
フォントファミリ	段落テキストのフォントスタイルです。
フォントの太さ	フォントの全体的な太さです。
文字サイズ	テキストのサイズを決定します。
テキストの色	テキストの色を変更します。
リンクの色	リンクの色を変更します。
整列	テキストを左寄せ、中央揃え、または右寄せにします。
リスト項目の間隔	リスト項目間のスペースを変更します。
リスト項目のインデント	リスト項目のインデントを変更します。
行の高さ	テキストの行間の距離を変更します。
文字間隔	各文字間の距離を変更します。
文字の向き	デフォルトでは左から右へ表示されますが、右から左へ表示するように編集できます。

区切り線

Divider エディターブロックの詳細については、以下の表を参照してください。

プロパティ	説明
透明	有効にすると、「line」と「width」のオプションが削除されます。
線	点線、斑点、実線など、さまざまな線の形式です。さらに、区切り線の太さや色も変更できます。
幅	区切り線の幅を5刻みで調整します。
整列	線を左寄せ、中央揃え、または右寄せにします。

スペーサー

Spacer エディターブロックの詳細については、以下の表を参照してください。

プロパティ	説明
高さ	スペーサーブロックの高さを調整します。デフォルトは60pxです。

画像

Image エディターブロックの詳細については、以下の表を参照してください。ダイナミックな画像（Liquidやコネクテッドコンテンツを含む画像）では、自動幅設定を使用するためにフォールバック画像を設定する必要があります。画像仕様については、メール画像仕様を参照してください。

プロパティ	説明
自動幅	画像の幅をピクセル単位で変更します。
整列	画像をブロックの左、中央、右のいずれかに揃えます。
Liquidを含む画像	Liquidロジックを使って、同じコンテンツブロック内でダイナミックに異なる画像を設定します。
URL	画像がホストされている場所のアドレスを使って画像を設定します。
代替テキスト	画像に表示されている情報と同じ内容をユーザーに提供する、画像の短い説明です。スクリーンリーダーのアクセシビリティや、画像が読み込めない場合に不可欠です。
角丸の画像	四隅を角丸にして画像をレンダリングします。デフォルトでは、画像は四隅が直角の状態でレンダリングされます。
アクション	ユーザーが画像をクリックした際にトリガーされるアクションです。
ブロックオプション	画像ブロックの周りにパディングを設定します。

動画

Video エディターブロックの詳細については、以下の表を参照してください。

プロパティ	説明
URL	動画のURLです。YouTubeとVimeoのみサポートされています。
タイトル	動画のメタデータから自動生成されますが、カスタマイズすることもできます。
再生アイコンスタイル	動画画像の上部にある再生ボタンのさまざまなオプションが含まれます。
再生アイコンの色	再生ボタンのライトまたはダークを選択するオプションです。
再生アイコンのサイズ	再生ボタンのピクセルサイズを選択します。固定範囲は50 pxから80 pxまで（5 px刻み）です。

ソーシャル

Social エディターブロックの詳細については、以下の表を参照してください。

プロパティ	説明
アイコンコレクションを選択	アイコンコレクションのスタイルを設定します。
アイコンコレクションを設定	各ソーシャルアイコンのURLを設定します。タイトルと代替テキストを編集するためのその他のオプショントグルが含まれます。
整列	ソーシャルアイコンを左寄せ、中央揃え、または右寄せにします。
アイコンの間隔	各ソーシャルアイコンの間隔を決定します。

アイコン

Icons エディターブロックの詳細については、以下の表を参照してください。

プロパティ	説明
フォントファミリ	段落テキストのフォントスタイルです。
フォントの太さ	フォントの全体的な太さです。
文字サイズ	テキストのサイズを決定します。
テキストの色	テキストの色を変更します。
リンクの色	リンクの色を変更します。
整列	アイコンを左寄せ、中央揃え、または右寄せにします。
文字間隔	各文字間の距離を変更します。
アイコンサイズ	アイコンのサイズを決定します。
アイコンの間隔	アイコンのスペースを変更します。
アイコンのパディング	アイコンのパディングを変更します。

HTML

HTML エディターブロックの詳細については、以下の表を参照してください。

プロパティ	説明
HTMLエディター	生のHTMLを入力します。

メニュー

Menu エディターブロックの詳細については、以下の表を参照してください。

プロパティ	説明
メニュー項目を設定	メニュー項目を追加します。
フォントファミリ	メニューに使用するスタイルです。
文字サイズ	メニューのサイズです。
テキストの色	メニューの色を変更します。
リンクの色	メニューテキストの色を変更します。
整列	メニューを左寄せ、中央揃え、または右寄せにします。
文字間隔	各文字間の距離を変更します。
レイアウト	レイアウトを横方向か縦方向に決定します。
区切り記号	メニューオプションの間に文字を追加します。
モバイルメニュー	モバイルデバイスで表示する際のアイコンのサイズ、色、アイコンの種類を変更するオプションが含まれます。
アイテムのパディング	+ または - ボタンを使用するか、特定の数値を入力してパディングを変更します。
すべての辺	アイテムのパディングが無効な場合、一貫したパディング値を設定します。

アクション

メッセージ内のボタン、リンク、または画像をユーザーがタップした際に発生するアクションを割り当てることができます。アクションをパーソナライズするためにLiquidを使用することもできます。各エディターブロックのアクションの詳細は、以下の表に記載されています。

ボタン

Button エディターブロックの詳細については、以下の表を参照してください。

プロパティ	説明
リンクタイプ	ボタンをクリックした際のアクションを決定し、適切なプロトコルを設定します。
URL	Webページを開くリンクタイプに基づいてダイナミックに変化します。
宛先、件名、本文	メール送信リンクタイプの場合、ユーザーがボタンを選択した際に下書きメールに表示される受信者のメールアドレス、件名、および本文を設定します。
電話番号	電話をかけるおよびSMSを送信リンクタイプの場合、ボタンを選択した際にユーザーが電話をかけたりメッセージを送信したりする電話番号を設定します。
メッセージ	SMSを送信リンクタイプの場合、ユーザーがボタンを選択した際に下書きSMSメッセージに表示されるコンテンツを設定します。
ボタンオプション	フォント、幅、色など、各種ボタンのオプションを設定します。
ボタンホバー	ユーザーがマウスやトラックパッドを使ってボタンの上にカーソルを置いた際のボタンのスタイルです。ボタンの背景色、フォントの色、境界線のスタイルが含まれます。