ブラウザー側の操作で自動的にリンクが入る機能があるものもあります。たとえば、Microsoft Edgeや、iPhone、Androidなどスマートフォン向けのブラウザーがそれにあたると思います。電話番号リンクを自動で作成する機能は、ユーザーにとってありがたい面もあるのですが、まだまだ未成熟分野であるためか面倒を起こす場合もあります。例えば、FAX番号が電話番号と誤認されリンクが作成されたり、ハイフンと数値で表記された製品番号など、電話でないものが認識されリンクが作成されるなどは望ましくない挙動はいくつかあります。また、PC向けブラウザーには今のところ電話番号に自動リンク挿入は向かない気がするのですが、先を見据えてか導入しているブラウザーもあります。
いずれにしても、こういった問題には対処していく必要がありますよね。そこで今回は、ブラウザーが自動で挿入する電話番号リンクを無効にする方法をご紹介いたします。
ページ全体に自動電話番号リンク対策する方法
htmlの<head>内の次の一文を設置することで、電話番号が自動で挿入される操作を無効にすることができます。
|
1 |
<meta name="format-detection" content="telephone=no"> |
これを設置した上で、もし電話番号にリンクが必要になった場合は個々に設定すれば問題ないです。
|
1 |
<a href="tel:000-000-0000">000-000-0000</a> |
PC用、スマホ用でリンクの有無を分けたい場合はこちらの記事を参考にしてみてください。
→「cssのみでレスポンシブのスマートフォンサイズの時だけ電話番号リンクを有効にする方法」をクリックして確認。
個々に対応する方法
事情があって全体への記述を使いたくない場合は個別に対応することも可能です。
事前にリンクを挿入して回避する方法
これは、リンク挿入してほしくないのみ電話番号リンクが自動挿入されてしまう文字列に最初から<a>タグを挿入して自動挿入を回避する方法です。マークアップという概念で考えると無意味にタグを挿入するのはあまりよろしくない方法になるのでしょうが、ユーザビリティーを考えるとこれはありだと思います。
|
1 |
<a class="notel">000-000-0000</a> |
|
1 2 3 |
.notel{ pointer-events: none; } |
cssのpointer-events: none;を使ってポインターイベントを無効化することでリンクがクリックされるのを回避できます。
電話番号リンクが自動挿入されるブラウザーの仕組みは様々で、自動挿入されたリンクをcssで調整できるものもあれば、できないものもあり挙動はまちまちなのですが、この方法は電話番号自動リンクが備わったおそらくすべてのブラウザーで有効です。
Edgeの電話番号リンクのみ無効にする方法
「スマホ専用ブラウザーで電話番号リンクが表示されるのはいいのだけど、主にPCで使われるブラウザーEdgeで電話番号リンクが勝手につくのはあんまりよろしくない。」とお考えの方も多いのではないでしょうか？その要望に応える方法がこちらになります。
電話番号として判別されたくない文字列にx-ms-format-detectionという属性を指定することでEdgeでの電話番号リンク自動挿入が回避できます。
|
1 |
<p x-ms-format-detection="none">000-000-0000</p> |
まとめ
今回は、ページ全般への対策と個々のリンクへの対策、２つの方法をご紹介しました。
IOS SafariやAndroid chromeなどのスマートフォン向けブラウザーやMicrosoft Edgeそしてそれ以外のブラウザー…それぞれの動作に合わせるのは面倒ですが、今回ご紹介した方法を参考にしていただればと思います。また、電話番号リンクに関しては、次のような記事もアップしておりますので是非参考にしていただければと思います。
→「cssのみでレスポンシブのスマートフォンサイズの時だけ電話番号リンクを有効にする方法」をクリックして確認。
