電話番号やメールへのリンクを作成する方法

今回は電話番号やメールアドレスをリンクにして、スマートフォン等からクリックすると電話がかけられたり、メールを送るようにできるリンクの作成方法を解説していきます。

特に自分のお店のホームページを作成する時に役に立ちます。これはスマートフォン等のモバイル端末用なので、パソコンからクリックしても何も起こりません。

これだけ注意しておけばOK。それでは早速説明していきます。

sigezo

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

電話番号にリンクを貼る方法

電話番号を発信するリンクするには次のコードを入れます。番号は書き換えて利用して下さい。

<a href="tel:0901234567">090-1234-567</a>

するとこのように表示されてリンクが貼られます。

解説しておくと、「tel:」の後にリンクしたい電話番号を入れます（ハイフンなし）。その後に表示したいテキストを入力（この例の場合はハイフン付きの電話番号）。

例えばテキスト部分を「電話かける」と書き換えてもOKです。

<a href="tel:090123456">電話をかける</a>

するとこんな表示になって、スマートフォンからクリックすると電話がかけられるようになります。

全く同じ要領でメールアドレスにリンクさせる事ができます。

<a href="mailto:メールアドレス">表示したいテキスト</a>

先ほどの電話番号へのリンクと全く同じで「tel:」と「mailto:」が違うだけ。つまり、電話の場合は「tel」、メールの場合は「mailto」という具合に使う事ができます。

以上電話番号やメールへのリンクの貼り方です。最近知り合いのお店のページを作る依頼が来て初めて使ったので忘れないようにメモ。