サイトに電話番号やバナーを表示し、リンクがクリックされた際に自動で電話を発信させたい場面があると思います。
そんな時には、<a href=”tel:”></a>の形式で電話発信用のリンクを設定できます。
今回は<a href=”tel:”></a>の使い方を解説していきます。
リンクのクリック時に電話を自動発信させる方法
リンクのクリック時に電話を発信させるには、対象の要素を<a href=”tel:”></a>で囲います。また、発信先の電話番号は「tel:」のコロンの後にハイフンを抜いて記述します。
ここからは例を用いて解説します。
コードをコピーして使用する際には、「tel:」の後の番号を必ず書き換えるよう注意してください。
テキストをリンクにする例
以下のようなテキストの電話番号のみをリンクにしたい場合を例に説明します。
<p>電話番号：0000-12-3456</p>
通常のaタグを使用したテキストリンクと同様に、以下のように該当箇所を囲います。
<p>電話番号：<a href=”tel:0000123456“>0000-12-3456</a></p>
実際の見た目は以下のようになります。
電話番号：0000-12-3456
画像をリンクにする例
下記コードのようにバナーなどの画像を使用して電話を発信させる場合はこのようになります。
<img src=”image1.jpg”>
テキストと同じように、imgタグをaタグで囲います。
<a href=”tel:0000123456“><img src=”image1.jpg”></a>
実際の見た目は以下のようになります。
まとめ
リンクのクリック時に電話を発信させる際には、対象の要素を<a href=”tel:”></a>で囲うだけでOKです。
コーディング初心者の方でも簡単に設定できますので、ぜひお試しください。
