wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

   

こんにちは、管理人@SS_mshpです。

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグインを紹介します。

飲食店で料理の相談をしたり、スクールやコンサル系で詳しく教えてもらったりと、メールやlineを打つよりも、『電話したほうが早い』というケースは多くあります。さっそく実際に使ってみましょう。

■Really Simple Click To Callの設定方法


まずはプラグインの新規追加で検索フォームに『Really Simple Click To Call』といれます。この、スマホにボタンがついたような画像がでてくるので、インストール&有効化。有効化すると、メニューの設定部分に、このプラグインの欄が出てきます。


設定の画面はこんな感じ。『Enable Click to Call』にチェックをつけると、電話するボタンが表示されます。『Call Message』にはボタンに表示する文言を書き、『Call Number』で番号を指定。あとは色を決めれば完了と、非常にシンプルです。
CSSでも作れるんですが、下部fixしたり、z-indexで上に重ねたり、いろいろ大変です(笑)

■Really Simple Click To Callの、電話するボタンの表示のされ方

■pc版では表示されない


このサイトにつけてみたところ、PCビューでは表示されませんでした。というのも、メディアクエリで・・
@media (min-width: 737px) {
#click_to_call_bar {display: none;}
}
のように、737px以上になるとdisplay: none;になるように指定されているからです

■スマートフォンでアクセスすると、下部に電話するボタンが現れる


ユーザーエージェント判別ではなくメディアクエリ切り替えですが、スマートフォンでアクセスすると、このように下部に電話するボタンがでます。片手操作時に、親指でとどくギリギリ位置かなといった印象(管理人は片手スマホ操作ができません)。

■細かく調整したいときは、プラグインのCSSをエディットしよう


ワードプレスのプラグイン→プラグイン編集→右上の編集したいプラグイン選択で『Really Simple Click To Call』を選ぶ→CSSで、レイアウトなどを変更できます。文字をさらに大きくしたり、パディング多めに、などというときは使えそうです。

■あとがき・まとめ

通常のHTMLサイトに、電話するボタンをつけるとなると、細かいCSSの設定が必要になって大変ですが、ワードプレスなら『Really Simple Click To Call』を使うと簡単でした。CSSエディットをしなくても、簡単な設定ですぐボタンを実装できるので、かなり便利です。



【カテゴリ】 - webサイト制作 【タグ】 - ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

CSSの『Expected RBRACE 』エラーって何なの?(ワードプレス4.9で判明)

今回は、ワードプレスを新バージョンにしたら判明した、変なCSSエラーがでていた件についてお話します。 エラーがわかる便利な機能がついてるんで、今まで(致命的では …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタイルシート)を扱います。 使うテクは『RGBAカラー&グラデーション』画像なしグラデだと …

データベース圧迫するワードプレス リビジョンを、安定稼動のため削除・制限する(プラグインとconfig.php)

今回は、ワードプレスの機能である『リビジョン』を制御したいと思います。 データベースなどが絡んでくるのでちょっとややこしいかもしれませんが、長く運用する上では押 …

ワードプレスCSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック

今回は、ワードプレスのサイト制作をするとき、ひっかかりそうなポイントについてです。 最近ワードプレスサイト制作のお仕事をしていたんですけど、たまに、CSSなどを …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくある『・』『■』『算用数字』といったリストマーカーだけじゃないものを実装してみます(色つき …

ワードプレスサイト・スマホ対応・SSL事例~『仙台国分町の馬刺し・馬肉料理店 馬いものきふくさま』

今回は、管理人が最近力を入れている、『ワードプレス・スマホ対応・SSL』での対応事例をご紹介いたします。 お店のマスターさまより『ぶろぐで紹介してイイよー』とお …

音声セミナー・講座・音楽視聴をサイトに実装できる、HTML5 audio要素を使いこなそう

今回は、管理人もこのサイトやお仕事受付サイトで使用している、便利なHTMLタグを紹介します(オーディオ)。 ブラウザ対応やどんなサイトに使えるかなどを、さっそく …

【wpプラグイン】SiteGuard WP Pluginってどんな風にセキュリティに強くなるの?

今回は、サイト乗っ取りとか不正ログインみたいなリスクを減らせそうなワードプレスのプラグインを使ってみます。 利用するのは『SiteGuard WP Plugin …

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

今回は、googleカレンダーとメールフォームで、予約受付ページを作ってみます(うまくいくかは微妙です)。 画像はfreeimages.comさんからお借りしま …

ワードプレステーマインストール時に、エラーで画面真っ白を復旧させた方法

今回は、管理人がメインで使ってるweb製作ツールワードプレスで、たまに発生するエラーから復旧した方法を紹介します。 ワードプレスにはちょっとしたエラーでサイト真 …