どうもnakattyです。
スマートフォンでWebサイトを閲覧している時に、よく電話番号をタップすると電話をかけられるリンクがあると思います。
自分の会社のWebサイトを作る時に実装したので、今回はこの使い方についてまとめようと思います。
nakatty
最近は問い合わせしたくても電話番号を隠してる会社も多いんですよね。
メールとかだと返事も遅いですし、チャットの問い合わせは打つのが面倒なんですよね、、、。
のぶこ
電話を発信できるリンクのコード
タップで電話の発信ができる様にする方法ですが<a>タグを使用します。
<a>タグ内のhrefの中を「tel:電話番号」の形にするだけでOKです。
コードの書き方は↓の様な感じです。
|
1 |
<a href="tel:03-0000-0000">03-0000-0000</a> |
・hrefの中は「tel:半角数字で電話番号」の形で入力
・通常のlt;a>タグの様にタグの中には電話番号でも文字でも画像でもOKです。
・-(ハイフン)はあっても無くてもどっちでも良いです。
国番号を使う場合
サイトの閲覧者が海外の方で海外から電話がかかってきても対応したい場合はhrefの中の番号を国番号を使って表記する必要があります。
nakatty
日本の国番号は81になります。
国番号を使う場合は電話番号の最初の「0」を「+81」に変換して表記します。
■固定電話 03-××××-×××× → +81-3-××××-××××
■携帯電話 090-××××-×××× → +81-90-××××-××××
といった感じになります。
コードはこんな感じになります。
|
1 |
<a href="tel:+81-3-0000-0000">03-0000-0000</a> |
hrefの中の電話番号を国番号を使用したものにすれば海外のWEBサイト閲覧者も電話を発信することができるようになります。
まとめ
HTMLを使ってスマホでタップした時に電話の発信ができる様にする方法をまとめました。
閲覧したサイトにこの機能があると問い合わせとか楽で好きなのですが、問い合わせを受ける側からすると問い合わせの電話が増えて面倒になることもありそうです。