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

hiro-yama

こんにちわ、hiro-yamaです。

副業でアフィリエイトを実践し、家族と幸せに暮らすライフスタイルを送っています。

→hiro-yamaのプロフィール

どうも、山田です。
　
　
今回は、「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を挿入すると、ボタンにリンクを埋め込むことができます。
　
　

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

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