この記事の特徴
重要度 | |
難易度 | |
備考 | 電話受付・問い合わせをしている人は、電話番号リンクを必ず導入しておきましょう。 |
この記事では、アメブロに電話番号リンクを貼り付ける方法を紹介します。
集客・収益UPできる「アメブロのリンク活用法10選」の中で紹介している手法の1つですね。
アメブロに下記のような「電話番号リンク」を表示しておくと、読者がスマホで番号をタップするだけで電話ができますよね。
画面上に表示されている電話番号を、ブラウザを閉じて番号を入力して掛けるのはスマホでは手間がかかります。
電話受付しているブログでは必ず導入しましょう。

クリックで電話できるのは簡単でいいね

読者に手間を取らせない配慮をしておきたいよね。
アメブロでの電話番号リンクの貼り方
リンクを貼る時に、URLの前に「tel:」をつけると電話番号リンクになります。
アメブロのメールリンクとよく似た仕組みですね。
下記の4STEPで完了です。
- STEP1電話番号リンク用のテキストを書く
- STEP2リンクマークをクリック
- STEP3URLに「tel:電話番号」を入力
- STEP4挿入ボタンをクリック
アメブロでのリンクの貼り方を、少し変えるだけなので簡単ですね。

図解で分かりやすく解説しますね。
テキストでのメールリンクの載せ方
下記のようなテキストの電話番号リンクを、アメブロに貼ってみましょう。
手順①
まずは記事作成エディタ上に、下記のような電話番号リンク用のテキストを用意します。

テキストには電話番号自体を書いておくのがおすすめです。
PCで見る読者は、クリックしても電話をかけられません。番号を表示しておくと、スマホ手入力で℡できるのが理由です。
手順②
電話番号リンクにするテキストを選択した状態で、「リンクマーク」をクリックします。

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

「リンクを挿入する」をクリックしましょう。(テキストの変更も可)
手順④
すると下記のようにテキストの電話番号リンクになっています。

これで完成です。
なお記事プレビューではリンクをクリックできません。投稿後に実際にクリックして確認しましょう。
特にスマホでタップして、下記のように電話が起動するかのチェックを忘れずに!


簡単に電話番号リンクを貼り付けできるんだね。
クリックしやすい電話番号リンクもおすすめ
テキストの電話番号リンクも悪くはないですが、記事冒頭のように電話番号ボタンになっているとさらに押しやすいですよね。
下記のコードをコピペすると、すぐに記事に貼り付けできます。
<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> </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> </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> </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> </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> </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> </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> </p>
- 緑の部分に電話番号
- 赤の部分に番号を書くと記事に表示

文字だけより押しやすくていいね。
手順①
エディタを「HTML表示」に切り替えます。

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

入力したら通常表示に戻して完成です。
下記のようにクリックしやすい電話番号リンクとなります。
下記の関連記事で豊富なデザインを用意しているので、参考にして下さいね。
アメブロに電話番号リンクを貼り付けよう
電話番号リンク自体は簡単に貼り付けできます。
テキストではなく、電話番号ボタンにしておくと読者もタップしやすいのでおすすめです。
アメブロ向けのメールリンクと合わせて、設置を検討したいですね。
貼り付ける場所は、「記事下定型文」「サイドバー」「メッセージボード」「サービス紹介ページ」など様々。
特に記事下はスマホで読む読者も見れるので、優先順位が高いです。

電話番号リンクを読者の目に入りやすい場所に設置しましょう。