Date： | 
Category：PCユーザーにtelリンクを見せたくない！
スマホサイトを作成する場合、電話番号をタップするだけで発信できるように、通常telリンク（a href=”tel:00-0123-4567″）を設置します。
（※iPhoneの場合、設定しなくてもタップ発信可能。）
ですが、レスポンシブサイトにおいて、普通に電話リンクを設置するのは良ろしくありません。
なぜなら、PCなどでの閲覧者がリンクをクリックした際に「プロトコルが不明です」といったメッセージが出力されてしまうから。
今回は、JavaScriptを使った上記への対処法を紹介します。
ユーザーエージェントを識別し、出力するタグを変える。
イメージとしては、、、
もしユーザーエージェントにスマホの記述があったら<a>タグを記述する。
そうでないのであれば<span>タグを記述する。
といった指定を行います。
もう少し細かく言うと、ユーザーエージェント情報にiPhoneという記述があってもipodの場合もありますので、その辺りも含めて設定します。
実際のHTMLとJavaScriptの記述例。
以下のような記述にて、スマホの時のみtelリンクを出力し、それ以外ではspanタグを出力できます。
HTMLの記述例
|
1 2 3 4 |
<p> お気軽にお問合せください： <script type="text/javascript">kansu('00-0123-4567');</script> </p> |
JavaScriptの記述例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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」という文字列は、任意のものに変更していただければと思います。
超多機能でSEOに強い！ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード！最新技術が詰め込まれたWPテーマTHE THOR
