シリウスカスタマイズ｜電話番号タップで発信画面に番号コピー

携帯端末で電話番号タップで発信画面に移動させる方法

このページの目次

OPEN

番号タップ発信動作環境と概要
動画で解説番号タップで発信画面
タップ用の画像をご利用ください
正しい電話番号の記述方法
訪問者さんが電話する確立を高くする方法
シリウスバージョン1.5以上

番号タップ発信動作環境と概要

スマホ、アイフォンなど携帯端末で電話番号や画像を表示させ、これらをタップすると電話番号発信画面に移動させる事ができます。このカスタマイズについて正しい方法を解説します。

このページの動作環境でのご注意

シリウスバージョン1.5以上は、こちらのコンテンツの記述をそのままコピペしてください。1.5にバージョンアップされていない方は、そのまま下記動画の通りに作業して下さい。

携帯端末電話番号タップの概要

スマホ、iPhoneサイトからの、電話によるお問い合わせの効率を良くするためには、電話番号タップで、発信画面に移動させる方法が、かなり強力です。「カスタマイズをしなくても、現状でもその機能が働くよ」とおっしやる方も多いと思いますが、実はこれには落とし穴があるのです。そこで正しい方法で電話番号を記述する方法を解説します。

動画で解説番号タップで発信画面

[この動画は24分です]

Please click

チャンネル登録をして頂きますとホームページ作成に役に立つ最新動画のアップロードをお知らせします。

タップ用の画像をご利用ください

動画を見て頂いて作業される方は、私がシリウスの画像制作機能で作成した、下記画像を使ってみて下さい。右クリックで画像をコピー、デスクトップ等に貼り付けでOKです。

尚、画像の大きさを100%にして大きすぎる場合は、サイズを指定して240px程度にして頂ければ、ほとんどのスマホ、iPhone端末で最適表示されるはずです。また携帯端末の場合画像のセンタリングを忘れずに設定してください。

正しい電話番号の記述方法

すべての端末で電話番号を最適表示させるには！

スマホ、iPhoneのブラウザの仕様ですが、数字を勝手に電話番号としてリンクと認識し、郵便番号などの電話番号でない数字の配列もリンクにしてしまう欠点があります。

また任意で電話番号にリンクタグ <a href="tel:09012345678"></a> を記述すると、パソコン画面でも「電話番号リンク」となり下線が入ります。この際、当然パソコン画面でこの番号をクリックすると「存在しないページ」などと表示されてしまします。このような事から次の設定が必要になります。

パソコン画面では「リンクを無効」
携帯端末では「発信画面に番号をコピー」させる

携帯端末で勝手に番号をリンクとして認識させないようにする

メタタグをヘッダー内に記述

下記メタタグをヘッダー内に記述します。このタグを記述する事で、すべての数字が電話番号として認識されないようになります。この記述が電話番号表示の第一段階の作業です。

メタタグ

スクリプトでPCサイト、端末サイトで電話番号を出し分ける

下記のスクリプトは、iPhone、iPad、Androidの場合だけ（PC以外）に、電話番号にリンクを付けるという指示です。このタグもヘッダー内に記述します。

JavaScript

device = navigator.userAgent;
端末（device）により機能を出し分けますよ！っていう意味。
wrap
ワープではありません！ラップと読みます。「包む」って事です。
<a href="tel:09012345678"></a>
リンクタグで「包む」って事です。

閲覧者（userAgent）が携帯端末（device）の場合は、リンクタグで電話番号を囲むという事に、誘導（navigator）すると和訳すると考えて下さい。

上記2っのタグをまとめる

下記を全部コピーして、ヘッダーの閉じタグの前に貼り付けてください。

コピペは、トップページ、エントリーページ、カテゴリーページ、すべてのHTMLテンプレートで実施。

上記をコピーする場合は、番号をよく確かめて確実にご自身の電話番号に書き換えて記述して下さい。

上記スクリプトの電話番号の記述はハイフンを付けないで下さい。誤動作の原因になります。

作成画面上でのHTMLの記述

上記の作業が完了しましたら、次はブラウザで電話番号を表示させるためにHTMLを記述します。テキスト（電話番号）と画像で表示させる2っの方法を解説します。

テキストクリックでリンクさせる

<span class="tel">お電話はこちら！</span>

<span class="tel">090-1234-5678</span>

テキストがリンクになり下線が付きますので直接電話番号を記述しても、誘導する文言でも良いと思います。テキストの場合リンクテキストなので、こちらの記述はハイフンを付けて下さい。その方が電話番号として認識されやすいです。

