ミニマリストアローンのブログ

【クリック率UP】ブログでアフィリエイト申し込みボタンを設置する

BLOG

アフィリエイト用のボタンを設置したいブロガー「ブログでアフィリエイトリンクをボタン化してカッコよくしたいんだけど、ボタンの作成方法はどうやるのかな?」

こういった疑問に答えていきます。

本記事の内容

サイトとかで、「◯◯はこちら」とか「◯◯に申し込む」と書かれたボタンをよく見かけますよね。ボタン形式のリンクだとそれっぽくなるので、自分のブログにも実装してみたくなるはず。

ということで本記事では、ボタンリンクを簡単に作成する方法を紹介していきます
何一つ難しいことは必要ないので、ぜひ参考にしてくださいね。

スポンサードサーチ

ブログでアフィリエイト申し込みボタンを設置する方法

ブログでアフィリエイト申し込みボタンを設置する方法
まずは完成イメージをどうぞ。

こんな感じになります。

使うソースコード

HTML

<div class="btn-red">&raquo; ここにテキストリンク</div>

いつでも使えるように、プラグインの「AddQuicktag」に登録しておくと便利です。

CSS

.btn-red {
  display: inline-block;
  padding: 10px 10px;
  text-decoration: none;
  border-radius: 4px;
  color: #ffffff !important;
  background:  #fc5c63;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 6px #c2474c;
	font-size:120%;
   width: 80%;
	font-weight:bold;
margin: 0px auto 30px;
}

.btn-red a {
color: #ffffff !important;
}

.btn-red:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

上記のCSSを「追加CSS」にコピペでOKです。

ボタンの色を変えたい場合はbackgroundの部分をいじれば変更可能です。カラーコードを調べて、好きな色に変更してください。

以上です。
ぜひ、設置してみてください。

人気記事Amazonアソシエイトに落ちる?【もしもアフィリエイトで解決します】

人気記事【2019年】ミニマリストが買ってよかった物&手放してよかった物

スポンサードサーチ