【公開中】アメブロ開始4ヶ月・わずか20記事でも毎月5万PVで安定する「資産記事」手法はこちら ⇒
リンクの活用法

【簡単】ブログやアメブロに電話番号リンクを貼り付ける方法

アメブロに電話番号リンクを貼り付ける方法・活用法

この記事の特徴

重要度3.0
難易度2.0
備考電話受付・問い合わせをしている人は、電話番号リンクを必ず導入しておきましょう。

この記事では、ブログやアメブロに電話番号リンクを貼り付ける方法を紹介します。

「電話番号リンク」を設置すると、読者がスマホでタップするだけで電話ができますよね。

  

収益UPできるアメブロのリンク活用法」の中で紹介している手法の1つです。

  

下記にタップで電話できるデモを用意しました。実際にどんな感じになるのか確認しましょう!(注:電話番号自体はデモです)

   

簡単に「電話をかける」ことが可能ですよね。

画面上に表示されている電話番号を、ブラウザを閉じて・番号を入力して・掛けるのはスマホでは手間がかかります

申し込みや問い合わせ用に電話受付しているブログでは、必ず導入しましょう。

  

くますけ
くますけ

タップで電話できるのは簡単でいいね。

あめっくま
あめっくま

読者に手間を取らせない配慮をしておきたいよね。

 

この記事を書いた人

 

アメブロたった20記事で5万PVの手法

アメブロで資産記事を作る方法はこちら ⇒

ついに登場!アメトピ攻略法

アメトピ採用率UPのテクニックはこちら ⇒

 

ブログやアメブロでの電話番号リンクの貼り方

リンクを貼る時に、URLの前に「tel:」をつけると電話番号リンクになります。

メールリンクとよく似た仕組みですね。

  

電話番号リンクは、下記の4STEPで完了です。

電話番号リンクの貼り方の手順
  • STEP1
    電話番号リンク用のテキストを書く
  • STEP2
    リンクマークをクリック
  • STEP3
    URLに「tel:電話番号」を入力
  • STEP4
    挿入ボタンをクリック

  

アメブロでのリンクの貼り方を、少し変えるだけなので簡単ですね。

あめっくま
あめっくま

実際のやり方を解説しますね。

    

  

テキストでのメールリンクの載せ方

PCで下記のようなテキストの電話番号リンクを、アメブロに貼ってみましょう。

お電話はこちら

   

手順①

まずは記事作成エディタ上に、下記のような電話番号リンク用のテキストを用意します。

アメブロに電話番号リンクを設置する手順①テキストを記入

   

テキストには電話番号自体を書いておくのがおすすめです。

PCで見る読者は、クリックしても電話をかけられないことが多いですよね。

番号を表示しておくと、PC画面を見ながら・スマホに番号を手入力できるのが理由です。

  

手順②

電話番号リンクにするテキストを選択した状態で、「リンクマーク」をクリックします。

アメブロに電話番号リンクを設置する手順②リンクマークをクリック

  

手順③

リンクのボックスが表示されたら、URL欄に「tel:」に続けて「電話番号」を入力します。

アメブロに電話番号リンクを設置する手順③URLに「tel:電話番号」を入力

「リンクを挿入する」をクリックしましょう。(テキストの変更も可)

  

【補足】
URL欄の電話番号は、「ハイフンあり・なし」どちらでもOK。
国際電話番号を載せたい場合は、最初の「0」を「+81」に変えて下さい。

  

手順④

すると下記のようにテキストの電話番号リンクになっています。

アメブロに電話番号リンクを設置する手順④完成

これで完成!

 

なおエディタ上やプレビューではリンクをクリックできません。投稿後に実際にクリックして確認しましょう

スマホでタップして、下記のように電話が起動すれば成功です!

アメブロに電話番号リンクを設置する手順⑤確認する

  

くますけ
くますけ

簡単に電話番号リンクを貼り付けできるんだね。

あめっくま
あめっくま

でもテキストではなく、電話番号ボタンの方がおすすめだよ。

  

  

下線があるとクリックされやすい

リンクにアンダーラインを引くかどうかは、本来はお好みですよね。

