このガイドでは、Discourseサイトから送信されるすべてのメールのアウターHTMLテンプレートをカスタマイズおよびスタイリングする方法について説明します。
必要なユーザーレベル: 管理者
サイトから送信されるすべてのメールは、カスタマイズ可能なHTMLテンプレートでラップされています。
このガイドで説明する内容:
- メールスタイルのカスタマイズセクションへのアクセス
- HTMLテンプレートの変更
- カスタムCSSの追加
- メールテンプレートのテスト
- 変更の元に戻す
- カスタムテンプレートの例
- ダイジェストメールとの連携
- メールフォントの変更
メールスタイルのカスタマイズへのアクセス
- Discourseサイトで、管理者 / メール / 外観 に移動します。
- メールテンプレートのHTMLとCSSを変更できるエディタが表示されます。
HTMLテンプレートの変更
エディタ内のデフォルトのマークアップには、bodyセクションに%{email_content}プレースホルダーが含まれています。このプレースホルダーは、各メールの内容が挿入される場所です。このプレースホルダーを削除しない限り、テンプレートに対して任意の変更を加えることができます。
%{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の解釈が異なる場合があるため、変更したメールテンプレートをさまざまなメールクライアントでテストすることが不可欠です。特に大幅な変更を加える場合は、メールテストサービスを使用して、さまざまなクライアントでメールがどのように表示されるかを確認してください。
変更の元に戻す
テンプレートのカスタマイズを元に戻すには:
- テンプレートエディタの一番下までスクロールします。
- 「デフォルトに戻す」ボタンをクリックします。
この操作により、変更はデフォルトのDiscourseメールテンプレートに置き換えられます。
カスタムテンプレートの例
ここでは、メールの幅を最大600pxに制限し、上部にロゴを追加する基本的なメールテンプレートを示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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>
画像、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>を追加します。
メールフォントの変更
メールのフォントを変更するには:
-
互換性を最大限に高めるために、ウェブセーフフォントを使用します。利用可能なフォントのリストについては、CSS Font Stackを参照してください（WindowsおよびMac用）。
-
フォントのCSSルールをDiscourseメールテンプレートに追加します。
-
フォントはHTML要素に直接設定できます。例:
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 20px;"> %{email_content} </td>
外部サービスからのウェブフォントは、多くのメールクライアントではサポートされていないことに注意してください。
追加リソース
HTMLメールの作成に関する詳細については、ゼロからHTMLメールテンプレートを構築するためのこの包括的なガイドを参照できます。
