HTML/CSS

【HTML】電話番号の自動リンク設定を無効化する方法

aタグに電話番号を設定していないのにスマホで確認した時に、電話番号やFAX番号などの数字がクリックできるようになっており、実際にクリックすると電話発信されてしまう現象にあったことがある人は多いのではないでしょうか。

こちらの記事では、スマホで数字が連続で出現した時に電話番号の自動リンク設定を無効化する方法についてまとめています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

本書情報
著者Mana
発売日2019/3/16
ページ数280ページ
Kindle版
レビュー
(Amazon)
(2,167件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

ページ全体で電話番号の自動リンク設定を無効化したい時

電話発信されるのを防ぐ方法はとても簡単で、headタグ内に以下のmetaタグを追加します。
<meta name="format-detection" content="telephone=no">

特定の電話番号のみリンク設定を無効化したい時

headタグ内に『<meta name=”format-detection” content=”telephone=no”>』を設定すると、全てのリンクで電話発信が無効化されてしまいます。

FAXはリンク設定を無効化したいけど、電話番号は発信できるようにしたい場合はcssで制御することで解決できます。
@media only screen and (max-width:768px) {
   .telephone-none{
      pointer-events: none;
   }
}

上記の例では、クラスtelephone-noneにpointer-events: none;を指定することでtelephone-noneのクラスを持つ要素は、リンク設定を無効化します。

まとめ

今回は電話番号の自動リンク設定を無効化する方法について解説しました。

重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。

復習ポイント

  • headタグ内に『<meta name=”format-detection” content=”telephone=no”>』を追記することでページ全体の自動リンク設定を無効化することができる
  • 特定のリンクのみ自動リンク設定を無効化する場合はcssの『pointer-events: none』を使う

先輩くん
先輩くん
電話発信に関する記事を他にも掲載しているので、気になる方ぜひご覧ください!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村