主流のメールボックスで通常表示できるHTMLメールを作成するためのヒント

著者：Eve Cole 更新時間：2025-06-08 15:00:04

HTMLメールを送信するための提案：スタイルを使用してインラインCSSを書きます。より少ない写真を使用します。テーブルを使用して、左右のレイアウトまたはより複雑なレイアウトを実装します。背景要素を使用して、背景写真などを設定します。

ほとんどすべてのメンバーベースのWebサイトは、登録確認、マーケティングプロモーションなど、メンバーと通信するために、バックグラウンドを通じて電子メールを送信する必要があります。サイトからメンバーに送信されたこれらの手紙は、多くの場合、インターフェイスとインタラクションの要件を満たすことができないため、HTMLページを送信する必要があります。 HTMLメールはこのWebサイトの独立したホストではないため、他のホストに依存しています。したがって、HTMLメールを書くことは、HTMLページを書くこととは大きく異なります。ネチズンのすべての主流のメールボックスは、バックグラウンドで受け取ったHTMLメールを多かれ少なかれフィルタリングするからです。 JSコードが厳密にフィルタリングされていることは間違いありません。これには、電子メールセキュリティの考慮事項に基づいたOnClickやOnMouseoverなどのすべてのイベントリスニング属性が含まれます。それだけでなく、CSSコードも部分的にフィルタリングされます。私が話したいのは、主要な主流のメールボックスによってフィルタリングされておらず、正常に表示できるHTMLメールを書く方法です。

まず、メールがHTMLメールを表示する方法を見てみましょう。私は電子メールシステムを作成したことがありません。主要な電子メールアドレスのバックエンドでのフィルタリングアルゴリズムは、部外者が知るのはそれほど簡単ではありません。したがって、フロントエンドディスプレイを通じてのみ推測することができ、メールでどのライティングメソッドが受け入れられ、どちらが除外されるかを推測できます。 Gmail、Hotmail、163、Sohu、およびSinaの分析により、メールアドレスを2つのカテゴリに分割しました。

最初のカテゴリには、Gmail、Hotmail、Sohuが含まれます。電子メールのコンテンツは、メールボックスページ全体のDIVに配置されています。

163とSINAを含む2番目のカテゴリは、独立したiframeで電子メールコンテンツを配置するために使用されます。

HTMLに精通している友人は、Iframeコンテンツが独立したドキュメントであり、親ページの要素とCSSとは無関係であり、ほとんど独立したページとして扱うことができることを知っています。また、メールコンテンツがDIVにある場合、電子メールコンテンツは電子メールページ全体に不可欠な部分です。明らかに、iframeを電子メールのプレゼンテーション方法として使用すると、プレゼンテーションのための十分に独立したスペースが得られるため、電子メールコンテンツに対してはるかに寛容になります。そして、divはそれほど礼儀正しくありません。このCSSをメールに書いている場合、メールボックス全体のフォントが20pxになり、乱雑になりますか。

ボディ{font-size：20px}

</style>

ボディ{font-size：20px}

</style>

各電子メールアドレスと互換性のある統一された電子メールテンプレートを記述する必要があるため、上記の外部CSS作成方法を避ける必要があります。さらに、異常なコンテンツストリームを持つフロート、位置などに似たスタイルもフィルタリングされます。書くと、外部の電子メールアドレスのパフォーマンスに影響を与える可能性があります。

以下に、いくつかの執筆原則をリストします。

1.グローバルルールの1つ：<style>タグまたはクラスを書かないでください。すべてのCSSはスタイル属性を使用します。スタイルを使用して、あらゆるスタイルを必要とするあらゆる要素のインラインCSSを書き込みます。

2。グローバルルール2：より少ない写真を使用します。メールアドレスはIMGタグをフィルタリングしません。ただし、システムは、デフォルトで見知らぬ人からの写真をロードしないことがよくあります。写真を備えた多くのメールメッセージを使用している場合、映画がロードされていない場合、それは非常に醜く、コンテンツをはっきりと見ることさえできません。せっかちなユーザーはそれを直接削除します。 ALTを写真に追加する必要があります。

3.フロートを書いたり、スタイルをスタイルにしたりしないでください。フィルタリングされるため。では、左右のレイアウトまたはより複雑なレイアウトを達成する方法は？テーブルを使用します。

4.背景はスタイルコンテンツで設定できますが、IMGはフィルタリングされます。つまり、背景画像はCSSを介して設定できません。しかし、画像パスを定義できる背景とも呼ばれる非常に興味深い要素属性があります。これは良い選択肢です。この関数は限られていますが、背景画像を見つけることができないなど、そうでない画像を持っている方が良いです。たとえば、セルに背景を追加するには、次のように書く必要があります。

5. DIVモードの電子メールアドレスはFlashをサポートせず、IFRAMEモードを検証する必要があります。

最後に、Sohuのメールアドレスは非常に奇妙であることに言及したいと思います。各テキストセグメントの後にスペースが追加され、元の通常のレイアウトが登録されず、ラインが破損し、いくつかのレイアウトが混乱します。したがって、Sohuメールボックスと互換性がある場合は、コンパクトなレイアウトに遭遇し、テキストセグメントの数を最小限に抑え、十分な幅を残すときに注意する必要があります。