コーディング Web制作 HTML

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

【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>

以上です。

 


コーディング案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

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