電話番号への自動リンクを無効にする方法【iPhone・edge】

会社のコーポレートサイトやお店のホームページから問合せをもらうために必須の電話番号ですが、主にスマートフォンでこの電話番号を自動で検出し、クリック１つで発信できるようにリンクを作成する機能があります。

本来便利なこの機能ですが、意図していない自動検出が起こりデザインが崩れたり、FAX番号まで発信できるようになったりと問題が起こる場合があります。

そんな時の電話番号への自動リンクを無効にする方法をご紹介します。

ページ全体に電話番号への自動リンクを無効にする方法

ページの全体で電話番号の自動リンクを無効化する方法は、htmlのhead内に次の一文を設置することで無効にすることができます。

 html
<meta name="format-detection" content="telephone=no">

あくまでも自動で電話番号リンクを生成しないと指示を出しているので、意図的にaタグに「tel:」を記述すれば発信リンクの作成は可能です。

電話発信リンクの作成についてはこちらの「リンクの貼り方いろいろ」記事をご覧ください。

特定の電話番号のみに自動リンクを無効にする方法

電話番号の方は自動でリンク生成してくれて良いけど、FAX番号の方はリンクにしたくない。などの場合のときはリンク毎に個別に指定していきましょう。

自動リンクを生成して欲しくないaタグに任意のCSSを適応させます。
「tel-link-none」というcssをクラス属性で追加します。

 html
<a class="tel-link-none">000-000-0000</a>

その「tel-link-none」にcssでpointer-events: none;を指定することで自動生成リンクを無効に設定します。

 css
.tel-link-none {
  pointer-events: none;
}

自動リンクをスマホの時は有効、PCのみ無効にする方法

大抵場合はスマホでしか電話番号の自動リンク機能は働きませんが、パソコンでの閲覧時にも電話番号の自動リンクが有効になっている場合は、パソコンでの閲覧時にのみCSSを適応させ、上で紹介したpointer-events: none;を指定します。

 css
a[href*="tel:"] {
  pointer-events: none;
}
@media only screen and (max-width: 1024px) {
  a[href*="tel:"] {
    pointer-events: initial;
  }
}

1024px以下のデバイス（スマホ）ではpointer-events: initial;を指定し、自動電話番号リンクを有効にしています。

まとめ

いかがでしたでしょうか。

電話番号への自動リンクを無効にする方法をいくつかご紹介しました。

本来便利な自動電話番号リンク機能ですが、自分の意図していない自動検出が起こり元の状態に戻したい。という方は試してみてください。

本格的にhtmlやCSSを学びたいなら、自宅で現役エンジニアから学べるテックアカデミーがオススメ！まずは無料体験！私も現在phpを勉強中です。

テックアカデミー公式ホームページへ

※無料体験だけならいっさいお金はかかりません。

最後までご覧いただきありがとうございました。