memorandum

備忘録

2018.01.20

スマホの時だけ、telリンクを有効にする

ホームページを制作する場合、電話番号を記載することがよくありますが、
スマホ表示の場合は電話番号をタップすることで発信させることが出来ます。

//テキストの場合
<p class="tel">012-345-6789</p>
 
//画像の場合は、alt属性に電話番号を入れておく
<p class="tel">
  <img src="tel.png" alt="012-345-6789">
</p>
if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)) {
  $(function() {
    $('.tel').each(function() {
      var str = $(this).html();
      if ($(this).children().is('img')) {
        $(this).html($('<a>').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
      } else {
        $(this).html($('<a>').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
      }
    });
  });
}

上記のように設定することで、スマホ表示では動的にtelリンクが追加されて以下のようになります。

//テキストの場合
<p class="tel">
  <a href="tel:0123456789">012-345-6789</a>
</p>
 
//画像の場合
<p class="tel">
  <a href="tel:0123456789"><img src="tel.png" alt="012-345-6789"></a>
</p>
MAIL制作・お見積りのご依頼
ご相談・お問い合わせ