電話番号リンクをスマホのみ有効にする方法
今回は、3種類の方法をご紹介します。
- CSSを使って電話番号リンクをスマホのみ有効にする方法
- jQueryを使って電話番号リンクをスマホのみ有効にする方法
- PHPを使って電話番号リンクをスマホのみ有効にする方法
個別に見ていきましょう。
電話番号リンクをスマホのみ有効にする方法【CSS編】
CSSだけで電話番号リンクをスマホのみで有効にする方法です。
CSSだけで対応できるので、一番簡単に実装できる方法となります。
例えば、以下の様な電話番号リンクがあったとします。
<a href="tel:00000000000">000-0000-0000</a>
以下の定義をCSSファイルに追記してやります。
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
参考サイト:電話番号リンクをスマホで有効・PCで無効にする方法
デバイスの横幅で電話リンクの有効無効をコントロールする方法です。
デバイスの横幅が751px以内の場合(=スマホ)、電話番号リンクが有効になります。
デバイスの横幅が751px以上の場合(=タブレット+PC)、電話番号リンクは無効になります。
min-width: 751px
電話番号リンクをスマホのみ有効にする方法【jQuery編】
jQueryを使って、電話番号リンクをスマホのみ有効にする方法です。
こちらの方法は、電話番号リンクの記述の仕方が通常と異なります。
電話番号リンクを以下の様に記述します。
<span class="tel-link">00-0000-0000</span>
aタグで電話番号リンクを設定するのでは無く、spanタグで電話番号を囲みます。
電話番号リンクは設定しません。
以下のjQueryを設置してやります。
<script>
$(function() {
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){
$('.tel-link').each(function(){
var str = $(this).text();
$(this).html($('<a>').attr('href', 'tel:' + str.replace(/-/g, '')).append(str + '</a>'));
});
}
});
</script>
参考サイト:スマホで見ている時だけ電話番号にリンクが付くjQueryコード
上記のjQueryで、動的に電話番号リンクを設定することができます。
スマホのみ電話番号リンクを有効化できます。
電話番号リンクをスマホのみ有効にする方法【PHP編】
PHPを使って、スマホのみ円和番号リンクを有効にする方法です。
こちらの方法は、WordPressでサイトを構築しているものとして解説をしていきます。
以下の様な電話番号リンクがあったとします。
<a href="tel:00000000000">000-0000-0000</a>
以下のコードをfunctions.phpに追記してやります。
function my_wp_head_tel_link(){
if(!wp_is_mobile()): ?>
<style type="text/css">
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
</style>
<?php endif;
}
add_action('wp_head', 'my_wp_head_tel_link');
参考サイト:電話番号リンクをスマホで有効・PCで無効にする方法
やっていることは、前述した【CSS編】と同じです。
CSSで電話番号リンクを有効化しています。
CSS編では、デバイスの横幅を基準にして、スマホのみ電話番号リンクを有効にしました。
今回の方法は、WordPressの機能を使って、デバイスがスマホの場合のみ電話番号リンクを有効にする方法となります。
この方法は1点だけ問題があります。
スマホからのアクセスかどうかの判断は【wp_is_mobile()】で行っています。
この【wp_is_mobile()】は、タブレットもスマホとして判断してしまうのです。
そのため、タブレットでアクセスしたときも電話番号リンクは有効になってしまいます。
まとめ
電話番号リンク(tel:)をスマホのみ有効にする3つの方法をご紹介しました。
- CSSを使って電話番号リンクをスマホのみ有効にする方法
- jQueryを使って電話番号リンクをスマホのみ有効にする方法
- PHPを使って電話番号リンクをスマホのみ有効にする方法
レスポンシブサイトを制作していると電話番号リンクは避けては通れません。
今回ご紹介した方法で、電話番号リンクをスマホのみ有効にしてください。
今回の記事が、あなたのお役に立てば幸いです。
コメントを残す