Web集客

ペライチでバナーをタップしたら電話がかかるようにする方法


「ペライチは誰でも早く簡単に1ページのホームページ作成をできる」と評判のWebサービス、ペライチの超マニアックな使い方をお伝えします。

ペライチを使ったことがない方は、こちらの動画をどうぞ

(ペライチ公式サイトより)

ペライチのを使えばだれでも簡単な操作でWebサイトを作ることができます。

そしてプレミアムプラン(月額1683円)に申し込むことで、HTML/CSS/JavaScript埋め込みが可能になります。ザックリ言うと「ホームページを作るためのプログラムが書けますよ」ということです。

ここで、一つの疑問が生まれました。

「いったいペライチでどこまでできるんだ!!」

 

ということで、よくキャンペーンサイトなどにある、こんなバナーをタップしたら電話がかかるようになるのかを検証しました。

 

 

>> デモサイトはこちらをクリック

 

前提の条件

・ブラウザはchromeを使用

・OSはWindows10とios

・プレミアムプラン(月額1683円)を利用していること

動作の仕様

・スマートフォンでタップをした時にのみ、電話がかかる仕様

・パソコンでの閲覧時にクリックをしても何も変化はない

*PCで閲覧時にクリックしたときの動作を制御しなくてよいのであれば、リンクの設定でtel:+電話番号を設定するだけで通話は可能です(例 tel:11234567890)

① ページを作る

通常の利用方法でページを作ります。

 

② 画像を追加した場所のIDを調べる

chromeでF12ボタンをクリック。Macだと( + Opt + I)

大量のプログラム(HTML)がでてくるので、上から順番にカーソルでドラッグして、バナーを設置したブロックが協調される行を探します。

ブロックが強調される行が見つかったらそこに書かれている

 

id=”section-×ד という記述を探してください。××の箇所には数字が入ります。以下の例ではid=”section-24“になっています

③ 管理画面に電話番号を設置

管理画面のページ情報編集⇒タグの埋め込み欄に以下のソースコード(プログラム)を記述します。


 

 

注1) #section-24’の数字24を上記の②で調べたIDの数字に置き換えてください。
注2) .attr(‘href’, ‘tel:11234567890’)のtel:以降の数字をご自身の電話番号に置き換えて下さい。
後はコピペでOK

スマートフォンで閲覧時に画像をタップしたときに電話ができたらOK

>> デモサイトはこちらをクリック

 

④ 解説

一応ソースコードを解説します。

iosのsafariなど電話っぽい数字の羅列を電話番号と勝手に認識するので、その機能を停止させます。

 

今回はjQueryというJavaScriptライブラリを使いました。この一文は「jQuery使います」という意味です。

 

この一文は閲覧している端末がiPhone、iPad、iPod、Androidの場合、section-24というIDを見つけてそこに

を追加してくださいという意味です。

⑤ 補足

バナーではなく、テキストの文字でも電話をかけられるか検証したところ、全く同じコード電話が可能でした。*IDを変更する必要があります。テキスト部分ののIDがsection-25だったので、#section-25に変更しています

参考URL:https://qiita.com/bass-inu/items/2df9f42ea8db82647837

佐賀県佐賀市出身 上級ウェブ解析士
東京のシステム開発会社でSEを経験したのち独立。
広告費をかけない売り上げアップの仕組みづくりをお手伝いしています。

Web集客の無料コンサルを実施中!!

「そろそろWebで集客したい。」
「でも何から初めて良いかわからない。」

「Facebook??メルマガ??インスタ??どれからはじめていいの??」

そんな疑問にお答えすべく無料コンサルを実施しています。

お気軽にご連絡ください。

無料相談をしてみる