Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

スマホの時だけタップで電話が繋がるようにする簡単な方法

  • 2015年2月27日
  • CSS

スマホの時だけタップで電話が繋がるようにする簡単な方法

今回はドロップシッピングとは全く関係ない完全にネタ帳。ドロップシッピングを頑張っている同志には参考になりません。 ぼくの嫁の父がやってる会社のホームページ作成を手伝った時にあれこれ悩んだので、必要な人には役立つ情報だと思うのでアウトプットしておきます。

タップで電話が繋がるほうがユーザーにやさしい

ホームページ上に会社の電話番号を載せ、問い合わせを増やそうとする施策はどんな会社でもやっていると思います。 でもスマホの場合はせっかく電話機能があるのだからタップで繋がると優しいですよね。

タップで繋がるようにする方法

タップすると電話が繋がるようにするのは、非常に簡単です。

<a href="tel:0123-456-7890">0123-456-7890</a>

このようにHTMLを記述するだけでOKです。何もしないと電話番号が表示されるだけですが、このようにすると電話番号がリンクになります。 リンクさせる文字は必ずしも電話番号じゃなくても問題ありません。

<a href="tel:0123-456-7890">お問い合わせはコチラ!</a>

でも電話をかけることはできます。ただ見た目に番号が分からないので、電話番号でリンクするほうがいいように思います。 また、アイフォンでは「電話番号っぽい数字」の場合、サイト側で何もしなくてもかかってしまうようです。ぼくはアンドロイド端末なので詳しくはわかりませんが。 勝手な挙動は作成する側からすると邪魔なもの。そういう時はヘッダー内に次の一文を記述することで解決します。

<meta name="format-detection" content="telephone=no">

電話番号はもちろん、電話番号じゃないのに誤った認識をしてしまうこともあるようなので、アイフォンユーザーの多さを考えると記述しておいてもいいかもしれませんね。

レスポンシブに対応させる

タップで電話が繋がるようにするのは本当に簡単です。でも次に問題になるのがPCで閲覧した時。 パソコンには電話をかける機能がなく、クリックすると「このWebページは表示できません」となってしまいます。これはこれで調子悪いですよね。 できれば「PC・タブレット閲覧時には電話番号だけ、スマホでの閲覧時にはタップで繋がる」というのが理想的。

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

グーグルで調べるとJavaScriptやjQueryなどで実装する方法が多いです。 でも分からない人にとってはJavaScriptは敷居が高く、jQueryにしても無知の人の場合は調べながらじゃないと実装できませんよね。 そこでcssだけでできる簡単な方法を紹介します。ポイントはレスポンシブの大きな味方「display」です。 まずHTMLソースには次のように記述します。

<span class="tel-pc">0123-456-7890</span>
<span class="tel-mobile"><a href="tel:0123-456-7890">0123-456-7890</a></span>

cssには次のように記述します。

/* PC用 */

.tel-pc {
	スタイル
}

.tel-mobile {
	display: none;
}

/* PC用ここまで */


/* モバイル用 */

.tel-pc {
	display: none;
}

.tel-mobile {
	スタイル
}

/* モバイル用ここまで */

こうすることでPC閲覧時にはただのテキストとして電話番号が表示され、スマホでの閲覧時にはタップでかかるようにすることができます。 「スタイル」と書かれているところはご自由に。

まとめ

今回はDSとは関係ないことでした。忘れないようにメモとして残しておきたいと思います。 ちなみにDSのほうは、12月・1月に続いて選手権10位以内に入れそうな雰囲気。でも10位ギリギリラインなので、今月もあと少し頑張って入賞したいものですね。
もしもドロップシッピングで稼ぐためのブログページトップへ戻る