もう迷わない！iPhone/iOSの電話番号リンクの青いスタイルを自由自在に操る方法

2024-06-30

iPhone/iOSにおける電話番号の青いスタイルを削除する方法（HTML、CSS、iOS）

ここでは、HTML、CSS、iOSを利用して、iPhone/iOSにおける電話番号の青いスタイルを削除する方法を2通りご紹介します。

方法1：metaタグを使用する

この方法は、ページ全体の電話番号に対して青いスタイルを削除する簡単な方法です。

HTML

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

上記のmetaタグを <head> タグ内に追加します。

方法2：aタグとCSSを使用する

この方法は、特定の電話番号のみ青いスタイルを削除したい場合に有効です。

<a href="tel:0123456789">012-3456-7890</a>

電話番号を a タグで囲みます。

CSS

a[href^="tel"]:hover,
a[href^="tel"]:active {
  text-decoration: none;
  color: black; /* お好みの色に変更してください */
}

上記のCSSコードをスタイルシートに追加します。このコードは、tel: で始まるhref属性を持つ a タグに対して、ホバー時とアクティブ時のテキスト装飾と文字色を無効化します。

補足

上記の方法は、iOS 15.4時点での検証結果に基づいています。iOSのバージョンによっては、動作が異なる場合があります。
方法1と方法2を併用することもできます。
どうしても青いスタイルを削除できない場合は、JavaScriptを使用する方法もあります。しかし、JavaScriptを使用する方法は、難易度が高くなります。

これらの情報を参考に、ご自身のWebサイトに合った方法で、iPhone/iOSにおける電話番号の青いスタイルを削除してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <title>電話番号の青いスタイルを削除</title>
</head>
<body>
  <p>電話番号：<a href="tel:0123456789">012-3456-7890</a></p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>電話番号の青いスタイルを削除</title>
  <style>
    a[href^="tel"]:hover,
    a[href^="tel"]:active {
      text-decoration: none;
      color: black; /* お好みの色に変更してください */
    }
  </style>
</head>
<body>
  <p>電話番号：<a href="tel:0123456789">012-3456-7890</a></p>
</body>
</html>

方法3：JavaScriptを使用する

function removeBlueStyle() {
  const links = document.querySelectorAll('a[href^="tel"]');
  for (const link of links) {
    link.style.textDecoration = 'none';
    link.style.color = 'black'; /* お好みの色に変更してください */
  }
}

window.addEventListener('DOMContentLoaded', removeBlueStyle);