スマホの時、「今すぐ電話する」ボタンを表示、タップで電話する機能を追加する

毎月一度行っているWordPressもくもく会ではWordPressやWebサイト制作に関する四方山話をするのが楽しいです。先週行ったもくもく会では「スマホ表示の時に今すぐ電話するボタンが表示できるといいのだけどなぁ」という要望を聞きました。
確かに、スマホの時はそういうボタンを表示したいサイトもあると思います。ちょっと前に作ったお問合せボタンと同じようにtoastrでできるのでは?と思ったのでタップで電話する機能を追加してみました。

タップしたら電話するボタンを表示する

ちょっと前に書いたblog

たとえばこのブログを読んでいて、自分でやるのは不安なので有償で頼んでみたいと思うお客さん(がいるといいんですが!)がいたときに、すぐに聞けるようにお問い合わせのボタンが常に表示

Webページの右下に「お問い合わせ」というボタンを縦表示させる方法 というブログ記事でページの右下に「お問い合わせ」という縦書きのボタンを追加しました。 実際に追加してから見て

この2つの記事ではボタンをクリックするとお問合せページに飛ばす、ということをしました。ここで使っているjsのライブラリ toastr を使えば 電話するボタン も簡単に表示できそうなのでちょっと試してみました。

toastrを使うには、

toastrライブラリを使って「お問い合わせ」というボタンを表示する

この部分だけを読んで、toastrライブラリを準備してください。

タップしたら電話するボタンを表示するには、

このソースを toastr_tel.js という名前で、使っている 子テーマのjs というフォルダに(無ければフォルダを作る)保存します。ここで、かけてほしい電話番号電話するボタンに表示したい文字を指定します。divwidth:100% としているのはボタンのどこを押しても電話をする動作をさせるためです。これをいれないと文字の部分をクリックしたときしか電話をかけてくれません。

次に子テーマの functions.php

このソースを追加します。これはtoastrライブラリのjsとCSS、先ほど作ったtoastr_tel.jsを読み込む設定です。

スマホで「今すぐ電話する」ボタンの表示とタップしたら電話するかを確かめる

これで準備ができましたので、スマホで「今すぐ電話する」ボタンの表示タップしたら電話するかを確かめてみます。

この指定をしたWebサイトをスマホで見てみると、

こんな感じに、 今すぐ電話する ボタンが表示されています。

タップすると、

すぐに電話をかけることができるようになっています。

ボタンの色を変えたり、スマートフォンの時だけ表示するようにしてみる

たまたまですが、テスト用に使ったWebサイトの色とボタンの色が同じような色でちょっと目立たないので、ボタンの色を変えてみました。

使っている子テーマの style.css

を追加しました。これで再表示すると、

こんな感じに、ボタンの色が変わってだいぶわかりやすくなりました。

あと、PCのときはこのボタンを表示したくないので、

をいれました。これでPCでブラウザの幅が広いとき

ボタンが表示されなくなりました。PCでもブラウザの幅を縮めれば、

こんな感じにボタンが表示されます。

厳しくスマートフォンかどうかを判断するにはユーザーエージェントを使って判断する方法がありますが電話番号を表示するかどうか、だけでしたらCSSで幅を判定する程度でいいかなと思います。

まとめ:なんでもtoastrでやってみました

たまたま使ったtoastrというライブラリのデザインがいい感じだったので本来はトーストを表示するためのtoastrなのですが

参照

「ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編」でブラウザにお知らせを表示するトーストの作り方(お料理みたいですが…)について書きました。 今回はblo

お問合せボタンを表示したり、今回のように「今すぐ電話する」ボタンを表示したりしてみました。

実際にはCSSとJQueryを使って自作してもたいした手間ではないような気がしてきたので、もし同じようなことがあったらtoastrのライブラリ無しで作ってみようかな~と思っています(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

コメント

  1. goodmount92 より:

    はじめまして。
    ワードプレスで仕事用のホームページを作成しているものです。

    PCではヘッダーに問い合わせ先を表示しているのですが、スマホ表示だと消えてしまうので、電話番号を表示できないかと思案していてこのページにたどり着きました。
    設置は出来たんですが、縦表示に出来なくて困ってます。
    電話をかけるボタンがtopに戻るボタンと完全に重なってしまっているので何とかしたいのですが。
    お問合せボタンを作るページでの縦表示は出来てました。
    助言を頂けると助かります。

    • 兎本美佳 兎本美佳 より:

      おはようございます、goodmount92さん。コメントいただいたページについての詳しい情報がないとちょっとわからないのですが
      戻るボタンと電話をかけるボタンが重なってしまう場合はcssを修正すれば位置をずらすことができると思います。
      また、このブログの方法は結構ややこしいので、できればウィジェットで表示できる方法を探した方がいいかもしれません。

トップへ戻る