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

【ブログやアメブロでのメールアドレスのリンク】貼り方とクリックされる載せ方

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

この記事の特徴

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

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

  

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

  

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

  

下記をクリックするとメールソフトが起動するので、実際にどんな感じになるのか確認しましょう!(注:アドレス自体はデモです)

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

  

しかも、メールのタイトルや文面を事前に指定することもできます!

アメブロのメールアドレスリンクは記事本文などを事前に入力できる

お客様が簡単に問い合わせできるように、あらかじめ設定するということですね。

  

くますけ
くますけ

メールアドレスのリンクがあると便利そうだなぁ。

あめっくま
あめっくま

読者からの質問用・お仕事の受付用などに、簡単に使えるよ。

  

注意!
メールリンクは一部使えない読者がいます。
欠点の少ない「お問い合わせフォーム」を設置する方がおすすめです。

【関連記事】
【簡単】アメブロやブログにお問い合わせフォームを無料で設置する方法

 

この記事を書いた人

 

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

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

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

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

 

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

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

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

  

下記の4STEPで完了です。

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

  

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

あめっくま
あめっくま

PCとスマホアプリ、両方のやり方を解説しますね。

  

  

【PC用】テキストでのメールアドレスリンクの載せ方

PCで記事を書く場合の、メールアドレスリンクの貼り方を解説します。(スマホアプリはこちら

下記のようなテキストのメールリンクを、PC版エディタでアメブロに貼ってみましょう。

    

手順①

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

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

 

手順②

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

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

 

手順③

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

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

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

 

手順④

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

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

これで完成です。

 

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

  

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

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

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

  

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

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

メールを送れるリンクであることが、読者に伝わりやすいです。

コピーもしやすいので、より親切ですね。

  

あめっくま
あめっくま

アドレスを表記しておくのもおすすめですよ。

  

  

【スマホアプリ用】メールリンクの載せ方

スマホで記事を書く場合の、メールリンクの貼り方を解説します。(PCはこちら

【補足】
iPhoneアプリでの操作方法を紹介していますが、Andoroidアプリでも同じ方法です。

 

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

 

なお「アメブロのスマホアプリでリンクを簡単に貼る方法」は下記で解説しています。

スピードUPする方法も紹介しているので、合わせてチェックして下さいね。

  

手順①

最初にアプリのエディタ上で、メールリンクを入れる場所を選び・リンクマークをクリックして下さい。

アメブロのスマホアプリでリンクの貼り方①リンクマークをクリック

  

手順②

下記のようにリンクの設定が立ち上がります。

URL欄に「mailto:」に続けて問い合わせ先の「メールアドレス」・テキスト欄に「リンクの文章」を入力して、「挿入」をクリックしましょう。

  

手順③

するとエディタ上にメールリンクが入ります。

 

これで完成です。

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

 

実際に記事を投稿すると、下記のようにメールリンクが入ります。

    

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

  

くますけ
くますけ

スマホでも簡単だね。

あめっくま
あめっくま

URLの部分が専用の書き方になるだけだね。

  

  

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

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

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

  

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

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

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

  

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

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

    

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

メールリンクの場合もPCだけではなく、アプリでもリンクに下線が表示される方法を使うのがおすすめです。

  

あめっくま
あめっくま

少しでもクリック率を上げる工夫ですね。

  

  

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

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

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

  

<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:メールアドレス?subject=ここに件名

    

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

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

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

メールソフトが立ち上がった時に、件名があらかじめ入力されているのが確認できますね。

  

あめっくま
あめっくま

お客様の手間を省けますね。

  

  

メールリンクに本文を入れる

メール本文にテンプレートが用意されていると、お客様が問い合わせしやすいです。

また確認しておきたい項目を、事前に用意することもできますよね。

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

  

メールの本文を用意する場合は、下記のコードを使います。

mailto:メールアドレス?body=ここに本文(テンプレート)

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

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

  

あめっくま
あめっくま

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

  

手順①

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

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

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

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

  

手順②

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

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

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

  

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

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

  

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

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

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

  

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

   

あめっくま
あめっくま

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

  

  

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

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

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

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

  

  

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

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

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

  

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

詳しくは、下記の記事で解説しています。

   

あめっくま
あめっくま

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