aタグでメールアドレスをリンクする方法

aタグでメールアドレスをリンクする方法

HTMLのaタグにメールアドレスをリンクするとメールリンクになり、クリックした場合には使用しているメーラーが開いてメール送信ができるようになります。

aタグでメールアドレスをリンクする場面は少ないかもしれませんが、要望があったときにaタグでメールアドレスをリンクする方法をすぐに思い出せるように記事にしておくことにしました。

参考になることがあったら役立ててくださいまし。

 

aタグにメールアドレスをリンク

 

aタグでメールアドレスをリンクする方法はHTMLのaタグhref属性にmailto:を記述してメールアドレスを指定することでリンクさせることができます。

記述例は以下です。

 

<a href="mailto:info@example.com">メールでお問い合わせ</a>

 

HTMLのa開始タグと終了タグをマークアップしたa要素を作成して、a開始タグにhref属性を記述、そしてhref属性の値にmailto:を記述してメールアドレスを入力することでリンクすることができる方法です。

info@example.comの記述は説明用のメールアドレスです。実際に送信をする場合は、ご自身のメールアドレスを記述します。

上記aタグのように記述したメールリンクはクリックするとメーラーが起動します。

 

メールリンクでメーラーが開くか確認

 

aタグのhref属性にmailtoを記述してメールアドレスを指定したHTMLのメールリンクでリンクテキストをクリックしたらメーラーが開くか確認しておきます。

 

 

aタグのメールリンクをクリックすると、使用しているPCに既定で設定しているメーラーが自動で起動することが確認できます。

 

<a href="mailto:info@example.com">メールでお問い合わせ</a>

 

そしてaタグのhref属性に記述したmailto:info@example.comが宛先のメールアドレスとして表示することができていればaタグでメールアドレスをリンクする方法は成功しています。

 

Advertisement

 

aタグでメールアドレスをリンクしたメールリンクをスマホでクリックした場合は、スマホにインストールしているメールアプリが表示され、アプリを開くとメーラーを開くことが確認できます。

以下の画像はiphoneでメールリンクをクリックしたときのスクリーンショットです。

 

 

aタグにメールの件名と本文を指定してリンク

 

aタグでメールアドレスをmailtoでリンクする方法には宛先だけではなく、メールの件名と本文を指定してリンクすることもできます。

私自身はaタグのmeiltoに件名と本文を含めた使い方をしたことがないので今回やってみて出来たことを元に説明します。

件名はsubjectを記述します。

 

<a href="mailto:info@example.com?subject=件名">メールアプリが起動</a>

 

記述方法はa開始タグのhref属性に指定したメールアドレスを件名と区切るために?疑問符(クエスチョン)を記述してsubject=件名を記述します。

subject=件名と記述した件名の部分には、それぞれ必要な文字を入力します。たとえば商品に対してのお問い合わせをaタグのメールリンクで行いたいなら「商品について」と入力しておくとかです。

 

Advertisement

 

本文を挿入してリンクする場合はbodyを記述します。

件名のsubjectに続けてbodyを記述した場合の例が以下です。

 

<a class="mail-app" href="mailto:info@example.com?subject=件名&amp;body=本文"></a>

 

件名と本文を&マークで区切り記述します。区切る&マークは文字参照で&amp;と記述します。

するとaタグにメールの件名と本文を指定してリンクしたメールリンクをクリックして開くメーラーには件名と本文を表示することができます。

 

 

aタグのbodyで本文を挿入するときに改行したい場合は改行をエンコードします。

 

 

<a href="mailto:info@example.com?subject=商品についてお問い合わせ&body=お問い合わせ内容をご入力ください。%0D%0A%0D%0Aお名前:%0D%0Aお問い合わせ内容:%0D%0A">お問い合わせ</a>

 

以下のエンコードツールを使用すると改行の変換が簡単です。

 

 

https://tech-unlimited.com/urlencode.html

 

エンコードツールのページに表示する左側のボックスでEnterを叩いて改行してから「変換する」のボタンをクリックすると右側のボックスに改行のエンコードが表示するのでbodyの本文で改行したい部分にコピペするという方法です。

まぁ私的にはaタグでメールアドレスをリンクするときにはmailtoでメールアドレスを指定するだけのが良いのかなと思っています。複雑になる場合はお問い合わせフォームの方が便利ですからね。

 

メールアドレスを暗号化する場合

 

ここでは迷惑メール対策を考えた場合にaタグのメールアドレスを暗号化してリンクする方法です。

javascriptでメーラーを起動する方法なのですが、ツールを公開してくれているサイトを見つけたので簡単に実装できました。ありがたい。

 

 

https://www.luft.co.jp/cgi/coding.php

 

上のURLを開くと画像のように「メールアドレス収集ロボット対策用 メールアドレス暗号化ツール」のページが表示します。

使い方はメールアドレス暗号化ツールのページに具体的な説明が書いてあるので簡単な説明を書いておきます。

ページ内では、「安全性:高」にチェックを入れてメールアドレスのボックスにメールリンクで使用するメールアドレスを入力、「暗号化」ボタンをクリックしてjavascriptコードを生成します。

あとは生成されたjavascriptコードを使用したいHTMLに貼り付けるという方法で、暗号化したメールアドレスでaタグのメールリンクを設置することができます。

 

どーでもいい事を最後に。今回記事を書くにあたりPC(Macを使用)でChromeブラウザ検索窓にmailto:を貼り付けEnterを叩くとメーラーが起動するのを初めて知った私でした。

aタグでメールアドレスをリンクする方法の説明は以上です。

HTMLカテゴリの最新記事