どうも、山田です。
今回は、「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のリンクをそのまま使うようにしましょう。
どうしても変えたい場合には、自由テキスト可のリンクを使うようにするといいですね。
リンクボタンを作るときにはこの点だけ注意しておきましょう。
