よくある質問
このページでは、メール用ドラッグ&ドロップエディターに関するよくある質問への回答を提供します。
ダークモードでメールがどのように表示されるかプレビューできますか?
はい。ドラッグ&ドロップエディターのプレビューとテストセクションに移動し、ダークモードをオンにしてください。また、さまざまなユーザープラットフォームでメールをプレビューおよびテストし、行の背景画像には可能な限り透過画像を使用することをお勧めします。
ダークモードとライトモードに対応したメールの設計方法
メールをライトモードとダークモードで別々のレイアウトに分けて送信する必要はありません。メールクライアントやデバイスが独自のダークテーマを適用できるためです。ただし、外側のコンテナや主要なセクションに明示的な色が設定されていない場合、色が反転したり背景が非表示になったりすることがあります。これを防ぐために、ダークモードとライトモードの両方でメッセージが明確に表示されるよう、背景色にソリッドカラーを設定することをお勧めします。
一部のメールクライアントでは、ダークモードで背景画像が置き換えられたり、低コントラストのテキストが反転されたりするため、本文テキストが表示されなかったり、クライアント間で異なるレンダリングになることがあります(例:iOS上のGmailとAndroid上のGmail)。明るい背景に背景画像のみを使用するのではなく、外側のコンテナや主要なセクションにbackground-colorを設定してください。
ドラッグ&ドロップメールのプレビューにカスタムフォントが表示されないのはなぜですか?
カスタムフォントは、メッセージ内のテキストブロックがそのフォントを参照しているときにエディタープレビューで読み込まれます。ドラッグ&ドロップメールエディターの設定でカスタムフォントを構成した後もプレビューにフォールバックフォントが表示される場合は、そのフォントを使用するテキストブロックを追加して、エディターがプレビュー用にフォントを読み込むようにしてください。フォントファイルでクロスオリジンリソース共有(CORS)が有効になっていることを確認してください。送信前にプレビューとテストおよびターゲットのメールクライアントを再確認してください。設定手順については、カスタムフォントを参照してください。
別のアプリケーションからコピー&ペーストする際に、テキストの書式を引き継ぐにはどうすればよいですか?
テキストエディタやアプリケーションにはそれぞれ独自のテキスト書式処理方法があり、それが普遍的に認識されるとは限りません。Braze外部からドラッグ&ドロップエディタに書式付きテキストをコピー&ペーストすると、リッチフォーマットが引き継がれないことがあります。
リッチフォーマットなしでテキストを貼り付けるには、以下のいずれかの方法を使用してください。
- Macの場合:cmd+Vの代わりにcmd+shift+Vを押します
- Windowsの場合:ctrl+Vの代わりにctrl+shift+Vを押します
- エディタ内で右クリックし、スタイルを合わせてペーストを選択します
モバイルでメールのパディングを変更する際、Webビューのパディングを更新せずに行うにはどうすればよいですか?
モバイルとWebビューのパディングを個別に編集することはできないため、編集内容は両方のビューに反映されます。ただし、HTMLエディタでCSSロジックを追加し、画面サイズに基づいてパディングを設定することができます。この方法はドラッグ&ドロップエディタではサポートされていないため、HTMLファイルをエクスポートし、代わりにHTMLエディタを使用してください。
デスクトップとモバイルでボタンの水平行を維持するにはどうすればよいですか?
ドラッグ&ドロップエディターを使用してメールを作成する際、コールトゥアクションボタンの水平行を作成すると、モバイルではボタンが垂直方向に変更される場合があります。
デバイスサイズ間で同じフォーマットを維持するには、モバイル用にパディングが最適化されたCTAボタンを含む別の行を作成し、デスクトップデバイスではその行を非表示に設定することをお勧めします。2つの別々の行を用意することで、デスクトップとモバイルデバイスで最適なテキストレンダリングを実現するために必要なパディングを設定できます。
ドラッグ&ドロップエディターで行の高さを調整できますか?
行の高さはコンテンツに合わせて自動調整されます。代替方法として、以下の手順をお勧めします。
- ディバイダーブロックを追加します。
- トグルをクリックして透明度をオンにします。
- 高さを調整します。
エディターでレイヤーを構築することは可能ですか?背景画像を追加し、その上に画像を重ね、さらにその上にテキストレイヤーを追加できますか?
ドラッグ&ドロップエディターは現在、2つのレイヤーをサポートしています。行の背景画像を設定し、背景色をカスタマイズできます。
キャンペーンやキャンバスで作成したドラッグ&ドロップメールをテンプレートとして保存できますか?
いいえ。キャンペーンやキャンバスからドラッグ&ドロップメールを、テンプレート > メールテンプレートのドラッグ&ドロップメールテンプレートとして保存することはできません。テンプレート > メールテンプレートでレイアウトを再作成するか、次回は保存済みのテンプレートから開始してください。手順については、メールテンプレートを作成するを参照してください。
再利用可能なHTMLテンプレートが必要な場合は、ドラッグ&ドロップ本文の編集中にファイルをダウンロードを選択し、ZIPファイルからHTMLを開いて、HTMLコードエディターを使用してHTMLメールテンプレートにマークアップを貼り付けてください。その後、Liquid、リンク、およびホストされたアセットを再確認してください。
テンプレートの保存場所の詳細については、テンプレートとメディアを参照してください。
ドラッグ&ドロップエディターでボタンの塗りつぶし色を変更できないのはなぜですか?
ページレベルのスタイルがメッセージレベルのスタイルを上書きする場合があります。ボタンやブロックの塗りつぶしを更新しても反映されない場合は、以下をお試しください。
- メールのグローバルスタイル設定を開き、競合するページスタイルでデフォルトにリセットを選択して、メッセージレベルの色が適用されるようにします。
- ブロックで色を再度設定します。
ドラッグ&ドロップエディターにメールの添付ファイルを追加できますか?
はい。送信設定 > 詳細設定に移動することで、メールメッセージに添付ファイルを追加できます。
ドラッグ&ドロップメールの生のHTMLをダウンロードするにはどうすればよいですか?
ドラッグ&ドロップエディターには、メールをZIPファイル内のHTMLファイルとしてエクスポートするオプションとしてファイルをダウンロードがあります。
- キャンペーンまたはキャンバスを開き、メールメッセージを編集します。
- メール本文を編集を選択して、ドラッグ&ドロップエディターを開きます。
- ファイルをダウンロードを選択します。
- アーカイブを展開して、生成されたHTMLにアクセスします。

