一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント

HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する画像を少なくする、テーブルを使用して左右レイアウトまたはより複雑なレイアウトを実装する、背景要素を使用して背景画像を設定するなど。
ほぼすべての会員制ウェブサイトでは、登録確認やマーケティングプロモーションなど、会員とのコミュニケーションのためにバックグラウンドでメールを送信する必要があります。サイトからメンバーに送信されるこれらのレターは、プレーンテキスト形式ではインターフェイスとインタラクションの要件を満たすことができないことがよくあります。現時点では、HTML ページを送信する必要があります。 HTML メールはこのサイト上の独立したホストページではないため、他の誰かによってホストされています。したがって、HTML メールの作成は HTML ページの作成とは大きく異なります。これは、インターネットユーザー向けのすべての主流の電子メールサービスが、受信した HTML 電子メールをバックグラウンドで多かれ少なかれフィルタリングするためです。 onclick や onmouseover などのすべてのイベント監視属性を含む JS コードが厳密にフィルタリングされていることは間違いありません。これは電子メールのセキュリティを考慮した上で行われます。それだけでなく、CSS コードも部分的にフィルタリングされます。今回お話ししたいのは、大手の主流メールボックスでフィルタリングされず、正常に表示できる HTML メールの書き方についてです。
HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する画像を少なくする、テーブルを使用して左右レイアウトまたはより複雑なレイアウトを実装する、背景要素を使用して背景画像を設定するなど。
まず、メールボックスに HTML メールがどのように表示されるかを見てみましょう。私は電子メールシステムに携わったことがなく、主要な電子メールシステムの背後にあるフィルタリングアルゴリズムは、部外者にとってそれほど簡単に理解できるものではありません。したがって、メールボックスで受け入れられる書き込み方法と、フロントエンドの表示を通じてフィルタリングされる書き込み方法を推測することしかできません。 Gmail、Hotmail、163、sohu、sina の分析を通じて、メールボックスを 2 つのカテゴリに分類します。
最初のカテゴリには、gmail、hotmail、sohu が含まれます。このタイプのメールボックスの場合、電子メールの内容はメールボックスページ全体の div にレイアウトされます。
2 番目のカテゴリには 163 と sina が含まれます。このタイプのメールボックスでは、電子メールの内容は独立した iframe にレイアウトされます。
HTML に詳しい人なら、iframe コンテンツは独立したドキュメントであり、親ページの要素や CSS とは無関係であり、ほぼ独立したページとして扱うことができることを知っています。電子メールの内容が div 内にある場合、電子メールの内容はメールボックスページ全体の不可欠な部分になります。明らかに、表示方法として iframe を使用する電子メールは、十分に独立した表示スペースを提供するため、電子メールコンテンツに対してはるかに寛容になります。 div はあまり丁寧ではありません。メールにこの CSS を記述すると、メールページ全体のフォントサイズが 20 ピクセルになり、乱雑になるのではないかと想像してください。
<スタイルタイプ="text/css">
本文 {フォントサイズ:20px}
</スタイル>
<スタイルタイプ="text/css">
本文 {フォントサイズ:20px}
</スタイル>
すべてのメールボックスと互換性のある統一されたメールテンプレートを記述する必要がある場合、上記の外部 CSS 記述方法を避ける必要があります。また、異常なコンテンツフローを形成する float や position などのスタイルもフィルタリングされます。これらを記述すると、外部メールボックスのパフォーマンスに影響を与える可能性があります。
ここにいくつかの執筆原則を示します。
1. グローバルルールの 1 つは、<style> タグを記述せず、クラスを記述せず、すべての CSS でスタイル属性を使用し、特定のスタイルを必要とする要素のインライン CSS を記述するためにスタイルを使用することです。
2. 2 番目のグローバルルールは、画像の使用を減らすことです。メールボックスは img タグをフィルターしませんが、システムは多くの場合、見慣れないメールからの画像を読み込まないことをデフォルトとしています。メールに多くの画像が使用されている場合、画像が読み込まれないと見苦しくなり、コンテンツさえもはっきりと見えなくなります。我慢できないユーザーは、すぐに削除します。画像には常に alt を追加します。
3. スタイル内に float、position、その他のスタイルを記述しないでください。これらはフィルタリングされます。では、左右レイアウトやより複雑なレイアウトを実現するにはどうすればよいでしょうか?テーブルを使用します。
4. 背景色はスタイルコンテンツで設定できますが、画像はフィルターされるため、CSS を通じて背景画像を設定することはできません。しかし、背景とも呼ばれる非常に興味深い要素属性があり、画像パスを定義できます。これは良い代替手段です。機能は制限されていますが、たとえば背景画像を配置することはできませんが、何もないよりはましです。たとえば、セルに背景を追加するには、次のように記述する必要があります。
<td background="upload/2022/web/logo_koubei.gif"></td>
<td background="upload/2022/web/logo_koubei.gif"></td>
5. div モードのメールボックスはフラッシュをサポートしていないため、iframe モードのメールボックスを検証する必要があります。
最後に、Sohu のメールは非常に奇妙であることを述べておきます。各テキスト段落の後にスペースが追加されるため、通常のレイアウトが 1 行に収まらず折り返され、レイアウトが乱れてしまいます。したがって、Sohu Mail との互換性を確保したい場合は、コンパクトなレイアウトに遭遇したときには特に注意し、テキストセグメントの数を減らして十分な幅を残すようにしてください。

<<: 自動ヘルスレポートを実現するDocker+Selenium方式

>>: CSS でテキストカラーグラデーションを実装する 3 つの方法