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

アメブロでのメールリンクの貼り方と注意点まとめ

アメブロ向けメールリンクの貼り方・載せ方・注意点

この記事の特徴

重要度2.0
難易度3.0
備考メールリンクを貼って、読者からの申し込みや質問の窓口にできます。ただし重要な注意点があるので、事前に確認しましょう。

この記事では、アメブロにメールリンクを貼り付ける方法と注意点を紹介します

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

  

アメブロにメールアドレスのリンクを載せると、読者が簡単にメールで問い合わせできます。

実際に下記をクリックすると、メールソフトが起動しますよ。(アドレスはデモ用なので実在しません)

お問い合わせはこちら
ame-kuma@ameblo.com
 

アドレスが入った状態でメールが立ち上がるので便利です。

 

くますけ
くますけ

メールリンクは便利だね。

あめっくま
あめっくま

注意点もあるから、記事を最後まで読んでから導入するかを決めよう。

 

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

 

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

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

 

アメブロでのメールリンク・メアドの貼り方

リンクを貼る時に、URLの前に「mailto:」をつけるとメールリンクになります。

アメブロの電話番号リンクとよく似た仕組みですね。

下記の4STEPで完了です。

アメブロのメールリンクの貼り方の手順
  • STEP1
    メールリンク用のテキストを書く
  • STEP2
    リンクマークをクリック
  • STEP3
    URLに「mailto:メールアドレス」を入力
  • STEP4
    挿入ボタンをクリック

  

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

あめっくま
あめっくま

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

  

  

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

下記のようなテキストのメールリンクをアメブロに貼ってみましょう。

手順①

まずは記事作成画面で、メールリンク用のテキストを用意します。

アメブロ向けメールリンクの貼り方①リンクのテキストを用意

手順②

下記のように、テキストを選択した状態で「リンクマーク」をクリックして下さい。

アメブロ向けメールリンクの貼り方②リンクマークをクリック

手順③

リンクのボックスが表示されたら、URL欄に「mailto:」に続けて「メールアドレス」を入力します。

アメブロ向けメールリンクの貼り方③「mailto:メールアドレス」を入力

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

手順④

すると下記のようにテキストのメールリンクになっています。

アメブロ向けメールリンクの貼り方 ④テキストタイプの完成

これで完成です。

 

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

下記のようにアドレスが入った状態でメールソフトが起動すれば成功です。

メールリンクで宛先が入った状態で立ち上がる
くますけ
くますけ

メールリンクは簡単に作れるんだね。

  

ちなみに下記のようにリンクのテキストに、メルアドを書いて表示させてもOK。

お問い合わせはこちら
ame-kuma@ameblo.com

メールを送れるリンクであることが、読者にも分かりやすいです。コピーもしやすいですね。

  

あめっくま
あめっくま

アドレスを表記しておくと親切ですね。

  

  

クリックしやすいメールリンクもおすすめ

テキストのメールリンクもいいのですが、ボタンを使うと読者がクリックしやすくなります。

コードをコピペして簡単に利用できますよ。

<div class="l-text-center" style="text-align: center;"><a href="リンク先URL" 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); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.5em 0.8em 0.5em 2.5em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 12px); left: 12px; width: 25px;" src="https://nk-media.org/wp-content/uploads/2020/09/mail-s.png" alt="">お問い合わせはこちら</span><img width="280" height="50" src="https://nk-media.org/wp-content/uploads/2021/02/button64-1.png" style="display: none;" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="リンク先URL" 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); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.5em 0.8em 0.5em 2.5em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 12px); left: 12px; width: 25px;" src="https://nk-media.org/wp-content/uploads/2020/09/mail-s.png" alt="">お問い合わせはこちら</span><img width="280" height="50" src="https://nk-media.org/wp-content/uploads/2021/02/button64-2.png" style="display: none;" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="リンク先URL" 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); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.5em 0.8em 0.5em 2.5em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 12px); left: 12px; width: 25px;" src="https://nk-media.org/wp-content/uploads/2020/09/mail-s.png" alt="">お問い合わせはこちら</span><img width="280" height="50" src="https://nk-media.org/wp-content/uploads/2021/02/button64-3.png" style="display: none;" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="リンク先URL" 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); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.5em 0.8em 0.5em 2.5em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 12px); left: 12px; width: 25px;" src="https://nk-media.org/wp-content/uploads/2020/09/mail-s.png" alt="">お問い合わせはこちら</span><img width="280" height="50" src="https://nk-media.org/wp-content/uploads/2021/02/button64-4.png" style="display: none;" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="リンク先URL" 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); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.5em 0.8em 0.5em 2.5em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 12px); left: 12px; width: 25px;" src="https://nk-media.org/wp-content/uploads/2020/09/mail-s.png" alt="">お問い合わせはこちら</span><img width="280" height="50" src="https://nk-media.org/wp-content/uploads/2021/02/button64-5.png" style="display: none;" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="リンク先URL" 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); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.5em 0.8em 0.5em 2.5em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 12px); left: 12px; width: 25px;" src="https://nk-media.org/wp-content/uploads/2020/09/mail-s.png" alt="">お問い合わせはこちら</span><img width="280" height="50" src="https://nk-media.org/wp-content/uploads/2021/02/button64-6.png" style="display: none;" alt=""></a></div>
<p>&nbsp;</p>
<div class="l-text-center" style="text-align: center;"><a href="リンク先URL" 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); font-size: 1.1em; font-weight: bold; color: #ffffff; text-decoration: none; padding: 0.5em 0.8em 0.5em 2.5em;"><span class="i-amphtml-hidden-by-media-query"><img style="position: absolute; top: calc(50% - 12px); left: 12px; width: 25px;" src="https://nk-media.org/wp-content/uploads/2020/09/mail-s.png" alt="">お問い合わせはこちら</span><img width="280" height="50" src="https://nk-media.org/wp-content/uploads/2021/02/button64-7.png" style="display: none;" alt=""></a></div>
<p>&nbsp;</p>

