このガイドでは、Discourseサイトから送信されるすべてのメールのアウターHTMLテンプレートをカスタマイズおよびスタイリングする方法を説明します。
必要なユーザーレベル：管理者
サイトから送信されるすべてのメールは、カスタマイズ可能なHTMLテンプレートでラップされています。
このガイドで説明する内容：
- メールスタイルのカスタマイズセクションへのアクセス
- HTMLテンプレートの変更
- カスタムCSSの追加
- メールテンプレートのテスト
- 変更の元に戻す
- カスタムテンプレートの例
- ダイジェストメールとの連携
- メールフォントの変更
メールスタイルのカスタマイズへのアクセス
- 管理者サイドバーのEmailセクションにあるAppearanceページに移動するか、
/admin/customize/email_styleに直接アクセスします。 - メールテンプレートとスタイルを変更できるHTMLとCSSの2つのタブがあるエディタが表示されます。
HTMLテンプレートの変更
HTMLタブのデフォルトのマークアップには、いくつかのプレースホルダーが含まれています。
%{email_content}— 必須。 各メールのコンテンツが挿入される場所です。このプレースホルダーを削除してはなりません。%{email_preview}— スニペットを表示するメールクライアント用に、非表示のプレビューテキストを挿入します。%{html_lang}— サイトの言語コードを<html>タグに挿入します。%{dark_mode_meta_tags}— ダークモードサポート用のメタタグを挿入します。%{dark_mode_styles}— ダークモードのレンダリング用のCSSスタイルを挿入します。
カスタムテンプレートを作成する際は、完全な互換性を確保するために、これらすべてのプレースホルダーを含める必要があります。開始点として、エディタを初めて開いたときに表示されるデフォルトのテンプレートを参照できます。
%{email_content}プレースホルダーを置き換えるコンテンツのカスタマイズについては、特定のメールテンプレートのカスタマイズ方法を参照してください。
カスタムCSSの追加
メールスタイルのエディタのCSSタブを使用して、インラインスタイルをテンプレートに挿入できます。例を以下に示します。
-
テンプレートのHTML要素にCSSクラスを追加します。
<td> class="my-outer-td"> </td> -
CSSタブでクラスのルールを作成します。
.my-outer-td { padding: 30px 0 30px 0; }
Discourseは、メールを送信する前にCSSクラスを実際のCSSルールに置き換えます。ここには好きなCSSルールを追加できます。
メールテンプレートのテスト
メールクライアントごとにHTMLの解釈が異なる場合があるため、さまざまなメールクライアントでメールテンプレートの変更をテストすることが重要です。特に大きな変更を加える場合は、メールテストサービスを使用して、さまざまなクライアントでメールがどのように表示されるかを確認してください。
変更の元に戻す
テンプレートのカスタマイズを元に戻すには：
- リセットしたいタブ（HTMLまたはCSS）を選択します。
- エディタの下にある「Reset to default」ボタンをクリックします。
これにより、その特定のセクション（HTMLまたはCSS）がデフォルトのDiscourseメールテンプレートにリセットされます。各タブは個別にリセットされます。
カスタムテンプレートの例
ここでは、メールの幅を最大600pxに制限し、上部にロゴを追加する基本的なメールテンプレートを示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 { font-family: Helvetica, Arial, sans-serif !important; }
</style>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 10px 0 30px 0;">
<!--[if gte mso 9]>
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;border-collapse: collapse;">
<tr>
<td style="padding: 20px 15px 20px 15px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<a href="https://forum.example.com">
<img src="https://your-site-logo-url" alt="Your site name" width="150" height="40" style="display: block;"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0 15px 0 15px;">
<hr style="background-color: #ddd; height: 1px; border: 1px;"/>
</td>
</tr>
<tr>
<td style="padding: 20px 15px 30px 15px; color: #153643; font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;">
%{email_content}
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
画像ソース（src）、代替テキスト（alt）、およびリンク先（href）属性をサイト固有の情報に置き換えることを忘れないでください。
異なる画面サイズでの表示例
iPad Pro (10.5インチ) (iOS 13.1):
Gmail (Chrome):
iPhone 11 Pro Max (iOS 13.1):
Outlook 2019 (Windows 10)
ダイジェストメールとの連携
カスタムテンプレートですべてのメールにロゴを追加した場合、ダイジェストメールには2つの選択肢があります。
-
デフォルトのダイジェストメールのスタイリングを使用する場合：
apply custom styles to digestサイト設定を無効にします。
-
すべての通知メールで一貫したスタイリングを維持する場合：
digest logoサイト設定で設定されている画像を削除します。- テキストカスタマイズ（
.../admin/customize/site_texts/user_notifications.digest.custom.html.header）に<span></span>を追加します。
メールフォントの変更
メールのフォントを変更するには：
-
互換性を最大化するためにウェブセーフフォントを使用します。WindowsとMacで利用可能なフォントのリストについては、CSS Font Stackを参照してください。
-
フォントのCSSルールをDiscourseのメールテンプレートに追加します。
-
HTML要素に直接フォントを設定することもできます。例：
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
外部サービスからのウェブフォントは、多くのメールクライアントではサポートされていないことに注意してください。
追加リソース
HTMLメールの作成の詳細については、ゼロからHTMLメールテンプレートを構築するための包括的なガイドを参照してください。
