ブログを書いていて、分からなかった為に調べて覚えた細かいテクニックは沢山あります。
その中のひとつに電話番号のリンクはどうすれば直接電話できるリンクになるのか？という疑問がありました。リンクってURLだけのものなんじゃないの？と思いがちなのですが、実は電話番号リンクというものは存在します。
実際に色んなサイトで普通に利用されていると思いますが、その方法は知っているようで意外と知らない。
今回はその、「リンクを押すと、直接電話がかかるようにできる方法」を紹介したいと思います。
スポンサーリンク
簡単！電話番号をリンクURLにする方法
ここでは090-XXXX-6238という電話番号をサンプルにしてみました。
いきなりですが、ソースコードはこのようになります。
<a href="tel:090XXXX6238">090-XXXX-6238</a>
解説
まず、電話番号を下記のHTMLのリンクタグで囲みます。
<a href=""></a>
※ここでは090-XXXX-6238という仮の電話番号を使います。
すると、
<a href="">090-XXXX-6238</a>
のようになります。
ここまでできたらあとはhref=””の「” “」の間にリンクテキストを入力します。
<a href="">090-XXXX-6238</a>
a href=””とは普通の場合、a href=”https://watanabemitsutoshi.com/”のようにURLを入力する場所です。
ここでポイントなのは、ハイフンを省いた電話番号を入力すること、前にtel:を付けることです。
tel:090XXXX6238 ←今回の電話番号ではこのようになります。
そして、tel:090XXXX6238というテキストを先ほどのリンクURLを入力するだけでOKということです。
そういうわけで090-XXXX-6238となります。
これで完成です。
スマホでクリックしてみてください。すぐに発信ボタンが立ち上がるはずです。
※PCの方は「開けるアプリケーションがありません。」となり、エラーが出ます。
<a href="tel:ハイフン抜きの電話番号">ハイフン入りの電話番号</a>
このソースをコピーペーストで使ってみてください。
まとめ
- ハイフン入りの電話番号を用意
- 電話番号をリンクタグで囲む
- リンクタグのURL部分にtel:ハイフン抜きの電話番号を入力
また、ハイフン入りでもハイフンが入っていてももしかしたら機能するかもしれませんが、ここでは正確な方法を紹介しました。
是非、ブログでカフェ紹介や施設紹介をする場合やホームページ作成などに使ってみてください。
スポンサーリンク
