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

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

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

この記事の特徴

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

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

集客・収益UPできる「アメブロのリンク活用法10選」の中で紹介している手法の１つですね。

【アメブロのリンクの貼り方】収益UPする10の活用方法と落とし穴
この記事ではアメブロのリンクやURLの貼り方・収益UPできる活用方法・逆効果なNG使用法・リンクを貼れない時の対処法を解説します。ホームページに記事同士をつなぐ内部リンクを貼り付け、売り上げに直結する申し込みページなどへのリンクを埋め込みするのは重要な手法です。早めに確認しておきましょう！
nk-media.org

　　

アメブロに下記のような「電話番号リンク」を表示しておくと、読者がスマホで番号をタップするだけで電話ができますよね。

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

電話受付しているブログでは必ず導入しましょう。

くますけ
くますけ

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

あめっくま
あめっくま

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

 

この記事を書いた人
  • アメブロで毎月収益7桁を達成
  • アメブロ集客・売上UPの指導多数
  • アメブロで資産記事を作り安定した集客を実現

 

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

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

 

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

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

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

　　

下記の4STEPで完了です。

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

　　

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

あめっくま
あめっくま

図解で分かりやすく解説しますね。

　　　　

　　

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

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

お電話はこちら

手順①

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

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

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

PCで見る読者は、クリックしても電話をかけられません。番号を表示しておくと、スマホ手入力で℡できるのが理由です。

手順②

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

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

手順③

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

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

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

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

手順④

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

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

これで完成です。

　

なお記事プレビューではリンクをクリックできません。投稿後に実際にクリックして確認しましょう。

特にスマホでタップして、下記のように電話が起動するかのチェックを忘れずに！

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

　　

くますけ
くますけ

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

　　

　　

クリックしやすい電話番号リンクもおすすめ

テキストの電話番号リンクも悪くはないですが、記事冒頭のように電話番号ボタンになっているとさらに押しやすいですよね。

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

<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:電話番号」に書き換えて下さい。

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

　　

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

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

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

素材数No1！アメブロ用の申し込みボタンをコピペで簡単作成
この記事ではアメブロで使えるボタンリンクの素材を紹介します。コピペで簡単に設置できます。HTML・CSSなどのカスタマイズ知識は不要！かわいいボタン・おしゃれなボタン・電話ボタン・お問い合わせボタンなど、あなたのアメブロ記事でもすぐ作成できますよ。
nk-media.org

　　

　　

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

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

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

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

　　

貼り付ける場所は、「記事下定型文」「サイドバー」「メッセージボード」「サービス紹介ページ」など様々。

特に記事下はスマホで読む読者も見れるので、優先順位が高いです。

あめっくま
あめっくま

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