こんにちは、フロントエンドの、のりこです。

昨今、PCのページをスマホで見るという機会が増えたと思います。かく言うわたしも車に乗ってから、今から行くお店の詳細を調べたり、クーポンないかな？って検索したりすることもしばしば。

スマホ対応にしなくても、スマホだったら電話番号をタップしたら電話が掛けられるようになっていると便利～！なんて、思いませんか？･･･思いませんか･･･････？？？

問い合わせや予約なんかしたいって思うときに、こういう仕掛けを入れてといてあげると、気が利いてる～って思いますよね？･･･思いますでしょ！？独りよがりじゃないことを信じて･･･

ということでカンタン貼り付け用ソースセットをご用意しました。

<p>タグの中身は画像でもOKです。

<p class="tel">***-***-****</p>

ソースを貼り付けた上、<a>タグ内の電話番号だけ書き変えてください！

myBr = 0;
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0  && navigator.userAgent.indexOf('Mobile')  > 0)) {
myBr = 1;	//スマホの場合myBr=1
}
$(function() {
if(myBr == 1){
var tel= $('.tel').html();
$(".tel").html('<a href="tel:**********">'+tel+'</a>');
}
});

↓スマホから見たら発信されると思います
（もちろん番号は架空です）

000-000-0000

ね、カンタンでしょ？（ボブ・ロス風）