BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。

以前このようなブログ記事を掲載しました。
こちらが思った以上に好評だったので、さらに便利な機能について紹介します。

【HTML】スマホで電話番号が自動リンクにならないようにする方法AndroidやiOSの搭載のスマートフォンは、ページに含まれる「電話番号に見える」番号を検出して、電話をかけられるリンクを自動で設定します。 ただ、この自動検出機能は、電話でない番号にまでリンクを設定してしまうことがあるのです。また、そもそも「電話番号をリンクにしたくない場合もあります。そのようなときのために、この自動検出機能はオフにすることができます!

PCで電話番号をかけることはないので、リンクは必要ありません。
ただリンクを貼っただけだとPCで閲覧したときには「開けません」などのメッセージが表示されてしまい、ユーザーが困惑してしまうので、ユーザビリティの低下に繋がります。PCとスマホで電話番号のリンクをつけるか区別しましょう!

今回はjQueryで電話番号を判断し、リンクを自動でつける方法です。
この方法はコピペで使用することができるので、気に入ったらブックマークをお願いします!

jQueryで電話番号の設定方法

前回の記事ではaタグをレスポンシブで表示/非表示で切り替える方法について紹介したので、今回はaタグで囲まない方法です。
指定のクラスがあった場合は自動で判断し、aタグを付与し、PCかスマホの判断はユーザーエージェント(UserAgent)で判断します。
電話番号が複数ある場合にも効果があるので、電話番号にしたい部分にクラスを入れてください。

See the Pen
WNpoWLq
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

HTML

jQuery(JavaScript)

まとめ

いかがでしたでしょうか?
PC/スマホでの切り替えでtelリンクを表示・非表示するとユーザーにとって分かりやすくなります。
またスマホの閲覧時にそのまま電話出来たり予約ができ、お問い合わせ率がアップする方法でもあります。
ぜひ、コピペで自分のサイトに活用していただけると嬉しいです。