ホームページから問合せをもらうために必須の電話番号の表示。
主にスマートフォンのブラウザで電話番号を自動で検出し、クリック１つで発信できるようにリンクを作成する機能があります。
便利なこの機能ですが、意図していない自動検出が起こりデザインが崩れたり、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;を指定し、自動電話番号リンクを有効にしています。
レスポンシブ関連記事
-
-
【簡単レスポンシブ】PCとスマホで画像を切り替える方法【HTMLのみ】
続きを見る
-
-
知らなかった！レスポンシブサイトでjavascriptを分岐させる方法２パターン紹介
続きを見る
まとめ：自動リンクを無効にする
スマホのブラウザで起こる、電話番号への自動リンクを無効にする方法を
- ページ全体
- 特定のリンクのみ
- パソコンで見た時だけ
の３つのパターンで紹介しました。
本来は便利な電話番号への自動リンク機能ですが、製作者の意図していない自動検出が起こり、無効にしたい！という方は試してみてください。
-
-
【WEB】mailtoリンクに本文や件名、CCを入れておく方法【メールソフトの立ち上げ】
続きを見る
関連記事【web】リンクの貼り方いろいろ
関連記事CSSでリンクタグの色や下線の設定変更
- WEBやプログラミングの知識をつけたい
- でも、スクールの学費は高すぎる
という方には、安価で始められる「侍テラコヤ」がオススメ！
-
-
「侍テラコヤ」は安くで始めるプログラミングスクール【リスキリングにおすすめ】評判や特徴をレビュー
続きを見る
ポチップ
![【箇条書き】リストタグ[ ul・ol・li ]の使い方、マーカーの消し方・注意点も](https://hyakuyattsu.com/wp/wp-content/uploads/2019/03/css-list-ten-title.jpg)