iPhoneの電話番号自動リンク:下線と文字色の修正方法

iPhoneの電話番号自動リンク:下線と文字色の修正方法

iPhoneなどのiOS端末でWEBサイトを見ると、 電話番号に自動的にリンクが貼られることがあります。

同じWEBサイトでも、PCだとこういう表示なのに↓

iPhoneで見るとこんな感じになる↓

これはiOSの機能の一つです。
その電話番号をクリックすることで、そのまま電話を掛けることが可能となります。

これは便利な機能ではありますが、困るのが勝手に電話番号に下線が付いて、文字色も変わってしまうこと。

これは修正したい場合はどうすればいいのか?
今回はこの対処方法について。

下線消去と文字色の変更

たとえば、電話番号を記述したHTMLコードが以下だったとします。

<p class="tel-number">TEL : 080-0000-0000</p>

これに対してCSSで、

.tel-number {
    color:#カラー番号 !important;
    text-decoration:none !important;
    }

こう書いてもiOS端末では、文字色や下線は修正できません。
「!important」入れても無理です。

結論から言うと、iOS端末では自動的に
電話番号に対して以下のようにHTMLコードを変更してしまうからです。

<p class="tel-number">TEL : <a href="tel:08000000000">080-0000-0000</a></p>

「a」タグを自動で入れてしまいます。

なので、これを修正するCSSコードは、

.tel-number a {
    color:#カラー番号;
    text-decoration:none;
    }

となります。

まあ、分かってみれば簡単ですが、最初はワケが分からなくて悩みました。

電話番号の記述規則は?

では、iOS端末にて自動的にリンクを付与する電話番号の記述規則はどのようなものでしょうか?

実機で検証してみました。
*「iOS 11.3.1」端末機で検証
*2018年5月21日時点でのiOS最新バージョンです。

まず、電話番号と見なすパターン

<p>TEL : 080-0000-0000</p>

<p>TEL:080-0000-0000</p>

<p>TEL 080-0000-0000</p>    

<p>080-0000-0000</p>

<p>080-0000</p>

<p>08000000000</p>

<p>0800000000</p>
    
<p>080000000</p>
    
<p>08000000</p>   

<p>1234567</p>

次に、電話番号と見なされないパターン

<p>TEL080-0000-0000</p>
    
<p>TEL.080-0000-0000</p>
    
<p>TEL.08000000000</p>

<p>TEL : 0800000</p>

<p>0800000</p>

<p>123456</p> 
    
<p>12345678</p>
    
<p>123456789</p>

これ見ると、「TEL」などの文字の後ろに、
◇スペースを入れない
◇ピリオドのみ入れる
などは電話番号と見なされません。

さらに、冒頭に「080」などを入れた数字の羅列は、8~11字は電話番号と認識します。7字は認識されません。

ところが、「1234」のような単純な数字の羅列の場合は、
7字は電話番号と見なされ、それ以外は見なされないことが分かります。
・・・摩訶不思議ですな (^_^;)

Androidの場合

ちなみに、Androidの場合はどうなのか?

これはAndroid OSの各バージョンによって違うかもしれませんが、私の持ってる「Android4.1」の中古スマホの場合は、

電話番号と見なして自動リンク

<p>08000000000</p>

電話番号と見なさない

<p>080-0000-0000</p>

となりました。
これも別な意味で摩訶不思議です (-_-;*)

で、Androidの場合は、「a」タグを自動付与するなどせず、別な仕組みでリンクを貼っているようです。
下線が付いたり、文字色が変わるなどの変化はありません。

 

ken
この自動リンク機能、使用者側にとっては便利でしょうが、WEB制作者にとっては面倒くさい機能です。

 

PRリンク