レスポンシブ対策!電話番号リンクをスマホの場合だけ有効にする方法
  • レスポンシブ対策!電話番号リンクをスマホの場合だけ有効にする方法
  • 記事公開:2016/07/20
  • 最終更新:2017/12/14

レスポンシブ対策!電話番号リンクをスマホの場合だけ有効にする方法

電話番号リンクをPC表示の場合は無効にする方法をご紹介します。レスポンシブサイトで電話番号サイトを設置すると、PC表示の場合もリンクが生きており上手くありません。この辺りをサクッと解決する方法をご紹介しています。

この記事は約 3 分で読めます。

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

電話番号リンクをスマホで有効、PCで無効にしたい!

レスポンシブサイトの案件でスマホユーザーのユーザビリティを考え、電話番号に【<a href=”tel:電話番号″>】とリンクを設定することは非常に多いと思います。

ですが、このリンクをPC表示でクリックしてしまうと色々と問題が生じます。

理想としては、スマホ表示の場合はリンクを設定し、PC表示の場合はリンクを無効にしたい!
そんな便利な方法はないのかと探していたら、いい感じのコードがありました。

簡単なjQueryで実現可能でしたので、その方法をシェアしたいと思います。
本当に簡単なので、サクッとご紹介します。

まず、以下の様な電話番号リンクがあったものとします。

<a href="tel:000*******">TEL:000-***-****</a>

以下のコードを追加すれば、スマホ表示の場合はリンクが設定され、
PC表示の場合はリンクが無効となります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') < 0 && ua.indexOf('Android') < 0) { $('a[href^="tel:"]').css('cursor', 'default').click(function (event) { event.preventDefault(); }); } </script>

上記のコードは【jQuery – 電話番号のリンクをスマホで有効、PCで無効にする。】で紹介されているコードです。

詳しい解説は上記コンテンツもご確認ください。

まとめ

電話番号リンクをPC表示の場合は無効にする方法をご紹介しました。

レスポンシブサイトを制作していると電話番号リンクは避けては通れません。
今回のコンテンツを参考にしてスマホ表示とPC表示で最適に表示されるようにしておきましょう。

WordPressサイトの常時SSL化はお任せください。

ADhttps://wordpress-supporters.com/wordpress-ssl/

常時SSL化されていないサイトにGOOGLEが警告文を表示させるまであと僅か!
今すぐにでも必要なWordPressサイトの常時SSL化は、プロに丸投げしてください。
今だけ20,000円OFF、GOOGLE対策、リミット間近、サポート充実。

この記事が気に入ったら【いいね】しよう!

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2016-10-10

    WordPress管理画面の投稿一覧から項目「作成者」を削除する方法

    WordPress管理画面の投稿一覧から項目「作成者」を削除する方法を解説します。表示オプションからも「作者名」の項目を削除する方法です。5分程度でマスターできますので、興味のある方は参考にしてください。 記事を読む

  • 2016-03-11

    【WordPress】ショートコードの作り方と使い方

    WordPressのショートコードに関して詳しく解説しています。WordPressのショートコードをマスターしたい方は必読のコンテンツです。興味のある方は6分間だけこのコンテンツを読んでみてください。 記事を読む

  • 2017-07-18

    WordPressの記事に挿入する画像にオリジナルclassを追加する

    とある案件で、とあるクライアント様から、記事に画像を挿入する時、独自のclassを追加したいとご要望をいただき ... 記事を読む

  • 2016-02-03

    WordPressにプラグインをインストールする方法

    WordPressにプラグインをインストールする方法を解説しています。プラグインのインストール方法が分からない方は必見です。3分後にはプラグインをインストールできるようになります! 記事を読む

  • 2016-03-12

    WordPressのカスタムメニューでアクティブページだけ装飾を変える方法(カレント表示)

    WPのカスタムメニューでアクティブページだけ装飾を変える方法をご紹介します。現在表示されているページがグローバルメニューの中にある場合、そのメニュー部分だけ装飾を変えることができれば、ユーザビリティの向上にも繋がります。3分だけコンテンツを読んでみてください。 記事を読む

コメントを残す


(必須)