ホームページ ウェブフロントエンド htmlチュートリアル HTMLを使用してメールテンプレートを作成する方法

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

Jan 25, 2018 am 11:23 AM
html どうやって 書く

今回は、HTML を使用してメール テンプレートを作成する方法と、HTML を使用してメール テンプレートを作成する際の注意事項について説明します。実際のケースを見てみましょう。

今日は「ローテク」の質問について書きたいと思います。

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

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

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

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

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

1. Doctype

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <title>HTML Email编写指南</title>  
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
 </head>  
</html>
ログイン後にコピー

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

2.レイアウト

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

<body style="margin: 0; padding: 0;">  
 <table border="1" cellpadding="0" cellspacing="0" width="100%">  
  <tr>  
   <td> Hello! </td>  
  </tr>  
 </table>  
</body>
ログイン後にコピー

開発の都合上、テーブルのborder属性は1としています。正式にリリースされたら、この属性を 0 に設定します。

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

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">  
 <tr>  
  <td> Row 1 </td>  
 </tr>  
 <tr>  
  <td> Row 2 </td>  
 </tr>  
 <tr>  
  <td> Row 3 </td>  
 </tr>  
</table>
ログイン後にコピー

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

3. 写真

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

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

img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}   
  a img {border:none;}   
  <img border="0" style="display:block;">
ログイン後にコピー

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

4. インラインスタイル

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

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

style="font: 8px/14px Arial, sans-serif;"
ログイン後にコピー

<p style="margin: 1em 0;">
ログイン後にコピー

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

<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">
ログイン後にコピー

5. W3C チェックサム テスト ツール

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

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

Content-Type: text/plain;
ログイン後にコピー

代わりに、

Content-Type: Multipart/Alternative;
ログイン後にコピー

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

6. テンプレート

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

HTML コードを記述するための標準とは何ですか?

HTML と CSS を使用してわかりやすくする方法

XHTML でよく使用されるタグとは何ですか?

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles