Skip to content

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

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

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

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

基本スタイル

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

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

カスタムフォント

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

要件

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

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

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

カスタムフォントの追加

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

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

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

フォールバックフォント

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

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

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

タイトルスタイル

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

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

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

段落スタイル

デフォルトの段落スタイルを設定するには、段落スタイルに移動し、フォントサイズを入力して、フォントカラーを選択してフォントの色を選びます。また、上パディング右パディング下パディング左パディングの値を編集して、本文テキストのブロックスタイルを調整することもできます。これは、段落ブロックを囲む4つの領域すべてのスペースに適用されます。

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

リストスタイル

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

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

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

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

ボタンスタイル

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

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

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

他のすべてのスタイルセクションと同様に、上パディング右パディング下パディング左パディングの値を編集してブロックスタイルを調整できます。

メールテンプレートの幅

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

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

Content Blocks の幅

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

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

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

New Stuff!