画像クリックでリンクさせる

訪問者さんが電話する確立を高くする方法

電話をかける側の心理を考慮する

テキストでも、画像の場合でも、閲覧者さんが電話しやすい環境を作る事が大切です。どういう事かと言いますとタップした瞬間に電話が発信されてしまうのではないという事を、閲覧者さんに認識してもらう必要があるのです。

人間の心理で考えると、「電話をかける」という行為は勇気と決断が必要なものです。

第一段階として、タップする事で発信画面に電話番号がコピーされるだけという事を、閲覧者さんに認識させる事が重要です。電話をかけるか？止めるのか？躊躇している訪問者さんに選択肢を与えるという事です。

タップしてすぐに電話発信しない事を解って頂く事で、実際電話をかけるという、「行為」に誘導するという考え方です。なので電話リンクの上に、下記のような文言を付け加えます。

電話発信画像の周りの文章

電話番号番号タップすると発信画面に電話番号をコピーできます。
番号タップで発信画面に移動します。
タップで番号コピー。
タップで移動。
画像タップで番号コピー

発信画面に誘導する例

タップで携帯に番号コピー！

株式会社○×サービス

地域性のあるサイトは地域名の羅列

○県、○市、○町

ビジネスサイトではこのような人間の心理的な行動を考慮して画像やテキストを配置する必要があります。これが集客に大きく影響します。閲覧者の気持ちになってサイト作成してください。

SEO対策とは、ホームページを上位表示させ、ホームページへの訪問者さんを増やすという事です。でも最終的に本当のSEO対策とは集客数、すなわちどれだけ売り上げを伸ばすかという対策であるという事を認識して下さい。

閲覧者数が多くても、お問い合わせや、注文がなければ本当のSEO対策とは言えません。反応があるホームページ作成するコツとして、上記のような閲覧者さんの心理的な行動パターンを考えていく事がは重要だという事です。

シリウスバージョン1.5以上

CSS、テンプレートヘッダー、HTML（サイト作成画面）の記述

シリウスバージョン1.5以上で電話番号タップの機能使う原理としては、PCと携帯端末のブラウザの画面の大きさの違いを利用する記述で対応します。下記の方法では携帯端末で画面の横幅が768px以上あるはずもないと言う前提です。

画面の横幅が768px以下

携帯端末と判断して処理
電話番号リンクとして出力させる。

画面の横幅が768px超え

PC端末と判断して処理
電話番号リンクとして出力させない。

ヘッダー内とCSSで次のソースを追加します。HTMLはサイト作成画面の記述で、テキストまたは画像でブラウザに表示させます。ヘッダー内とCSSは下記画像のボタンで開きます。

ヘッダー内

ヘッダー内の命令ですが、まず大前提として電話番号はリンクにしないという約束の記述。後のCSSの記述で768px以下はリンクにすると言う命令を出します。<head>～</head>の範囲であれば、場所はどちらでも構いません。

CSS

/*
==================================================
電話番号リンク発信
==================================================
*/
@media screen and (min-width: 768px) {
a[href="tel:"] {
pointer-events: none;
}
}

@media screen [ブラウザ] が
min-width: 768px [768より小さいのであれば]
href="tel:" [リンクで表示させる]

CSS内でしたら記述場所は問いませんが、「電話番号に関する記述」であるということが今後の変更の作業でも分かるように下記のように見出しを付けておくと便利です。

※ /*～/*はCSSの記述として認識されません。

HTML

---画像---

<p class="txt-img" style="text-align:center"><a href="tel:1234567890"><img src="<% pageDepth %>img/画像" style="width:280px;" alt=""></a></p>

---テキスト---

<p class="txt-img" style="text-align:center"><a href="tel:1234567890">[発信画面に移動]</a></p>

サイト作成画面にコピペで貼り付けてください。電話番号はハイフンをつけずに数字のみを記述してください。くれぐれも電話番号の数字の記述は何度も見直してください。

ブラウザでリンクの下線を消すためのCSS記述

確実にカスタマイズを機能させるために、上記までの作業が完了しましたら一旦アップロードしてください。アップロードの後で携帯端末で電話番号をタップして、正常に発信画面に移動できるかを先にご確認ください。

再度電話番号に間違いがないか確認します。携帯端末で正常に動作したらパソコンのブラウザを確認します。お気付きかとは思いますが、パソコンのブラウザで電話番号を確認するとリンクであるため、電話番号の下に [下線] が表示されているはずです。（下記参照）次の作業ではスタイルシートの記述で、このリンク下線を消す操作をします。

123-456-7890