ただしアメブロではリンクに下線があると、クリック率が上がりやすいです。

  

理由はアプリで見る場合に、ハッキリとリンクだと分かるため。

アメブロの記事をPCで見ると、下記のように色が濃いためリンクと分かりやすいです。

アメブロのリンクのアンダーラインはPCでは有無どちらでもOK

  

アプリで記事を見ると、色がうすく下線がないとリンクだと分からない読者が出やすいですね。

アメブロのリンクのアンダーラインはアプリではあった方がいい

    

アプリで記事を見る場合は、そのままではリンクに下線が引かれません。

電話番号リンクの場合も、スマホアプリでもリンクに下線を表示する方法を使いましょう!

  

あめっくま
あめっくま

スマホアプリで記事を見て、リンクに下線があるか確認して下さいね。

  

  

タップしやすい電話番号リンクがおすすめ

タップしやすい電話番号ボタンにすると目立つので、読者からのクリック率もUPしやすいですよね。

下記のコードをコピペすると、すぐに記事に貼り付けできます。

<div class="l-text-center" style="text-align: center;"><a href="tel:00-0000-0000" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #4169e1; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); line-height: 1.5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1.1em 0.7em 2.4em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 10px); left: 12px; width: 20px;" src="https://nk-media.org/wp-content/uploads/2020/09/phone-white-small.png" alt="">お電話はこちら<br>00-0000-0000</span><img src="https://nk-media.org/wp-content/uploads/2021/02/button62-1.png" style="display: none;" width="250" height="65" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="tel:00-0000-0000" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #87cefa; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); line-height: 1.5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1.1em 0.7em 2.4em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 10px); left: 12px; width: 20px;" src="https://nk-media.org/wp-content/uploads/2020/09/phone-white-small.png" alt="">お電話はこちら<br>00-0000-0000</span><img src="https://nk-media.org/wp-content/uploads/2021/02/button62-2.png" style="display: none;" width="250" height="65" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="tel:00-0000-0000" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #59a136; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); line-height: 1.5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1.1em 0.7em 2.4em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 10px); left: 12px; width: 20px;" src="https://nk-media.org/wp-content/uploads/2020/09/phone-white-small.png" alt="">お電話はこちら<br>00-0000-0000</span><img src="https://nk-media.org/wp-content/uploads/2021/02/button62-3.png" style="display: none;" width="250" height="65" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="tel:00-0000-0000" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #d9333f; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); line-height: 1.5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1.1em 0.7em 2.4em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 10px); left: 12px; width: 20px;" src="https://nk-media.org/wp-content/uploads/2020/09/phone-white-small.png" alt="">お電話はこちら<br>00-0000-0000</span><img src="https://nk-media.org/wp-content/uploads/2021/02/button62-4.png" style="display: none;" width="250" height="65" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="tel:00-0000-0000" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #eb6ea5; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); line-height: 1.5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1.1em 0.7em 2.4em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 10px); left: 12px; width: 20px;" src="https://nk-media.org/wp-content/uploads/2020/09/phone-white-small.png" alt="">お電話はこちら<br>00-0000-0000</span><img src="https://nk-media.org/wp-content/uploads/2021/02/button62-5.png" style="display: none;" width="250" height="65" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="tel:00-0000-0000" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #fca60d; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); line-height: 1.5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1.1em 0.7em 2.4em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 10px); left: 12px; width: 20px;" src="https://nk-media.org/wp-content/uploads/2020/09/phone-white-small.png" alt="">お電話はこちら<br>00-0000-0000</span><img src="https://nk-media.org/wp-content/uploads/2021/02/button62-6.png" style="display: none;" width="250" height="65" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="tel:00-0000-0000" rel="noopener noreferrer" target="_blank" style="position: relative; display: inline-block; background: #8b4513; border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,.5); line-height: 1.5; font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.7em 1.1em 0.7em 2.4em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 10px); left: 12px; width: 20px;" src="https://nk-media.org/wp-content/uploads/2020/09/phone-white-small.png" alt="">お電話はこちら<br>00-0000-0000</span><img src="https://nk-media.org/wp-content/uploads/2021/02/button62-7.png" style="display: none;" width="250" height="65" alt=""></a></div>
<p>&nbsp;</p>
  • 緑の部分に電話番号
  • 赤の部分に番号を書くと記事に表示
