スマホ閲覧時にのみ、telリンクを付与する方法

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

tel-link

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

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

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

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

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

イメージとしては、、、

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

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

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

実際のHTMLとJavaScriptの記述例。

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

HTMLの記述例

JavaScriptの記述例

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

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags

Trackbacks & Comments

Trackback URL for this post:

Leave a Reply