電話発信リンクを設定する方法

電話発信リンクをスマホサイトに設定する方法

お店のウェブサイトなどをスマートフォンで閲覧している際に、店舗情報に記載されている電話番号をタップすると、電話発信の画面が立ち上がり再度タップすると電話をかける事ができます。利用した事がある方も多いかと思います。

では、サイトを制作する際にどのように設定すれば電話発信機能を持たせる事ができるでしょうか？
普通に電話番号を載せるだけでは、タップしても当然何も起こりません。ただの文字としてしか認識されていないからです。

そこで、今回はa要素（aタグ）を使いスマホサイトに電話発信リンクを実装する方法をご紹介します。

●手順はとても簡単

HTMLソースにて、下記のように記述するだけです。

<a href=”tel:電話番号“>テキスト or 電話番号 or 画像</a>

赤文字の方に実際に発信する電話番号を記述します。タップした際にここに書かれている番号が立ち上がります。

青文字の方は、サイト閲覧者がタップ操作できるテキストないし画像を設定します。
この部分は、文字でもいいし画像でもOKです。

【記述例】

1. 電話はこちらという文字にリンクを設定した場合
   <a href=”tel:0120123456″>電話はこちら</a>
2. 電話番号にリンクを設定した場合
   <a href=”tel:0120123456″>0120-123-456</a>
3. 画像にリンクを設定した場合
   <a href=”tel:0120123456″><img src=”画像”></a>

aタグはページ間のリンクの際に使用される最もポピュラーな要素の一つですが、上記の通り、他ページへのリンク以外にも電話タップやメーラーの立ち上げなどにも利用する事が可能です。

※トップページへのリンクを設定した場合の記述例
<a href=”http://zerocolor-marketing.jp”>トップページへ</a>

ブラウザに依存する場合があるので動作検証などは必ず実施しましょう。