HTMLメールのヒント

ヒント

メールテンプレートのカスタマイズ

HTMLソースコードのカスタマイズ

Codepenは、HTMLや他のウェブ言語を編集するための素晴らしい無料ツールです。無料アカウントを作成し、メールテンプレートのリンクをクリックすると、次のようなページが表示されます:

screen-shot-2016-10-19-at-10-31-54-am

まず、ウィンドウの右上にある "Fork "ボタンをクリックして、編集可能なテンプレートのコピーを作成する。

メールの内容を変更するには、HTMLソースコードを編集する必要があります。ただし、すべてのメールクライアント(Gmail、Outlook、Apple Mailなど)はメールの扱いが少し異なるため、メールの構造を変更しないようにしましょう。地域名、Eメール、その他の関連情報を挿入するだけでも、すべてを翻訳するのでも構いません。

HTML内のテキストをカスタマイズするのは、場所さえ分かればとても簡単です。Codepenでは、メールに表示されるテキストはすべて ホワイト.例えば、表示されているテンプレートを使っている場合、あなたの地域名を反映させるために、ここの白抜きの行をカスタマイズする必要があります:screen-shot-2016-10-19-at-11-00-55-am

メール内のテキストをすべてカスタマイズしたら、ハイパーリンクの内容を変更する必要があります。メールのプレビューを見ると、ボタンや連絡先メールなどを見つけることができます。ソースコードでは、以下のように表示されます:

<a href="URL">some text</a>

例えば、以下のリンクは、イベントのRSVPウェブページのURLに変更する必要があります:

screen-shot-2016-10-19-at-11-12-51-am

そして、この連絡先情報は、RSVPウェブページと同様に、私のメールアドレスを反映するように変更する必要があります。ハイライトされた行の2つの別々のURLを変更する必要があることに注意してください:

screen-shot-2016-10-19-at-11-16-24-am

完了したら、HTMLをエクスポートする準備ができます。これを行うには、ウィンドウの右下にあるエクスポートボタンをクリックし、"Export .zip "を選択します:

screen-shot-2016-10-19-at-11-18-24-am

これで完了です!これでメールをテストして送信する準備ができました。

メール本文にHTMLを挿入する

HTMLコードをメール本文に挿入する

ほとんどのメールクライアントでは、メール本文に直接挿入したHTMLは表示されません。代わりに、ブラウザでメールを開き、ブラウザウィンドウの内容をコピーして、メールに貼り付ける必要があります。その方法は以下の通りです:

ステップ1HTMLをブラウザで開くには、エクスポートしたHTMLファイルをダブルクリックします(最初にファイルを解凍する必要があるかもしれません)。ブラウザで自動的に開くか、右クリックして "Open with "を選択し、ウェブブラウザを選択します:

screen-shot-2016-10-19-at-11-26-12-am

ステップ2ブラウザでHTMLを開いたら、「編集」>「すべて選択」をクリックする。

screen-shot-2016-10-19-at-11-30-09-am

次に、「編集」>「コピー」をクリックする:
screen-shot-2016-10-19-at-11-32-23-am

それをメール本文に貼り付けて送信する!

screen-shot-2016-10-19-at-11-36-49-am

連絡先にメールを送信する前に、必ずテストすることを忘れないで ください。複数のメールクライアントでテストするのがベストプラクティスです。

テクノベーションは イリデッセントのプログラムです。イリデッセントは、恵まれない青少年が好奇心、創造性、忍耐力を育むことができるよう、強力な科学、工学、技術教育を創造し、提供しています。