緑線のリンク先URLの部分を「mailto:メールアドレス」に変更すれば、メールリンクになります。

手順①

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

アメブロ向けメールリンクの貼り方⑤HTML表示に切り替え

手順②

下記のようにコードを貼り付けて、「リンク先URL」を「mailto:メールアドレス」に書き換えて下さい。

アメブロにクリックしやすいメールリンクを載せる

  

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

下記のようにクリックしやすいメールリンクとなります。

  

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

  

あめっくま
あめっくま

クリック率を上げる工夫は大事ですね。

  

  

【応用】アメブロでのメールリンクの活用法

メールリンクのURLに下記コードを付け加えることで、事前にテンプレートを用意することも可能です。

下記のコードをコピペして使って下さいね。

メールに件名を入れる
mailto:メールアドレス?subject=ここに件名
メールに本文(テンプレート)を入れる(注意事項を後述)
mailto:メールアドレス?body=ここに本文(テンプレート)
CCにアドレスを入れる
mailto:メールアドレス?cc=ここにCC用のメールアドレス
BCCにアドレスを入れる
mailto:メールアドレス?bcc=ここにBCC用のメールアドレス

   

例えばURLに「mailto:ame-kuma@ameblo.com?subject=○○サービスへのお問い合わせ」と入力してみます。

下記のメールリンクのデモをクリックしてみましょう。

お問い合わせはこちら
ame-kuma@ameblo.com
 

メールに件名があらかじめ入力されているのが確認できますね。

  

あめっくま
あめっくま

メールリンクをクリックした時に、内容を一部入れておくことも可能です。

  

  

メールリンクに本文を入れる時の注意事項

メールを開いた時にテンプレートが用意されていると、読者が問い合わせしやすいです。

アメブロ向けメールリンクをテンプレート有で作れる

  

ただしメールの本文テンプレートを日本語で書くと、読者側で文字化けする可能性があります。

そこで文面を決めた後に、URLエンコード(専用のWEB言語に変換)が必要です。

  

あめっくま
あめっくま

聞き慣れない言葉かもしれませんが、操作は簡単です。

  

手順①

こちらのURLエンコード・デコードツールを立ち上げます。

下記のように、左側にメール本文に書く内容を入れて変換して下さい。

メールリンクの本文をエンコードする

右側の変換された長いコードをコピーして使います。

手順②

下記のようにコピーしたコードを「mailto:メールアドレス?body=」の後に貼り付けて入力しましょう。

アメブロ向けメールリンクの本文コードを貼り付け

リンクを挿入するをクリックして完成です。

下記にデモを用意したので、メールの表示を確認して下さいね。

お問い合わせはこちら
ame-kuma@ameblo.com

  

ボタンにする場合は、HTML表示に下記のようにコードを貼り付けて下さい。

アメブロ向けメールリンクをボタンにする場合はコードを貼り付け

通常表示に戻して完成です。

こちらも下記にデモを用意したので、メールの表示を確認して下さいね。

   

あめっくま
あめっくま

事前に確認したい内容を用意しておくと便利ですね。

  

  

複数項目をメールリンクに設定する

件名・本文・CC用のアドレスなど複数項目を設定する場合は「&amp;」でつなぎます。

mailto:メールアドレス?subject=ここに件名&amp;body=ここに本文&amp;cc=CC用のメールアドレス

長くなるので書き間違えに注意しましょう。

  

  

メールリンクはGmail・Yahooメールに注意

メールリンクは便利ですが、読者側の環境によっては使えないことが多いです。

特に「Gメール」や「Yahooメール」をブラウザのみで利用し、PCやスマホでメールソフトを使っていない読者は利用できません。

  

そのためメールリンクより、「お問い合わせフォーム」の方が確実です。読者の環境に関係なく使えるので、顧客を逃す可能性も減りますよね。

無料で簡単に使えるものも多いので、「お問い合わせフォーム」の設置を優先しましょう。

下記の関連記事で詳しく解説しています。(作成中)

  

あめっくま
あめっくま

現在は、メールリンクよりお問い合わせフォームの方が主流です。

  

  

コメント