HTMLとCSSを使用してメールテンプレートを作成するにはどうすればよいですか？
公開: 2020-02-10デザイナーと開発者の両方として、ある日、クライアントはある種のニュースレターの電子メールテンプレートを要求します。 HTMLとCSSのサポートに大きなギャップがあるという理由だけで、電子メールテンプレートはそれほどエキサイティングではないと言わなければなりません。 HTML5とCSS3を推進しているので、今日の時代にはそうではないことをご存知でしょう。 ただし、電子メールのレンダリングに関しては、そうではないことを残念に思います。
HTMLメールテンプレートを作成するときに最初に覚えておくべきことは、すべてのCSSスタイリングをインラインで行う必要があるという事実です。 それ以外の場合、これは非常に大きなノーノーです。 ただし、外部CSS、さらには頭の中のCSSもほとんどサポートされていないため、インラインがそれを行う方法です。 さらに、これについては以前にも聞いたことがあると思いますが、テンプレートはDIVではなくTABLEで作成する必要があります。 繰り返しになりますが、これは残念なことですが、それが進むべき道です。 電子メールは全体的にそれほど大きくないことを考えると、それらの設計と作成は難しくありません。Webやモバイルの設計と比較すると単純です。
- デザイン
- 構造
- スタイル
- コンテンツ
- インラインスタイル
- 体
- テーブル
- 最初の行–ヘッダー
- 2列目
- 3列目
- 4列目
- 5列目–フッター
- 最後の言葉
デザイン
おすすめ：最新のCSSフレームワークを使用して設計プロセスをスピードアップする方法は？
構造
HTMLページの本文内に、以下のコードを貼り付けます。 コードを見るだけで、このメールの構造はそれほど重要ではないことがわかります。 電子メールは決して複雑であってはならないので、それは実際には非常に良いことです。 これまでのところ、スタイリングの量はごくわずかであり、テーブル全体の幅を指定するものだけであり、テーブルのセルの間に何もありません。
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>スタイル
では、ドキュメントのコンテンツ内にCSSを追加します。 リセットとリンクの色とスタイルの定義だけでは、まったく派手なことではありません。 ここに入力するCSSは、電子メールクライアントによって無視されることが多いため、細心の注意を払っています。
<style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>コンテンツ
テーブルをコンテンツで埋める時が来ました。 このチュートリアルの冒頭で、上記で提供されたファイル内に画像を見つけることができます。 次に、このメールに含まれるすべてのテキストと画像を入力する必要があります。 チュートリアルでは、ハイパーリンクを実際に何かにリンクする必要はなく、独自の画像も自由に使用できることに注意してください。 これまでのコード内で、サイズが設定されていることを確認するために、3つの画像すべての幅を定義しました。
非常に注意しておく必要のあることがあります。画像は、a：サイズが小さく、b：画像を適切に説明するaltタグが付いている限り、メールに最適です。 メール内に画像を表示するには、このメールの受信者が画像の表示を許可する必要があることをご存知だと思います。 そうしないと、彼らが何を期待すべきかを彼らに伝えることは何もありません。 目の不自由なユーザーに説明を提供しない場合も、アクセシビリティの問題です。 しかし、それは別の話です。 したがって、レッスンは次のとおりです。常にaltタグ付きの小さな画像を使用してください。
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>インラインスタイル
最後に行うことは、このHTMLメールテンプレートにインラインCSSスタイルを提供することです。 これまでのところ、この電子メールはそれほどきれいに見えていません。 圧倒されすぎないように、この部分を細かく分割します。
あなたも好きかもしれません：あなたの電子メールの件名をよりクリックしやすくするための7つの便利なヒント。
体
まず、メールページ全体の背景色と、デフォルトのフォントサイズおよびフォントの色を設定しましょう。
<body bgcolor="#f7d973" ></body>テーブル
次に行うことは、電子メールのコンテンツを中央に配置し、目立つように独自の背景色を提供することです。
最初の行–ヘッダー
最初の行のセル内で起こっていることはたくさんあります。 インラインスタイルは<tr>ではなく<td>にあることに注意してください。 ここで行っているのは、ロゴの背景色と一致する新しい背景色です。 さらに、いくつかのパディングと位置合わせもあります。 現在、代替テキストはデフォルトで黒になるため、テキストの色を白に変更しています。 この背景では見えないので、テキストの色を変えて見えるようにしています。 それはあなたには役に立たないように思えるかもしれませんが、私が言ったように、これはデフォルトで許可された画像を持っていない人々にとって非常に重要です。
<tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>2列目
行内には、2つの列にまたがるセルが1つだけあります。 このセルは、その内容を下の行から分離するために、セルにパディングを追加し、下部にブレーカーラインを追加することによってわずかに操作されています。 余白にいくらかのスペースを確保している大きな見出しもあります。 そして、これでこの行は終わりです。
<tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>3列目
ここでは、両方のセルについて、幅とパディングの両方を設定しています。 それらはまったく同じであるため、セルは半分に均等に分割されます。 それ以外に、セルは画像とそれに関するテキストで埋められているので、他には何もありません。
<tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>4列目
これは、このHTMLメールテンプレートの中で最も定型化されたセクションです。 以下のコードでわかるように、多くのことが起こっています。 まず、行全体で新しい背景色とテキストの色を取得して、ヘッダーと同じようにテキストが表示されるようにします。 1番目と2番目のセルとそのコンテンツの両方で、まったく同じスタイルの変更が行われます。 まず、セル自体が新しい背景とテキストの色を取得しています。 次に、見出し内のリンクが黄色に変更されます。 最後に、最後の段落に下線が引かれ、区切りを追加するためにマージンも追加されています。 私が言ったように、2番目のセルとそのコンテンツはまったく同じスタイルになっています。
<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <prsws_divider"><tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <prsws_divider">5列目–フッター
そして最後に、フッター。 ここではほとんど何も起こっていません。 パディングによるわずかな間隔で、それだけです！
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>最後の言葉
このチュートリアルは少し長いですが、HTMLメールテンプレートを最初から作成するために必要なことを理解していただければ幸いです。 これは複雑な概念ではありませんが、面倒な場合があります。 今度は、外に出て、見栄えのするハイエンドのメールを作成し始める番です。 メールテンプレートを作成するいくつかの手法を組み合わせて、よりユニークにすることができます。
この記事はハンナバトラーによって書かれました。 彼女はWeb開発者およびデザイナーとして働いています。 その上、彼女は記事の形で彼女の経験を共有するのが好きです。 この場合、彼女はWriteMyPaper4Me.coWebサイトに独自のセクションを持っています。 将来的には、自分の働き方を他の人に説明するためにブログを書き始める予定です。