アフィリエイト

htmlでリンクボタンを作る方法!立体的なボタンデザインを簡単に

投稿日:

hiro
こんにちは、hiroです。 →hiroのプロフィールはこちら

どうも、山田です。
 
 
今回は、「htmlでリンクボタンを作る方法!立体的なボタンデザインを簡単に」についてです。
 
 

リンクボタンとは?

リンクボタンとは、コンバージョンボタンとも呼ばれますが、ブログの訪問者がクリックできるボタンで、ボタンに埋め込まれたリンク先に遷移することができるものです。
 
 
よくあるのが、購入はこちら、とか、資料を請求する、というような次のアクションにつなげるためのボタンになります。
 
 
アフィリエイトでいうと、商品の購入ページにリンクするなど、成約につながるボタンなので、わかりやすいリンクボタンを設置しておきたいですね。
 
 
今回は、このリンクボタンを設置する方法を紹介します。
 
 

リンクボタンの設置は簡単

リンクボタンは、下記のようにテキストモードでhtmlコードを追記するだけです。
 
 

 
 

<div class="al-c m20">
<a href="#" class="btn btn-green"><span class="">送信内容を確認する</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-blue"><span class="">送信内容を確認する</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-orange"><span class="">送信内容を確認する</span></a>
</div>
 
<div class="al-c m20">
<a href="#" class="btn btn-red"><span class="">送信内容を確認する</span></a>
</div>

 
 
a href="#"の#にリンク先のURLを挿入すると、ボタンにリンクを埋め込むことができます。
 
 

リンクボタンの色は緑が一番いい?

リンクボタンの色のバリエーションが選ぶことができます。
 
 
自分の好みの色を選べばいいと思いますが、ある調査によると、緑色が一番クリックされたという結果が出ているそうです。
 
 
人間の視覚的に、色は様々な印象の違いあるので、このように結果に差が出るのかもしれませんね。
 
 
しかしながら、緑色が一番いいかというと、僕はブログ・サイト全体の色調やバランスを見て色を決めた方がいいと思います。
 
 
色による差は最初の内は特に微々たるものなので、色にこだわるのは少し先でいいと思います。
 
 
まずは見やすいリンクボタンを設置してみましょう。
 
 
また、設置したら、スマホで見た目や、実際にリンクしているかを確認するのもお忘れなく。
 
 

リンクボタン作成時の注意点

リンクボタンを作成するときには、埋め込むテキストに注意が必要です。

なぜなら、ASPによっては、アフィリエイトリンクの改変を禁止しているところがあり、下手にテキストやリンクを改変すると、成約条件に反してしまったり、アカウント削除につながりかねません。

なので、基本的には、ASPのリンクをそのまま使うようにしましょう。

どうしても変えたい場合には、自由テキスト可のリンクを使うようにするといいですね。

リンクボタンを作るときにはこの点だけ注意しておきましょう。
 
 





  • この記事を書いた人

hiro

1987年生まれ。妻と息子の3人家族。 早稲田大学大学院 先進理工学研究科修了後、一部上場企業に入社。 給料がほとんど上がらない会社の年功序列に疑問を覚え、 会社で働きながら副業でアフィリエイトブログを構築。 ブログから毎月10万円が自動的に入る仕組みを作り、 家族とともに好きな時に好きなことをする人生を歩む。 アフィリエイトブログの作り方などの情報発信を通じて、「自分の人生を、自分で生きる」ということをお伝えしていきます。

-アフィリエイト

Copyright© hiro's blog , 2019 All Rights Reserved Powered by AFFINGER5.