スマホにのみtel(電話)リンクタグを付与する方法とは？-WordPressラボ

Date：2014/07/26 | Category：WordPressテーマのカスタマイズ方法【HTML・CSSの基礎も】

※景品表示法に基づく表記：本記事には商品の広告が含まれています

PCユーザーにtelリンクを見せたくない！

スマホサイトを作成する場合、電話番号をタップするだけで発信できるように、通常telリンク（a href=”tel:00-0123-4567″）を設置します。
（※iPhoneの場合、設定しなくてもタップ発信可能。）

ですが、レスポンシブサイトにおいて、普通に電話リンクを設置するのは良ろしくありません。

なぜなら、PCなどでの閲覧者がリンクをクリックした際に「プロトコルが不明です」といったメッセージが出力されてしまうから。

今回は、JavaScriptを使った上記への対処法を紹介します。

ユーザーエージェントを識別し、出力するタグを変える。

イメージとしては、、、

もしユーザーエージェントにスマホの記述があったら<a>タグを記述する。
そうでないのであれば<span>タグを記述する。

といった指定を行います。

もう少し細かく言うと、ユーザーエージェント情報にiPhoneという記述があってもipodの場合もありますので、その辺りも含めて設定します。

実際のHTMLとJavaScriptの記述例。

以下のような記述にて、スマホの時のみtelリンクを出力し、それ以外ではspanタグを出力できます。

HTMLの記述例

<p>
お気軽にお問合せください：
<script type="text/javascript">kansu('00-0123-4567');</script>
</p>

JavaScriptの記述例

function kansu(hikisu){
  if((navigator.userAgent.indexOf('iPhone') > 0
 && navigator.userAgent.indexOf('iPod') == -1)
 || navigator.userAgent.indexOf('Android') > 0
 && navigator.userAgent.indexOf('Mobile') > 0
 && navigator.userAgent.indexOf('SC-01C') == -1
 && navigator.userAgent.indexOf('A1_07') == -1 ){
    document.write('<a class="link-tel" href="tel:'+hikisu+'">'+hikisu+'</a>');
    }else{
    document.write('<span class="link-tel">'+hikisu+'</span>');
  }
}

なお、「kansu」および「hikisu」という文字列は、任意のものに変更していただければと思います。

Tags