飲食店や美容室などのWebサイトでは、ヘッダーや目に付く位置に電話番号や問い合わせボタンを表示し、タップするだけで問い合わせができるようにするとお客様の利便性が格段にUPします。わかりやすく簡単に電話発信ができると、直接集客にも効果が期待できます。

そこで今回はスマートフォンでの表示の際に問い合わせのボタンをタップすると、そのまま電話がかけられる方法を解説いたします。

表示する方法

スマホサイトでタップすることで電話をかけるようにする方法は本当に簡単できます。
下記を追加ください。

phpに設定する内容

header.phpやindex.phpの表示したい場所に下記を追加ください。
（電話番号はお好みの番号に変更ください。）
「電話でのお問い合わせはこちら」の部分を電話番号に変えると電話番号の表示にすることができます。

<?php if ( wp_is_mobile() ) : ?>
<a class="tel" href="tel:00011112222">電話でのお問い合わせはこちら</a>
<?php else: ?>
<?php endif; ?>

弊社テーマのLAWやSWEETYなどではheader.phpがPCとスマホで異なりますのでご注意ください。

CSSに設定する内容

カスタムCSSがあるものは、テーマオプション内のカスタムCSS、それ以外はstyle.cssの末尾に下記を追加ください。

a.tel{
  width:90%;
  margin: 20px auto;
  display: block;
  background: #003c7a;
  box-shadow: 0px 7px #282c45;
  padding: 5px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  border-radius: 5px;
}

これを追加するだけで、このように表示されます。（表示サイトはLAWになります。）

PC表示（お問い合わせボタンは表示されません）
css3btn4

スマホ表示（ヘッダーの下に問い合わせボタンを表示）
css3btn5

このようにサイトに合わせて色やデザインを設定いただければと思います。

ボタンデザイン

最後にCSS3で簡単にボタンを作成できるサイトを紹介いたします。

CSS3 Button Generator

http://css3button.net/
css3btn
フォームボタンのジェネレーターです。
設定したCSSコードがその場で画面右側に反映されます。
SHOWCASEをみると様々なパターンが用意されていますので、
お好みの形を選べると思います。

CSS Button Generator

http://www.bestcssbuttongenerator.com/
css3btn2
左側の画面の一覧で選択したボタンをベースに右側のスライダー等でボタンのデザインを調整することができます。良いというデザインが決まりましたら[Get CSS]を押しますとクリップボードにコピーされますのでそれを利用できます。

いかがでしょう。スマホ用の電話ボタンは簡単に設定できますが、その効果は大きいと思います。
ぜひご活用くださいませ。