HTMLを使用してメールテンプレートを作成する方法

この記事では、主に HTML を使用してシンプルなメール テンプレートを作成する方法を紹介します。著者はミニマリズムを提唱しています。まず、記事の最後にあるリンクで紹介されている完成したテンプレートをご覧ください。必要な友人はそれを参照してください。今日は「ローテク」な質問を書きたいと思います。

ところで、私はJavaScript Weeklyなど、たくさんのニュースレター（ニュースレター）を購読しています。その週の重要なニュースを毎週メールで受け取ります。

ある日、私もこんなメールをしてもいいだろうかと考えました。

その後、それはそれほど簡単ではないことがわかりました。背景や編集作業はさておき、メール テンプレートをデザインするだけでも多くの考慮が必要です。

このフォーマットされたメールは実際には Web ページであり、その正式名称は HTML メールだからです。正しく表示されるかどうかはメールクライアントに依存します。ほとんどの電子メール クライアント (Outlook や Gmail など) は HTML 設定をフィルタリングして、電子メールを認識できなくします。

HTMLメールを書くコツは、15年前のWebページ作成方法を使うことだと分かりました。以下は私がまとめたライティングガイドです。

現在、最も互換性のある Doctype は XHTML 1.0 Strict です。実際、Gmail と Hotmail はあなたの Doctype を削除し、この Doctype に置き換えます。

この Doctype を使用すると、HTML5 構文は使用できなくなります。

Web ページのレイアウトにはテーブルを使用する必要があります。まず、背景を設定するために一番外側に大きなテーブルを配置します。

　

　　
　　　
　　

　
 Hello! 

開発の便宜上、テーブルの border 属性は 1 に等しくなります。正式にリリースされたら、この属性を 0 に設定します。

内側の層に2番目のテーブルを配置します。コンテンツを表示するために使用されます。 2 番目のテーブルの幅は、クライアントの表示幅を超えないように 600 ピクセルに設定されています。

　
　　
　

　
　　
　

　
　　
　
 Row 1 
 Row 2 
 Row 3 

メールの内容はいくつかの部分に分かれており、数行設定するだけです。

引用できる外部リソースは写真のみです。その他、スタイルシートファイル、フォントファイル、動画ファイル等の外部リソースを引用することはできません。

一部のクライアントは画像リンクに枠線を追加するため、枠線を削除する必要があります。

　　img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}   

　　a img {border:none;}   

　　

多くのクライアント（Gmail など）ではデフォルトで画像が表示されないため、画像がなくてもメインコンテンツが読めることを確認してください。

すべてのCSSルールにインラインスタイルを使用するのが最善です。 Web ページの先頭に配置されたスタイルはクライアントによって削除される可能性が高いためです。 CSS ルールのクライアント サポートについては、ここを参照してください。

また、一部のクライアントではサポートされていないため、CSS の省略形は使用しないでください。たとえば、次のようには書かないでください:

style="font: 8px/14px Arial, sans-serif;"

を表現したい場合は、次のように記述してください:

最終コードが合格できることを確認する必要があります。 W3C 検証。一部のクライアントは修飾されていない属性を削除するため。また、テスト ツール (1、2、3) を使用して、さまざまなクライアントでの表示結果を確認します。

HTMLメールを送信する場合、MIMEタイプは使用できないことを忘れないでください

　Content-Type: text/plain;

代わりに、

Content-Type: Multipart/Alternative;

を使用したい場合は、送信ツールとしてMailChimpとCampaign Monitorの使用を検討できます。

他の人がすでに作成したテンプレート (こことここ) を使用することは良い選択であり、オンラインでさらに見つけることができます。

自分で開発する場合は、HTML Email Boilerplate と Emailology を参照してください。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

以上がHTMLを使用してメールテンプレートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。