電話リンクをスマホのみに設置する方法

更新日:2021年10月8日 /  投稿日:2020年05月28日

コピペでいける!電話リンクをスマホのみに設置する方法

スマートフォンでWEBサイトを見て問い合わせをしたい時に、問い合わせフォームのボタンや電話番号をタップする事で、問い合わせる事ができます。

電話番号をタップして電話をかけられるようにするには、aタグのhref属性に電話番号を記述していきます。

ですがこの電話リンク、パソコンでWEBサイトを見る時には電話がかけられないので、スマートフォンのみに実装できるのが望ましいかと思います。

今回は筆者がよく使う、電話リンクの設定をスマホのみに適応させる方法をご紹介いたします。

仕組みが分かれば意外と簡単かと思いますので、この記事を読まれた方の参考になれば幸いです。

電話リンクの方法

リンクをタップして電話をかけるようにするには、以下のコードのように記述していきます。

<!-- aタグのhref属性にtel:と記述して任意の番号を入力 -->
<p>電話番号:<a href="tel:00-0000-0000">00-0000-0000</a></p>

<!-- ※href属性の中の電話番号のハイフンは、有り無しどちらでも大丈夫です。 -->

国際電話の発信も可能で、日本であれば通常日本で使われる電話番号の先頭に「+81」を入力し、以下のコードのようにします。

<p>電話番号:<a href="tel:0+81-0-0000-0000">00-0000-0000</a></p>

パソコンとスマートフォンを条件分岐で分けましょう

aタグを使って電話リンクの設置は完了しました。

ですが、この状態だとパソコンで見た時でも電話リンクをクリックすることができてしまいますので、パソコンで見ている時はaタグを削除して電話リンクをしない状態にしたいのが望ましいですよね。

そこで、スマートフォンでは電話リンクをつけるために、jQueryを使ってパソコンとスマートフォンで条件式を書き、電話リンクをスマートフォンのみの設定にしていきます。

まずはHTMLを記述します

<p>電話番号:<a href="tel:00-0000-0000"><span class="tel_link">00-0000-0000</span></a></p>

次にjQueryを記述していきます

//TEL リンク  モバイル
var pc_w = $(window).width();  //デバイスの横幅を取得します
var sp_w = 760  //電話リンクを付ける基準になるデバイスの横幅を入れます(任意)

$(function(){
	if (pc_w > sp_w){  //基準の幅よりモニター幅が大きい時
		$('p a .tel_link').unwrap();
	}
});

.unwrap();は該当する要素の親要素を削除するメソッドになります。

このメソッド使いながら「基準の幅(760px)よりモニター幅が大きい時」という条件式(pc_w > sp_w)書き、760px以上のモニター幅ならaタグを削除するというコードを記述する事でパソコンではaタグは消え、スマートフォンでは電話リンクが付いている状態を作る事ができます。

後は、パソコンとスマートフォンで以下のようなコードになっていれば無事に条件分岐ができています。

<!-- パソコンでのコード -->
<p>電話番号:<span class="tel_link">00-0000-0000</span></p>

<!-- スマートフォンでのコード -->
<p>電話番号:<a href="tel:00-0000-0000"><span class="tel_link">00-0000-0000</span></a></p>

仕組みを説明していくと、.tel_linkの親要素にあたる要素がaタグですので、デバイスの幅が760px以上の時には.unwrap();メソッドによりaタグは削除されます。

また、デバイスの幅が760px以下になるので、.tel_linkの親要素にあたるaタグは、そのまま残ります。

まとめ

条件分岐を使って、電話リンクの設置方法についてご紹介していきましたが、いかがだったでしょうか?

スマートフォンでは電話リンクを設置する事で使いやすさの向上も期待できるかと思いますので、今回ご紹介したコードが参考になれば幸いです。

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら