telephone – 業務改善コンサルティング情報ブログ https://www.trilogyforce.com/blog 業務改善で収益改善！ Mon, 17 Jun 2024 01:21:12 +0900 ja hourly 1 https://wordpress.org/?v=6.9.1 レスポンシブウェブの電話番号 https://www.trilogyforce.com/blog/responsive-web-phone-number/ https://www.trilogyforce.com/blog/responsive-web-phone-number/#respond Tue, 28 May 2019 11:34:20 +0900 https://www.trilogyforce.com/blog/?p=7523 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サイトにアクセスした後に電話番号をタップして電話を掛けようとすることは結構あるのではないでしょうか。

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

]]> https://www.trilogyforce.com/blog/responsive-web-phone-number/feed/ 0