シリウスカスタマイズ|iphone,スマホで電話番号を発信画面にコピー

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
初めてのHP作成の動画SEO実践編高齢者のホームページの作り方よくある質問
 

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

スマホ、iPhoneサイトからの、電話によるお問い合わせの効率を良くするためには、電話番号タップで、発信画面に移動させる方法が、かなり強力です。

 

「カスタマイズをしなくても、現状でもその機能が働くよ!」

 

っとおっしやる方も多いと思いますが、実はそこには落とし穴があるのです。そこでは正しい方法で電話番号を記述する方法を解説します。

 

 

電話番号タップで移動画像

 

 

シリウスカスタマイズ-4 番号タップで発信画面にコピーさせる方法について

[この動画は24分で見れます]

 

 

動画を見て頂いて、早速作業される方は、私がシリウスの画像制作機能で作成した、下記画像を使ってみて下さい!

 

右クリックで画像をコピー、デスクトップ等に貼り付けでOKです。

 

尚、画像貼り付けサイズは240px程度にして頂ければ、ほとんどのスマホ、iPhone端末最適表示されるはずです。また画像のセンタリングを忘れずに!!

 

電話番号タップ画像-1

 

電話番号タップ画像-2

 

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

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

 

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

 

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

 

なので、、、、

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

という仕様にする必要があります。

 

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

 

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

 

メタタグ

<meta name="format-detection" content="telephone=no">

 

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

 

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

 

JavaScript

<script>
    $(function(){
        var device = navigator.userAgent;
        if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
            $(".tel").wrap('<a href="tel:09012345678"></a>');
        }
    });
</script>

  • device = navigator.userAgent;

    端末(device)により機能を出し分けますよ!っていう意味。

  • wrap

    ワープではありません!ラップと読みます。「包む」って事です。

  • <a href="tel:09012345678"></a>

    リンクタグで「包む」って事です。

 

電話番号タップで移動画像

閲覧者(userAgent)が携帯端末(device)の場合は、リンクタグ電話番号囲むという事に、誘導(navigator)する。

 

っと和訳すると考えて下さい。結構簡単でしょ!スクリプトって!

 

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

 

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

<meta name="format-detection" content="telephone=no">
<script>
    $(function(){
        var device = navigator.userAgent;
        if((device.indexOf('iPhone') > 0 && device.indexOf('iPad') == -1) || device.indexOf('iPod') > 0 || device.indexOf('Android') > 0){
            $(".tel").wrap('<a href="tel:09012345678"></a>');
        }
    });
</script>

 

シリウスで上記タグをヘッダー内に貼り付ける場合は、トップページ、エントリーページ、カテゴリーページ、すべてのHTMLテンプレートに記述して下さい。

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

上記スクリプトの電話番号の記述は絶対にハイフン付けないで下さい。動作しなくなる可能性が高いです。

 

 

管理画面上でのHTMLの記述

 

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

 

テキストでリンク

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

 

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

 

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

 

画像でリンク

<img src="画像URL" alt="電話番号タップ画像" class="tel">

 

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

 

テキストでも、画像の場合でも、閲覧者さんが電話しやすい環境を作る事が大切です。どういう事かと言いますと、、、

 

「タップした瞬間に電話が発信されてしまう」

 

、、のではないという事を、閲覧者さんに認識してもらう必要があるのです。人間の心理で考えると、「電話をかける」っていう行為は勇気と決断が必要なものです。

 

第一段階として、タップだけでは、発信画面に電話番号がコピーされるだけって事を、閲覧者さんに解らせてあげる事が重要です。

 

電話をかけるか?止めるか?躊躇(ちゅうちょ)している訪問者さんに、選択肢を与えるのです。いきなりタップで電話発信しない事を解らせる事で、実際電話をかけるという、「行為」誘導していくという考えです。

 

なので電話番号リンクの「上か、下」に、下記のような文言を付け加えます。

 

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

 

実際にこんな感じがベストです!

(画像は240pxで設定しています。)

タップで番号コピー!

 

電話番号タップで移動画像

 

株式会社○×サービス

 

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

○県、○市、○町

 

ビジネスサイトでは、このような人間の心理的な特徴を考慮して、画像やテキストを考えていく必要があります。これが集客に大きく影響します。相手の気持ちになってサイト作成しましょう!少しの工夫で集客が10倍になる事もあるのです。

 

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

 

たくさんの人にホームページを見てもらえても、お問い合わせや、注文がなければ本当のSEO対策とは言えません。反応があるホームページ作成を意識していく例として、上記のような心理対策をお伝えしました。

シリウスカスタマイズ|iphone,スマホ-電話番号クリックで発信画面に番号コピーの関連ページ

リンク文字をへこませる
シリウスのカスタマイズでリンクテキストがへこんだように見える方法をご紹介します。カーソルを置いたときに、そのリンクテキストを下、右、に「ずらす」事で表示させます。スタイルシートにソースをコピペ、貼りつけるだけで簡単にできますので挑戦して下さい。
リンク画像を変化させる
シリウスのカスタマイズで、リンク画像の上にカーソルを置いたときに、その画像がへこんだり、画像が半透明になる方法をご紹介します。このカズタマイズをしておくと、訪問者さんが「画像がリンクである事」を認識しやすくなり、クリック率があがり、リンク先に誘導するのに効果的です。
ライトボックスの設置
世界で一番簡単!シリススにライトボックスを設置する方法!5っの手順で速攻作業。サムネイルをクリックすると別画面が開き、指定した画像が表示され、そのグループ内の画像がクリックで次々に拡大表示できるライトボックス!その設置方法を動画でわかりやすく説明します。

トップページ ソフトの概要 Hp公開の方法 SEO対策基本編 アクセス解析 特典のご案内 購入者メルマガ お問い合せ