Skip to content

メールのグローバルスタイル設定

グローバルスタイル設定を使用すると、メールCampaignsやCanvasesの外観をカスタマイズできます。ドラッグ&ドロップエディターにデフォルトテーマを追加してカスタマイズできます。これには、メールのタイトル、テキスト、ボタンなどのスタイル編集が含まれます。これらの設定を組み合わせることで、メールメッセージング全体で統一感のある外観を実現できます。

グローバルスタイル設定を編集するには、設定 > メール設定 > ドラッグ&ドロップメール設定に移動します。ドラッグ&ドロップメールエディターでスタイルを編集した後、Saveを選択します。メールCampaignsやCanvasesをさらにカスタマイズするには、エディターブロック(メール)の組み込み方法をご確認ください。

ドラッグ&ドロップメールエディター設定タブのメールグローバルスタイル設定セクション。

基本スタイル

Basic Stylingでは、メールCampaignsやCanvasesのデフォルトのメール背景色とコンテンツ背景色を設定できます。また、デフォルトフォントの選択、カスタムフォントの追加、リンクの色の編集も可能です。

メールとコンテンツの背景色、デフォルトフォント名、デフォルトリンク色を編集するオプションを含む基本スタイルオプション。

カスタムフォント

カスタムフォントを使用すると、さまざまなメールプラットフォーム間でブランドの一貫性を保つために、Webフォントを手動で追加できます。各スタイルセクションに1つのカスタムフォントを追加できます。

要件

カスタムフォントを追加する前に、カスタムフォントファイルが以下の要件を満たしていることを確認してください。

  • カスタムフォントファイルを提供するサーバーでCORSが有効になっている必要があります。これは通常、ITチームが管理します。
    • カスタムフォントファイルには次のヘッダーが必要です: Access-Control-Allow-Origin: *
  • ファイルURLはCSSファイルを指している必要があります(WOFFやOTFではありません)。
  • カスタムフォント名は、CSSファイル内のフォントフェイス名と一致する必要があります。

カスタムフォントプロバイダーが受信者の個人データを収集する場合があることにご注意ください。使用前にフォントプロバイダーのポリシーを確認してください。

カスタムフォントの追加

カスタムフォントを追加するには、以下の手順に従ってください。

  1. Basic StylingDefault Font Nameセクションで、Add a custom fontを選択します。
  2. Font Nameフィールドに、カスタムフォントのソースファイルに表示されているフォント名と同じ名前を入力します。大文字・小文字とスペースが正しいことを確認してください。
  3. Font URLフィールドに対応するURLを入力します。
  4. プレビューにカスタムフォントが表示されていることを確認します。
  5. Saveを選択して、カスタムフォントをデフォルトのメールフォントとして使用します。

メールCampaignsで他のカスタムフォントを使用するには、カスタムフォントを含むメールテンプレートまたはContent Blocksを作成できます。たとえば、セールテーマに合わせた季節限定のカスタムフォントでデザインされた特定のメールテンプレートを作成できます。選択したフォントがWebセーフであり、メールプラットフォームでサポートされていることを必ず確認してください。

フォールバックフォント

フォールバックフォントは、デフォルトのフォント選択が受信トレイプロバイダーやオペレーティングシステムでサポートされていない場合に、タイトル、ヘッダー、本文テキストに使用されます。デフォルトでは、グローバルスタイル設定が保存されると、Brazeは自動的にArialをフォールバックフォントとして設定します。デフォルトのフォントファミリーとして、セリフまたはサンセリフをオプションとして追加することもできます。

フォントファミリーが「Sans-serif」に設定された「Arial」のフォールバックフォントの例。

フォールバックフォントは最大17個まで追加できます。最初に選択されたフォールバックフォントが最初に試行されます。フォールバックフォントは、新しく作成されたテンプレート、メールCampaigns、Canvasコンポーネントにのみ適用されます。フォールバックフォントが指定される前に作成されたメッセージには、フォールバックフォントは自動的に設定されません。ブランドの一貫性を維持するために、メールメッセージングに類似したフォールバックフォントを選択することを強くお勧めします。

タイトルスタイル

ここでは、フォントサイズ、フォントカラー、テキストの配置を編集して、メールタイトルのスタイルを調整できます。

中央揃えのメインヘッダーとサブヘッダーのタイトルスタイル設定。

オプションで、ドラッグ&ドロップエディターテーマのデフォルトスタイルをオーバーライドできます。Override default styleを選択して、タイトルスタイルの選択を適用します。これには、異なるフォントやリンクの色の設定が含まれます。

段落スタイル

デフォルトの段落スタイルを設定するには、Paragraph Stylingに移動し、Font Sizeを入力して、Font Colorを選択してフォントの色を選びます。また、Padding TopPadding RightPadding BottomPadding Leftの値を編集して、本文テキストのブロックスタイルを調整することもできます。これは、段落ブロックを囲む4つの領域すべてのスペースに適用されます。

14ptフォントのテキストの段落スタイル設定。

リストスタイル

メッセージングにリストを追加する場合、List Stylingセクションでリストのスタイルに一貫性を持たせることができます。これには以下の詳細が含まれます。

  • フォントサイズ
  • フォントカラー
  • フォントウェイト
  • 行の高さ
  • 配置
  • テキストの方向
  • 文字間隔
  • リスト項目の間隔
  • リスト項目のインデント
  • リストタイプ
  • リストスタイルタイプ

List Typeは、番号付きまたは箇条書きのいずれかに設定できます。List Style Typeでは、リストのスタイルをさらにカスタマイズできます。たとえば、リストタイプを常に箇条書きに設定し、各箇条書きを四角形にすることができます。

箇条書きリストのリストスタイル設定。

ボタンスタイル

Button Stylingセクションでは、ボタンの以下のデフォルトスタイルを編集できます。

  • 背景色
  • フォントサイズ
  • フォントカラー
  • 角の丸み
  • ボーダーの色
  • ボーダーの太さ
  • ボタンのパディング

青い背景の長方形ボタンのボタンスタイル設定。

他のすべてのスタイルセクションと同様に、Padding TopPadding RightPadding BottomPadding Leftの値を編集してブロックスタイルを調整できます。

メールテンプレートの幅

メールテンプレートの幅を使用すると、メールCampaigns全体で一貫性のある幅を調整・設定できます。

メールテンプレートの幅が600pxに設定されている例。

Content Blocksの幅

この設定は、今後のすべてのContent Blocksに事前設定されます。既存のContent Blocksは更新されません。すべてのContent Blocksを100%に設定して、Content Blocksが挿入される場所の幅に従うようにするか、特定のピクセル値を定義できます。

Content Blocksの幅をメールテンプレートの幅に合わせることをお勧めします。

Content Blocksの幅が600pxに設定されている例。

New Stuff!