こんにちは、なかにしです。
今回は、HTMLメールを送ってみようと思います。
ちなみに、誰かに送る予定はありません。
新年のあいさつなど、ちょっとした機会に送るかもしれません。
HTMLメールとは
HTMLで記述して送るメールのことです。
▼ こんなやつ（SATORI 様より引用）
Gmailなどはいわゆる「リッチテキスト」と呼ばれるもので、
視覚的に分かりやすく文章を構築できます。
「こんにちは」とキーボードで打てば「こんにちは」になりますし、太字や画像の挿入などもボタンをぽちっとやると簡単にできます。
その部分を、<p>タグや<img>タグでべた書きしますよ、というのがHTMLメールです。
メリットは、「柔軟性」です。
Gmailなどのリッチテキストより、実現できるデザインの幅が広がります。
一言で言うと、おしゃれにできます。
HTMLメールの送り方
シンプルな3ステップです。
- HTMLをつくる
- メールの本文にHTMLを貼る
- メールを送信する
HTMLメールは、「送れるメーラー」と「送れないメーラー」があります。
「送れるメーラー」として一番有名なのは Thunderbird でしょう。
Thunderbird はフリーのメーラーで、柔軟性と拡張性に定評があります。
「一番シンプルなメーラー」といったところでしょうか。
今回は、こちらを使用してHTMLメールを送ります。
Thunderbirdのセットアップ
Thunderbirdの公式ページに行き、ダウンロードします。
ダウンロードしたらインストールし、起動します。
かわいいタコ？みたいなのが出てきました。
ここで名前とメアド、パスワードを入力します。
新しいメアドを取得してもいいですし、既存のメアドを使うこともできます。
私はGmailヘビーユーザーなので、Gmailアドレスを使用します。
▼ Gmailのメアドを入力すると、そのGmailのメアドが見つかったよと言ってくれています。
完了を押します。
▼ Googleの本人確認が入ります。
パスワードなどを入力し、本人ということを証明します。
▼ 証明すると、設定が完了しました。
メール本文（HTML）の作成
続いて、メール本文の作成です。
試しに、以下のようなHTMLを作りました。
ちなみに、CSSはインラインのみ可能です。
<table border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;">
<h1 style="color: white;">Nakanishiの技術ブログ</h1>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
<p>こんにちは！私はなかにしです。</p>
<p><a href="https://nakanishi-s.jp">リンクはこちら</a></p>
</td>
</tr>
</table>メールの本文にHTMLを貼る
▼ 赤枠の左から、「メッセージ作成」→「挿入」→「HTML」を選ぶと、HTMLを入力するポップアップが出てきます。
▼ HTMLを貼りました。
挿入ボタンを押すと、以下が本文に表示されました。
あとは、送るだけです！
メールを送信する
試しに、自分に送信してみます。
▼ 届きました。リンクもちゃんと飛ぶことができます。
この要領で、おしゃれなHTMLメールを作ろう！
という感じです。
さいごに
chatGPT君と協力して、それっぽいHTMLメールを作成してみました。
こういった簡単なタスクは本当に強いですよね。便利です。
ちなみに、Outlookなどの一部メーラーは、paddingやmarginが表示されなかったりするらしいので、きちんと各メーラーでの動作確認は忘れずに！
今回はここまで！
Enjoy Hacking!!