HTML Web制作 コーディング

【HTML】スマホで自動的に設定される電話番号のリンクを消す方法【1行追加するだけ】

リンク設定してないのにスマホで見るとリンクになってる、なぜ?

これはスマホの実機で見ないと分からないのですが、iOSのSafariなどは自動で電話番号と判断した物をリンク設定します。

今回はこれを無効にする方法をご紹介します。

スマホで電話番号が自動リンクになるとは?

例えば以下のようなコードがあったとします。

<p>012-345-6789</p>

このコードはリンクの設定をしていませんが、iOSのSafariなどはこれを電話番号と判断し、自動でリンクを設定します。

自動でリンクを設定されるとテキストの色が青くなったり、タップしたら電話がかかるようになります。

なので意図しないテキストの色になったり、タップしたら勝手に電話がかかるようになってしまいます。

さらにこれは電話番号に限らず電話番号と判断されたものになるので、住所の番地なども自動リンクが設定されることもあります。

 

自動リンク設定を解除する方法

自動リンク設定を解除する方法はheadタグに以下の1行を追加するだけです。

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

これで自動リンク設定は解除されます。

WordPressの場合はheader.phpにあるheadタグに追記しましょう。

また自動ではなく、通常通りリンクを設定する事も出来ます。

<p>
  <a href="tel:012-345-6789">012-345-6789</a>
</p>

以上です。

-HTML, Web制作, コーディング