ホームページから問合せをもらうために必須の電話番号の表示。
主にスマートフォンのブラウザで電話番号を自動で検出し、クリック１つで発信できるようにリンクを作成する機能があります。
便利なこの機能ですが、意図していない自動検出が起こりデザインが崩れたり、FAX番号まで発信できるようになったりと問題が起こる場合があります。
そんな時の電話番号への自動リンクを無効にする方法をご紹介します。
関連記事【web】リンクの貼り方いろいろ
関連記事CSSでリンクタグの色や下線の設定変更
ページ全体で自動リンクを無効にする方法
ページの全体に電話番号の自動リンクを無効化する方法は、htmlの<head>～</head>内に下記の一文を記述することで無効にすることができます。
html
<meta name="format-detection" content="telephone=no">
こちらの１文は、自動で電話番号リンクを生成しないと指定するものになります。
意図的にaタグに「tel:」を記述すれば発信リンクの作成は可能です。
電話発信リンクの作成については
-
-
【web】リンクの貼り方いろいろ【初心者向け】
続きを見る
特定箇所のみ自動リンクを無効にする
続いて、ページ全体ではなく部分的に自動リンクを無効にする方法をご紹介します。
- 電話番号は自動リンク生成
- FAX番号はリンクにしたくない
などの場合に役に立ちます。
自動リンクを生成して欲しくないリンクの<a>～</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;を指定し、自動電話番号リンクを有効にしています。
まとめ：自動リンクを無効にする
スマホのブラウザで起こる、電話番号への自動リンクを無効にする方法を
- ページ全体
- 特定のリンクのみ
- パソコンで見た時だけ
の３つのパターンで紹介しました。
本来は便利な電話番号への自動リンク機能ですが、製作者の意図していない自動検出が起こり、無効にしたい！という方は試してみてください。
-
-
【WEB】mailtoリンクの活用いろいろ【初心者向け】
続きを見る
関連記事【web】リンクの貼り方いろいろ
関連記事CSSでリンクタグの色や下線の設定変更
htmlやcssなど「プログラミングを学んでみたい」という方には、無料体験が受けられるプログラミングスクールがオススメです。
無料体験があるプログラミングスクール
※無料体験だけならいっさいお金はかかりません。
![【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も](https://hyakuyattsu.com/wp/wp-content/uploads/2019/03/css-list-ten-title.jpg)