Windowsでは、展開する前にZIPファイルを永続的な場所(ダウンロードフォルダーなど)に移動してください。一時フォルダーから展開すると、そのフォルダーがクリアされた後にHTMLファイルにアクセスできなくなる場合があります。
このHTMLをHTMLブロックやHTMLエディターに貼り付けて、低レベルの編集を行うことができます(例えば、特定のリンクのクリックトラッキングをオフにする場合など)。
ドラッグ&ドロップのレイアウトが崩れるのはなぜですか?
レイアウトの問題は、エディターが生成するマークアップと競合するカスタムHTMLまたはCSSが原因であることがよくあります。以下のステップをお試しください。
- カスタムHTMLブロックを削除または分離して、問題が解消されるかどうかを確認します。
- ドラッグ&ドロップメールエディターの設定で、すべてのクライアントで読み込めない可能性のあるカスタムフォントがないか確認します。
- 行プロパティで、列のパディングと幅を確認します。
- カスタムHTMLを追加する場合は、テーブルベースのレイアウト、フルイド画像、およびメール幅に収まる合計テーブル幅を使用してください。固定ピクセルの画像やテーブル以外の構造は、Outlookやその他のクライアントで崩れることがよくあります。
Gmailの翻訳機能はドラッグ&ドロップメールにどのような影響を与えますか?
受信者がGmailの翻訳機能を使用すると、Gmailは翻訳処理中にメールHTMLから<style>ブロックを削除します。Gmailは他の理由でも<style>ブロックを削除することがあります。詳細については、GmailのCSS制限を参照してください。
ドラッグ&ドロップエディターは、<style>ブロック内のCSSを使用してレスポンシブな行やコンテナの幅を制御しています。このブロックが削除されると、行の背景やコンテナがコンテナ全体の幅に広がるのではなく、テンプレートの固定ピクセル幅(多くの場合600 ピクセル)でレンダリングされます。この動作はiOSとAndroidの両方で発生します。
Gmail翻訳でのレスポンシブレンダリングが必要な場合は、ドラッグ&ドロップエディターの代わりにHTMLエディターを使用してカスタムHTMLメールを作成してください。
メールプレビューでContent Blockが表示されないのはなぜですか?
メールプレビューでContent Blockが表示されない場合は、閉じられていないアンカータグがないか確認してください。Connected Content URLの場合は、replaceフィルターを使用して、二重エンコードされたアンパサンド(&amp;)を単一エンコードされたアンパサンド(&)に変換してください。Content Blockのネストは2階層までに制限してください。
ドラッグ&ドロップのコンテンツブロックがカスタムコードブロック内でモバイルスタイルを失うのはなぜですか?
ドラッグ&ドロップのコンテンツブロックをカスタムコード(HTML)ブロック内に配置すると、コンテンツブロックのモバイル固有のスタイルやアライメントが送信されたメッセージに適用されない場合があります。コンテンツブロックとテンプレートの両方がドラッグ&ドロップエディターを使用している場合は、カスタムコード内にネストするのではなく、コンテンツブロックを独自の行として追加してください。
複数のコンテンツブロックを重ねる場合は、1つの行に複数のブロックを配置するのではなく、ブロックごとに別々の行を使用してください。
ドラッグ&ドロップエディタが配置設定を無視するのはなぜですか?
ドラッグ&ドロップエディタが配置設定を無視する場合は、カスタムCSSまたはHTMLブロックを削除し、カスタムフォントを削除し、CSSの競合を確認し、行ブロックの重複を避けてください。問題が解決しない場合は、Brazeサポートにお問い合わせください。
選択した16進カラーコードがメールのフォントに反映されないのはなぜですか?
コンテンツブロックを使用している場合、ブロック自体にフォントカラーの設定が含まれている可能性があります。コンテンツブロック内のテキストブロックを選択し、ローカルのフォントカラーオーバーライドをクリアして、グローバルまたは段落のスタイリングからの16進カラーが適用されるようにしてください。