スマホ表示のときだけ電話番号のリンクを有効にしたい
というわけで今回は、電話番号のリンクを設定する方法をご紹介します。
PCのときはリンクを無効にする方法も合わせてご紹介します。
目次
電話番号のリンクを設定する
ホームページのフッターなどでは高確率で電話番号情報を記載しますよね。
スマホなどでみたときは、タップすると直接電話できるようにするのが一般的かと思います。
ここでは、電話番号リンク設定と、スマホ表示のときだけタップすると
電話をかけれるようにする設定について説明します！
aタグを使用してリンクを設定する
電話番号のリンクを設定するにはURLリンク同様、aタグを使用します。
ただ、URLと違って一つ工夫がいます。
<p class="p-footer__tel"><a href="tel:0000000000" class="p-footer__tel-link">TEL：000-000-0000</a></p>hrefの中に「tel:」を入れてその後に電話番号を入れます（ハイフンはあっても問題無し）
これだけで電話番号をクリックすると、その番号に電話をかけることができます。
あとは、PC表示のときはクリックイベントを無効にする必要があります。
pointer-events
pointer-eventsプロパティは、要素に対するマウスのイベントを制御するためのものです。pointer-events: none;とすることで、クリックイベントを通過させることができます。
あとは画面幅に合わせてクリックイベントの可否を設定します。
CSSはこんな感じです↓
【CSS】
.p-footer__tel-link {
pointer-events: auto;
}
@media screen and (min-width: 768px) {
.p-footer__tel-link {
pointer-events: none;
}
}768px以上の場合はクリックイベントをnoneにして、767px以下の場合はautoにすることで
クリックイベントを可にしております。
まとめ
というわけで今回は電話番号のリンクを設定する方法をご説明しました！
是非ご活用ください！！
