アフィリエイト

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年生まれ。妻・息子・娘の4人家族。 早稲田大学大学院修了後、一部上場企業に入社。 給料がほとんど上がらない会社の年功序列に疑問を覚え、 会社で働きながら副業で月収10万円を稼ぐアフィリエイトブログを構築。 アフィリエイトで学んだ知識とノウハウを生かして、ブログコンサルを開始。個別コンサル生実績:MAX月収400万円。 ブログがアップデートで飛んだのをきっかけに、メルマガを使って本業を超える自動化収入を構築。 家族・子供の将来のためにも、米国株式インデックスを中心にNISAでつみたてる長期的な資産運用を開始。 30代の会社員パパが、自分の力でお金を作り、幸せに生きる方法をお伝えしていきます。

-アフィリエイト

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