PC向けのWebサイトであれば電話番号はリンクさせたくなくけど、スマートフォン向けのWebサイトであれば電話番号をタップで電話を発信可能な状態にしておきたい、といったことを思ったことはありませんか?

スマホから電話をかける

皆さん、こんにちは。

業務改善を行うIT・業務コンサルタント、高橋です。

昨今Webサイトを制作する場合はPC版、スマホ版、セットで制作することが多くなっていますが、その際、スマートフォンの場合だけ電話番号のリンクを有効にしておきたいといったことを思われたことはありませんか?

これ、単純に<a>タグに『href=”tel:0521234567″』と書いてしまうとPC版もリンクを張られてしまうことになるためお勧めではありません。

では、どのようにしておくのがお勧めなのでしょうか?

レスポンシブ対応サイトの電話番号

まず、記述方法の前に1つ別のことをクリアしておく必要があります。

iPhoneなどのiOSデバイスの場合、電話番号は自動でリンクが有効になるようにはなっているのですが、これは電話番号だけでなく、電話番号以外の番号の羅列にも反応してしまいます。

(ブラウザ:Safari)

また、Androidデバイスの場合にはそもそもiOSのような機能がないため反応しません。

(ブラウザ:Chrome)

そのため、<head></head>の中に以下の記述を追加し、まずは電話番号の自動リンクを無効化しておく必要があります。

<meta name=”format-detection” content=”telephone=no”>

次に、電話番号の部分に『data属性』を記述します。

例:<span data-action=”call” date-tel=”0521234567″>052-123-4567</span>

そして、この『data-action=”call”』が指定されている<span>タグだけを<a>タグにする『JavaScript』を用意します。

(要『jQuery』)

例:function isPhone(){return navigator.userAgent.indexOf(“iPhone”)>0||navigator.userAgent.indexOf(“Android”)>0}
$(function(){isPhone()&&$(“span[data-action=call]”).each(function(){var n=$(this);
n.wrap(‘<a href=”tel:’+n.data(“tel”)+'”></a>’)})});

(JavaScriptが圧縮された記述になっていますがそのまま使えます。)

といった感じです。

スマートフォンの場合、Webサイトにアクセスした後に電話番号をタップして電話を掛けようとすることは結構あるのではないでしょうか。

そのような場合にはお勧めです。

この記事が参考になりましたらシェアしてください

この記事を書いた人

  • 業務コンサルタント高橋進伍
  • 1968年生 愛知県名古屋市出身 会計・給与・販売購買在庫・税金系などの業務システムを製造・販売する某上場企業の出身で、会計・IT・WEBを中心とした業務改善などを行う業務コンサルタント
  • 中小企業庁『ミラサポ』登録専門家/あいち産業振興機構登録専門家/名古屋産業振興公社登録専門家
  • (Publisher:TRILOGYFORCE.COM)

Sponsored Ads

関連記事

Comments

" data-numposts="5">

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


お問い合わせ

お悩み・問題・課題を今すぐご相談ください。お問い合わせはこちら

ページのトップへ戻る