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

スマートフォン等のモバイル端末でWEBサイトを見て問い合わせをしたい時に、電話番号をタップすると、電話がかかるようにしていると、直感的な操作が出来るので、便利にですよね。

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

ですが、レスポンシブデザイン設計で気を付けないといけないのは、パソコンには電話機能はついていないので、デスクトップやノートPCで表示させる時には、電話番号をリンクがかからないようするのが望ましいです。

今回は電話リンクの設定をスマホのみに適応させる方法をご紹介いたします！

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

関連記事：【HTML】ファイルをダウンロードさせるリンクの設置方法

電話リンクの方法

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

<!-- 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タグは、そのまま残ります。

まとめ

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

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