# Discourse の外側メールテンプレートのカスタマイズ
**URL:** https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637
**Category:** Site Management
**Tags:** email, how-to
**Created:** [2020 年 6 月 3 日午前 12:45 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637 "2020-06-03T00:45:47Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2020 年 6 月 3 日午前 12:45 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/1 "2020-06-03T00:45:47Z")
> 🔖 このガイドでは、Discourseサイトから送信されるすべてのメールのアウターHTMLテンプレートをカスタマイズおよびスタイリングする方法を説明します。
>
> 🙋 必要なユーザーレベル：管理者
サイトから送信されるすべてのメールは、カスタマイズ可能なHTMLテンプレートでラップされています。
このガイドで説明する内容：
- メールスタイルのカスタマイズセクションへのアクセス
- HTMLテンプレートの変更
- カスタムCSSの追加
- メールテンプレートのテスト
- 変更の元に戻す
- カスタムテンプレートの例
- ダイジェストメールとの連携
- メールフォントの変更
## メールスタイルのカスタマイズへのアクセス
1. 管理者サイドバーの **Email** セクションにある **Appearance** ページに移動するか、`/admin/customize/email_style`に直接アクセスします。
2. メールテンプレートとスタイルを変更できる **HTML** と **CSS** の2つのタブがあるエディタが表示されます。
## HTMLテンプレートの変更
HTMLタブのデフォルトのマークアップには、いくつかのプレースホルダーが含まれています。
- `%{email_content}` — **必須。** 各メールのコンテンツが挿入される場所です。このプレースホルダーを削除してはなりません。
- `%{email_preview}` — スニペットを表示するメールクライアント用に、非表示のプレビューテキストを挿入します。
- `%{html_lang}` — サイトの言語コードを``タグに挿入します。
- `%{dark_mode_meta_tags}` — ダークモードサポート用のメタタグを挿入します。
- `%{dark_mode_styles}` — ダークモードのレンダリング用のCSSスタイルを挿入します。
カスタムテンプレートを作成する際は、完全な互換性を確保するために、これらすべてのプレースホルダーを含める必要があります。開始点として、エディタを初めて開いたときに表示されるデフォルトのテンプレートを参照できます。
`%{email_content}`プレースホルダーを置き換えるコンテンツのカスタマイズについては、[特定のメールテンプレートのカスタマイズ方法](https://meta.discourse.org/t/how-to-customize-specific-email-templates/88323)を参照してください。
## カスタムCSSの追加
メールスタイルのエディタの **CSS** タブを使用して、インラインスタイルをテンプレートに挿入できます。例を以下に示します。
1. テンプレートのHTML要素にCSSクラスを追加します。
2. CSSタブでクラスのルールを作成します。
Discourseは、メールを送信する前にCSSクラスを実際のCSSルールに置き換えます。ここには好きなCSSルールを追加できます。
## メールテンプレートのテスト
メールクライアントごとにHTMLの解釈が異なる場合があるため、さまざまなメールクライアントでメールテンプレートの変更をテストすることが重要です。特に大きな変更を加える場合は、メールテストサービスを使用して、さまざまなクライアントでメールがどのように表示されるかを確認してください。
## 変更の元に戻す
テンプレートのカスタマイズを元に戻すには：
1. リセットしたいタブ（HTMLまたはCSS）を選択します。
2. エディタの下にある「Reset to default」ボタンをクリックします。
これにより、その特定のセクション（HTMLまたはCSS）がデフォルトのDiscourseメールテンプレートにリセットされます。各タブは個別にリセットされます。
## カスタムテンプレートの例
ここでは、メールの幅を最大600pxに制限し、上部にロゴを追加する基本的なメールテンプレートを示します。
```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つの選択肢があります。
1. デフォルトのダイジェストメールのスタイリングを使用する場合：
2. すべての通知メールで一貫したスタイリングを維持する場合：
## メールフォントの変更
メールのフォントを変更するには：
1. 互換性を最大化するためにウェブセーフフォントを使用します。WindowsとMacで利用可能なフォントのリストについては、[CSS Font Stack](https://www.cssfontstack.com/)を参照してください。
2. フォントのCSSルールをDiscourseのメールテンプレートに追加します。
3. HTML要素に直接フォントを設定することもできます。例：
外部サービスからのウェブフォントは、多くのメールクライアントではサポートされていないことに注意してください。
## 追加リソース
HTMLメールの作成の詳細については、[ゼロからHTMLメールテンプレートを構築するための包括的なガイド](https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770)を参照してください。
---
### Author:  [@40\_02](https://meta.discourse.org/u/40_02)
#### Post date: [2020 年 9 月 26 日午後 1:54 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/2 "2020-09-26T13:54:02Z")
@simon さん、ありがとうございます！
テンプレートの全文をご提供いただけますでしょうか？ぜひ試してみたいと思います。
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2020 年 9 月 26 日午後 5:35 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/3 "2020-09-26T17:35:29Z")
> [@40\_02](#):
>
> テンプレートの全文をご提供いただけますでしょうか？
ご指摘ありがとうございます。トピック作成時のコピペミスだったようです。現在、投稿にテンプレートの全文を追加しました。
---
### Author:  [@eatcodetravel](https://meta.discourse.org/u/eatcodetravel)
#### Post date: [2020 年 10 月 15 日午後 9:56 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/4 "2020-10-15T21:56:07Z")
このテンプレートで Discourse から logo\_url を取得するにはどうすればよいですか？可能ですか？
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2020 年 10 月 15 日午後 10:06 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/5 "2020-10-15T22:06:03Z")
> [@eatcodetravel](#):
>
> このテンプレートで Discourse から logo\_url を取得するにはどうすればよいですか？
最も簡単な方法は、Discourse サイトでブラウザのウェブインスペクターを開き、ロゴの `src` 属性の値をテンプレートにコピーすることです。また、Rails コンソールで `SiteSetting.logo` に対して返される `url` プロパティの値を確認することで、ロゴの URL を取得することもできます。
---
### Author:  [@eatcodetravel](https://meta.discourse.org/u/eatcodetravel)
#### Post date: [2020 年 10 月 15 日午後 10:07 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/6 "2020-10-15T22:07:33Z")
なるほど、今のやり方を教えてくれてありがとう！
---
### Author:  [@RichardC](https://meta.discourse.org/u/RichardC)
#### Post date: [2021 年 4 月 13 日午後 8:15 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/7 "2021-04-13T20:15:52Z")
とても素敵ですね。これをデフォルトにするべきだと思います。多くのサイトは幅 600px の中央揃えの列を採用しています。
ダイジェストメール用には、編集用の別ラッパーを用意すべきだと思われます。
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2021 年 11 月 21 日午前 11:26 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/8 "2021-11-21T11:26:29Z")
メールのフォントを変更する最善の方法は何ですか？よろしくお願いします。
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2021 年 11 月 23 日午後 5:32 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/9 "2021-11-23T17:32:20Z")
Webセーフフォントを使用するのが最も安全なアプローチだと思います。WindowsおよびMacコンピューターで利用可能なフォントの良いリストは次のとおりです。[CSS Font Stack: 。DiscourseのメールテンプレートにフォントのCSSルールを追加するだけで十分なはずです。 Web Font](https://www.cssfontstack.com/%E3%80%82Discourse%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AECSS%E3%83%AB%E3%83%BC%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E3%81%A0%E3%81%91%E3%81%A7%E5%8D%81%E5%88%86%E3%81%AA%E3%81%AF%E3%81%9A%E3%81%A7%E3%81%99%E3%80%82)
外部サービスからメールにWebフォントを読み込もうとすることができますが、多くのメールクライアントはWebフォントをサポートしていないことに注意する必要があります。それに関する詳細は次のとおりです。[https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/。](https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/%E3%80%82)
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2021 年 11 月 23 日午後 6:01 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/10 "2021-11-23T18:01:25Z")
ありがとうございます。ウェブセーフフォントを使用します。上記の例には `[if mso]` の部分がありますが、Outlook 以外のクライアントのフォントがどこで設定されているのかわかりません。
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2021 年 11 月 23 日午後 6:28 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/11 "2021-11-23T18:28:12Z")
Outlook以外のメールクライアント用のフォントは、HTML要素に直接追加されたCSSルールを使用して、サンプルテンプレートで設定されています。たとえば、次のようになります。
```plaintext
%{email_content}
|
```
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2021 年 11 月 23 日午後 6:31 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/12 "2021-11-23T18:31:42Z")
ええ、そうです。狭いモバイル画面のせいにします。 🙂
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [2022 年 3 月 14 日午後 11:07 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/13 "2022-03-14T23:07:01Z")
アバターの横にあるテキストのフォントをカスタマイズすることは可能ですか？つまり、次のようなテキストのことです。
> [本名] [ユーザー名]
> [日付]
メールの他のテキストは変更できましたが、上記のテキストは次のスタイルになっています。
> style=“color:#006699;; font-size:13px;font-family:‘lucida grande’,tahoma,verdana,arial,sans-serif;text-decoration:none;font-weight:bold; text-decoration: none; font-weight: bold; color: #006699;”
---
### Author:  [@beno](https://meta.discourse.org/u/beno)
#### Post date: [2022 年 5 月 19 日午後 1:52 UTC](https://meta.discourse.org/t/customizing-the-discourse-outer-email-template/153637/14 "2022-05-19T13:52:45Z")
メールテンプレートで利用可能な他の変数はありますか？
例えば、メールフッターを更新する必要をなくすために %{year} があると便利です。それは利用可能ですか？