くますけ
くますけ

文字だけより押しやすくていいね。

あめっくま
あめっくま

電話番号リンクでボタンを使っていない人は、早めに導入した方がいいよ。

  

手順①

エディタを「HTML表示」に切り替えます。

アメブロに電話番号リンクを設置する手順⑥HTML表示に切り替え

   

手順②

下記のようにコードを貼り付けて、「リンク先URL」を「tel:電話番号」に書き換えて下さい。

アメブロに電話番号リンクを設置する手順⑦コードを貼り付け

  

入力したら通常表示に戻して完成です。

下記のようにクリックしやすい電話番号リンクとなります。

  

下記の関連記事で豊富なデザインを用意しているので、参考にして下さいね。

  

あめっくま
あめっくま

クリック率がグッとあがりますよ。

  

  

電話番号リンクを簡単に貼り付ける方法

毎回の記事で、電話番号やテキストを入力するのは面倒ですよね。

1度作成した電話番号リンクなら、2回目以降はコピペで簡単に貼り付けできます。

   

そこで、下記2つの方法を紹介しますね。

  • 過去記事の電話番号リンクをコピー
  • 過去記事の複製

 

  

過去記事の電話番号リンクをコピー

過去の記事で作った電話番号リンクをコピーすることで、サクッと貼り付けできます。

下記のように過去記事のエディタ上で、以前作成した電話番号リンクを表示しましょう。

  

下記のように選択した状態で、右クリック⇒コピーをします。(CTRL+Cが楽チン)

 

続いて新しく作成する記事のエディタ上で、貼り付けたい場所で「右クリック⇒貼り付け」をします。(CTRL+Vが楽チン)

  

すると、下記のように電話番号リンクを貼り付けできます。

リンクをコピペで簡単に作成できました。

  

電話番号ボタンの場合も同じ。

過去記事のエディタ上で、以前作成した電話番号ボタンを表示します。

   

下記のように、前後の行を含めて選択すると確実です。右クリック⇒コピーをします。(CTRL+Cが楽チン)

  

続いて新しく作成する記事のエディタ上で、貼り付けたい場所で「右クリック⇒貼り付け」をします。(CTRL+Vが楽チン)

  

すると、下記のように電話番号ボタンを貼り付けできます。

  

過去に作ったリンクを活用すれば、サクッと作れますね。

 

あめっくま
あめっくま

過去記事のエディタを開きながら作成すると簡単です。

  

  

記事の複製機能を使う

電話番号リンクを含めて、記事をまるごと複製する機能です。

過去に作った記事を複製して、新記事で使う部分だけを残すということですね。

  

イメージは下記のとおり。

アメブロのスマホアプリで記事の複製でURLを簡単に貼り付けできる

例えば過去記事の記事下定型文に「電話番号リンク」や「囲み枠」「ボタン」などで作った部分を、再度作るのは面倒ですよね。

複製機能を使い、過去記事のいらない部分を新しい内容に書き換えればOK!

まとまった部分を新しい記事でも使う時に、便利な機能ですね。

  

アメブロの記事複製の仕方と注意点は、下記の記事で解説しています。

  

くますけ
くますけ

一度作った定型文は、複製機能でコピペしていけばいいんだね。

あめっくま
あめっくま

記事を書く時に複製して、必要ない部分を新しく書き換えると楽だよ。

  

    

アメブロに電話番号リンクを貼り付けよう

電話番号リンク自体は簡単に貼り付けできます。

テキストではなく、電話番号ボタンにしておくと読者もタップしやすいのでおすすめです。

アメブロ向けのメールリンクと合わせて、設置を検討したいですね。

 

「記事下定型文」「サイドバー」「メッセージボード」「提供メニュー紹介ページ」など、クリック率の高い場所に設置しておきましょう!

     

あめっくま
あめっくま

電話受付をしているビジネスなら、ぜひ導入して下さいね!