スマホで表示した時だけ電話番号のリンクを表示する

こんにちは、あきさんです。
あきさんは1日のうち随分長い時間をパソコンの前で過ごします。

世の中には物知りな方がたくさんいらっしゃるようで、あきさんの疑問はだいたいがネットで解決します。

ただ、時々イラっとすることもあります。
それはとても小さいことなのですが、なんとなく、イヤなのです。

最近ではウェブサイトに掲載された電話のリンクをクリックしたとき、「PCからは電話できねーんだよ!」と叱られてしまい、ずいぶんイラついたのです(狭心症)。

あきさんはそんな失敗をしない方法を存じ上げておりますので、皆様にシェアしておこうと思います。

スポンサーリンク

ヘッダ内の記述

ヘッダ内とはウェブサイトの<head>〜</head>で囲まれた範囲です。ウェブを書き書きしている方には常識中の常識です。そこに以下の通り書き込みます。

<script type=’text/javascript’>
function smtel(telno){
if((navigator.userAgent.indexOf(‘iPhone’) > 0 ) || navigator.userAgent.indexOf(‘Android’) > 0 ){
document.write(‘<a href=”tel:’+telno+'”>’+telno+'</a>’);
}else{
document.write(telno);
}
}
</script>

これで下準備は完了です。

WordPressの場合は、Header-Insert.phpに書き込みます。

MovableTypeの場合は、Header.tmplかな、きっと(最近触ってないので自信なしw

電話番号を表示したいところへの記述

続いて、ウェブサイトへ来訪されたお客様にクリック(というかタップ)してほしい電話番号を記述します。ここでは、「03-1234-5678」という電話番号を表示させる場合の例を書いてみます。

<script type=”text/javascript”>smtel(‘03-1234-5678‘);</script>

この電話番号の数字を変えれば、お好きな電話番号にすることができます。

実際に表示させてみる

それでは実際に表示させてみましょう。

PCでご覧の方はリンクされていない普通の文字列になっていますが、あーら不思議、スマホで見るとタップできるリンクになっています。

電話番号 :

もしお友達のホームページの電話番号が、PCで見てもリンク付きだったら、このページを教えてあげてくださいね。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする