以前コメントで質問があったので、今回は「アフィリエイトリンクをボタン化する方法。２つ横並びボタンのやり方も紹介」を解説してみたいと思います。注意点もあるので、一緒に解説していきます。
アフィリエイトリンクでなくて普通のリンクもボタンにする事は可能です。
アフィリエイトリンクのボタン化する手順
一般的なアフィリエイトサイトでよく見かける「公式サイトへ」みたいなボタンですね。
ボタンの画像を用意して作成する方法と、CSSで作っちゃうパターンがあるんですが、今回作成するのはこのCSSのボタンです。
アフィリエイトリンクを以下のようにボタン化する事が可能です。
もしくは２つ横並びとか（スマホでは縦2列）。
こんな感じでリンクをボタン化できます。一応前提でWordPress。でも全部ではないですが、ほとんどの無料ブログでも多分できるかなと思います。
スタイルシートでボタン作成
まずはスタイルシート（CSS）へ次の記述を追加します。スタイルシートは下に書いた物が優先的に反映されますので、一番下に追加でOKです。
背景色や文字の色、太さなどちょっとした事でクリック率も違ってくるのでカラーや文字色、文字の大きさなどはお好みで変更してみて下さい。
ボタン単品（１つだけのやつ）
/* 赤ボタン単一 */
.red-btn {
font-size:16px;
margin-left: auto;
margin-right: auto;
display: block;
width: 300px;
margin-bottom: 1em;
}
.red-btn a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
font-weight: bold ;
box-shadow:2px 2px 2px #555;
border-radius: 5px;
background-color:#ed254e;
color: #ffffff !important;
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.red-btn a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
box-shadow:none;
}
横並びボタン
/* 左ボタン（横並び） */
.left-btn {
width: 100%; /*ボタンの横幅 */
text-align: center; /*ボタン内の文字中央寄せ */
border-radius: 5px; /*ボタンの角を少し丸く */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-weight: bold; /*ボタン内文字は太字 */
}
.left-btn a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
font-weight: bold ;
box-shadow:2px 2px 2px #555;
border-radius: 5px;
background-color: #1bb4d3;
color: #ffffff !important;
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.left-btn a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
box-shadow:none;
}
/* 右ボタン（横並び） */
.right-btn {
text-align:center;
width: 100%;
float:left;
color:#fff;
font-weight:bold;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.right-btn a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
font-weight: bold ;
box-shadow:2px 2px 2px #555;
border-radius: 5px;
background-color: #C81C1C;
color: #ffffff !important;
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.right-btn a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
box-shadow:none;
}
.box-main {
text-align:center;
font-size:15px;
margin-bottom: 1em;
}
.box-main:after {
content:"";
display:block;
clear:both;
}
@media screen and (min-width: 600px) {
.right-btn {
width:48% !important;
margin-left:10px;
}
.left-btn {
width:48% !important;
float:left;
margin-right: 10px;
margin-left:0;
}
}
@media screen and (max-width:599px){
.right-btn {
margin-top: 15px;
}
}
数カ所「!important」というのを付けている部分があります。これを付けるとその記述が優先的に反映されますので、後で確認した時に反映されない部分がある場合にはその部分の記述に「!important」を付けてみて下さい。
上記スタイルシートを追加できたら保存します。これで準備はOKです。
記事投稿画面でボタンを呼び出す
スタイルシートの記述が保存できたら今度は記事を書く画面（投稿画面）で記事を書いていきます。アフィリエイトリンクのボタン化したい部分に次の記述をします。
単品のボタンの記述
<div class="red-btn">ココにテキストリンク</div>
※ボタン内のテキスト部分はリンクにして下さい。
横並びのボタン場合
<div class="box-main"> <div class="left-btn">リンク１</div> <div class="right-btn">リンク2</div> </div>
※ボタン内のテキスト部分はリンクにして下さい。
という感じです。コードが面倒なのでWordPressならプラグイン「AddQuicktag」で1つボタン、2つボタンのコードをそれぞれ登録しておけば投稿画面ですぐに呼び出せます。
⇒よく使うタグを登録し簡単に挿入できるプラグイン【AddQuicktag】
アフィリエイトリンクボタン化の注意点
今回CSSで作るボタンを紹介しましたが今回のやり方だとボタン内はリンクにしてないと装飾されませんのでボタン内のテキストは必ずリンクにして下さい。
また、画像のボタンと違ってCSSで作成したボタンはボタン内の文字（テキスト）を自由に変更できます。
ただCSSで作成したボタンはボタン内のテキストが長くなると2列になります。2列になるとその分ボタンも分厚くなるので注意です（特にスマホページ）。
↑こんな感じでテキストが長いと2列になってボタンが厚くなります。
以上アフィリエイトリンクをボタン化する方法。２つ横並びボタンのやり方も紹介でした！
↓私がメインで利用しているASPはこちら↓
↓アフィリエイトで使える無料ツールはこちら↓
コメント
はじめまして。いつも参考にさせていただきながらブログを書いています。
初心者の私にも大変わかりやすくて感謝です！
「アフィリエイトリンクのボタン化」について、どうしてもわからなかったので教えてください。
シーサーブログに「Time Line Green」というテンプレートがございますが、このテンプレの場合だけボタンになってくれません。他のテンプレは成功しますが、これだけは見た目がテキストリンクのままとなります。テンプレをいじらない初期状態でCSSに追加して試してみましたが、やっぱりダメです。
初心者なので教えていただけますと幸いです。よろしくお願い致します。
理系女子の美容オタクママ様
コメントありがとうございます。楽天とAmazonと別々にCSSを書いている感じかなと思いますが、今の状態を横並びにするならどちらも修正が必要になります。
まず、ボタンの横幅ですが、文字と同じ幅になるのは幅が「max-width：○○px」で指定しているからです。これは最大値を○○pxと設定するだけなので文字数に応じて広くなります。これを「max-width」ではなく、「width」にすると決まった幅にできますので、楽天のボタンもAmazonのボタンも幅はwidthで指定すれば同じ幅になるかと思います。
ただ、１つ注意点としてはwidthで幅を指定した場合に、これは固定の幅になりますので、スマホなどで確認した時にボタンだけが横にはみ出す可能性がありますので、横幅の広さは確認しておいた方がいいです。
それから高さはpaddingという部分で調整できます。現在「padding:10px;」となっている部分の数値を少し減らしてみて下さい。
はじめまして。参考にさせていただいてボタンを作成したのですが、うまくできないので教えてください。
記事真ん中あたりと記事最下部に楽天とAmazonのアフィリエイトリンクをボタン化してみたのですが、文字数に合わせた横幅になってしまい楽天のボタンの方が横幅が狭くなってしまいます。
Amazonと同じ横幅にしたいのですが、どのようにすればいいのでしょうか。
またボタン全体の高さは逆にもう少し狭く（低く）したいのですが、余白をなくす場合の指定を足してみたのですが、文字がずれてしまいうまくできません。
素人でチンプンカンプンなので、大変恐縮ですが教えていただけると助かります。
よろしくお願いいたします。
ジン様
コメントありがとうございます。無理ではないです。テキスト部分そのまま載せてもOKですし、テキストを変更してもボタン化はできます。ただ問題はそれがアフィリンクの改変になるかも？という部分なんですよね、ほとんどのASPでタグの改変は認められてませんし、きちんと成果が反映されてなかった場合に困ります。なので一応ASPへの確認は必須かと思います。
もちろん確認しないでやっている方も多いです、インプレッション用のタグを外したり、リダイレクト設定をしたり。個人的には利用規約って一番怖い部分なのでできるだけ確認をとってからするようにしてます。
質問です。
自由テキストもメール素材もない場合はボタン画像にアフィリリンクを組み込ませることは無理なのでしょうか？
カメ様
返信ありがとうございます。なるほど、そういう事だったんですね！初めて知りました（笑）。私もスマホページ確認させてもらったら反映されてました。良かったです。また何かあればいつでもコメント下さい。
しげぞうさん、ありがとうございます
前半の方に書いても同じでした。
はてなブログは
はてなブログにはPC表示向けのcss編集ボックスはあるが、スマホ表示用のcss編集ボックスはないと、わかりました。
タグで囲んだ部分にはCSSが記述できるとのことなのでしげぞうさんのを試したら上手くできました。
カメ様
コメントありがとうございます。はてなブログはほとんど使った事がないので、詳しくは分かりませんが、一度ボタンのCSSの記述を一番下ではなくて、上の方（前半の方）に書いても同じでしょうか？これ、一度試して見て下さい。
また、ブログサービスによってはスマホ用のCSSが別になっているようなブログサービスもありますので、その辺も確認してみて下さい。
しげぞうさん、質問です。
私ははてなブログの有料版、proで書いていたんですが
PCだけ反映されてスマホは無理でした。
デザインCSSのところにスタイルシートへの記述を張り付けたんですが
スマホでどう表示されるかをpcからプレビューで見たところ、変化してなかったです。
はてなブログではスマホからみてボタンをつけるのは難しいでしょうか？
コピペ3回目で表示できました。
下が大きいのはキャッシュで改善されました。
お世話になりました。
参考になる記事をありがとうございます。
アフィリエイト ボタン で検索したら1位表示でした。
ありがとうございました。
らんくる様
コメントありがとうございます。背景色なども反映されないという事はスタイルシートの記述にミスがある可能性が高いです。ボタン化自体のコードだけでなく、それ以前のコードの「 } 」が１つ抜けていたりするだけでその後の記述が反映されない場合もあります。
また、ブラウザにキャッシュが残っていて反映されていないという事もあります。一度ブログを表示させて「Ctrl」と「F5」を一緒に押してリロード（再読込み）をしてから確認して下さい。
原因として考えられるのは上位２つのどちらかの可能性が高いと思います。もしどうしても反映されない場合にはブログのURLを教えて頂けると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。
全く反映されませんでした。
スタイルシートの子テーマに貼りました。
記事はテキストタブです。
テキストリンクの文面だけが表示されていつもと変わりない感じです。
A8のテキストリンクでよろしいのでしょうか？
REN様
返信ありがとうございます。ちょっとチェックしてみたのですが、コード自体は間違っていない感じです。ただ、理由は分からないのですが、アフィリエイトリンクがPCとスマホで違う物になってしまいますね。
通常はアフィリエイトリンクはリンクコード（a href=”○○”）とimgタグの組み合わせになります。PCではこの組み合わせのリンクなんですが、スマホに切り替えると何故かリンクコード（a href=”○○”）が２つに増えてimgタグという感じになっているようです。
リンクコード（a href=”○○”）が２つに増えているためにボタンが２つになっているのが原因なんですが、これはSeesaaブログの仕様なのか、それともアフィリエイトリンクの仕様なのかがハッキリしません。ただ、私のWordPressで試した所、このような現象はないので、Seesaaブログの仕様に原因があるかも？と思います。確信はありませんが。
そういえば以前にもSeesaaブログでA8のリンクではないですが、もしものリンクで同じような現象があった気がします。その時は諦めてボタン化にはせず、テキストリンクにしていたような記憶があります。
なので、どうしてもボタン化でしたいという事であれば一度Seesaaブログ側に問い合わせをしてみるのが良いかもしれません。現象としては増えた2つ目のリンク（a href=”○○”）の中身がimgタグと同様の中身になっています。
しげぞうさま
すいません。こちらです。
よろしくお願いします。
ＲＥＮ様
返信ありがとうございます。教えて頂いたURLで記事が見れませんでした。404 NOt Foundになってしまいますので、もう一度URLを確認して教えて頂けると助かります。スマホ用のURLではなくて、普通のPC版のURLで大丈夫です。
それと、ちょっと今から明日にかけて用事があるため、返信は来週月曜以降になってしまうと思います。すみません！
しげぞうさま
返信ありがとうございます。
これがスマホ用ＵＲＬです。（削除お願いします）
ちなみにkousikiのコードは、
kousikiとkousiki2
があり、kousikiのほうはインフォトップのリンクで、ボタンは綺麗に表示されます。
kousiki2がＡ８ネットのリンクで、ボタンの二重化がおこります。検証お願いします。
REN様
返信ありがとうございます。とりあえずカエレバの方は大丈夫みたいですね。A8などのリンクのボタン化ですが、一度そのページを見せてもらえると助かります。おそらくちょっとCSSを変更する事で可能とは思うのですが、状況によっては違う場合もあるかと思いますので、どうぞよろしくお願い致します。
しげぞうさま
ＲＥＮです。
カエレバのカスタマイズはうまくいきました！ありがとうございます。
ということで、公式サイトへのようなリンクをボタン化する部分でも
同じようにつまずいております。
Ａ８のｉｍｇが邪魔をするので、どうしてもリンクボタンが縦に二つ繋がって
出てきてしまいます。ご指摘の通り
.kousiki {
height: 25px;
}
をＣＳＳに追加しても、上とか下とかにボタンがずれておしまいです。
ボタンの二重化も直ってませんでした。
カエレバで直ったときのように、
.kaerebalink-link1 img{display:none;}
のようなコードとして、
.kousiki2 img{display:none !important;}
みたいに作って入れてみましたが
二重になった下のボタンが細くなった程度です。
ｉｍｇタグを消せば簡単に直るのですが違反になるので
なにかいい方法知りませんか？
しげぞうさま
すぐにコメントをいただき
ありがとうございます。
スマホのブラウザキャッシュを消去して
件のページを再表示したところ
ボタンを表示することができました。
お騒がせして申し訳ありませんでした。
アムステル様
コメントありがとうございます。ボタン化のコード自体は記事で書いているコードで大丈夫かと思います。PCページではボタンで表示されてますか？もし表示されているのであれば原因として考えられるのはスマホのブラウザのキャッシュ（以前のデータ）が残っているのかもしれません。
WordPressでキャッシュ系のプラグインなどを使っているのであれば設定でキャッシュをクリアする事ができると思いますので、念のためキャッシュをクリア。それで再度スマホから確認し、スマホでの表示も再読み込み（リロード）して確認をしてみて下さい。
それでもボタン化しない場合にはお手数ですがURLを教えてもらえると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。
しげぞうさま
アフィリエイトサイトを構築するにあたり
本サイトをいつも参考にさせていただきています。
大変分かりやすい＆タメになる
記事をありがとうございます！
現在、本ページで紹介されているボタンを
私の運営しているサイトで導入しようとしているのですが
スマホ(iOS/safari)でボタンを実装したページを見ると
ボタン表示になりません。
ですが、こちらのサイトのボタン表示を確認したところ
しっかりボタンとして表示されていました。
本ページで紹介されているCSS設定以外にも
スマホ用に何か設定が必要なのでしょうか？
お手数ではありますが
ご教授していただけないでしょうか。
以上です。
しげぞうさま
ご指導のとおり試したところ、できました！
スタイルシートのほうで、.box-redを作成して（.boxと書いてある項目をすべて.box-redに直したものをもう一つ作りました）
記事のほうに
ここにアフィリエイトリンク
ここにアフィリエイトリンク
と書いたら表示されました、どうしてこれだけでよいのかよくわからないのですけど（がなくていいのかなーと）
うまく表示されましたので、安堵しております。
しげぞうさんありがとうございました！
牡丹様
コメントありがとうございます。牡丹様の言われるように横並びにしたボタンがどちらも.boxなので同じ色になりますね。これを色分けしようと思ったらスタイルシートで.box-redとか別の名前で再度同じようなスタイルを書く必要があるかなと思います（色だけ違う記述で後は.boxと同じ記述のスタイル）。
それで記事投稿の部分で色を変えたいdivを「class=”box-red”」という感じで書き換えたらOKだと思いますが、もし上手く反映されないという場合には再度コメント下さい。改めてちょっと考えてみますね！
しげぞうさま
その節は、ボタン横並びについて詳細にわたる
ご指導をありがとうございました！
表示がうまくできて喜んで色など変えてみて
それも成功しました(^^)/（色タグを変更しただけですが）
更に片方だけを違う色にして、二色で並べて
みようと試行錯誤（グーグル先生に問い合わせ）
してみましたが、どうにもうまくいかず、再度ご質問することも
大変申し訳ないのですが、コメントした次第です。
.box というものをもう一つ別に作ってCSSに
書き込む感じでしょうか？
何かヒントがありましたら教えていただけますと幸いです。
しげぞうさま
こんなに手間のかかるご説明をしていただいて
ありがとうございます！感謝感激です！
見事表示することができました！
display: block;というものや更なるcssへの書き込みが必要なのですね、
これは・・・私にはまったくわかりませんでした。
とても勉強になりました、ありがとうございます。
ブクマさせていただきました、これからもこっそり拝見して
学びたく思います。
このたびは貴重なお時間を割いて頂いてありがとうございました!
牡丹様
コメントありがとうございます。ボタンに関してですが、横並びにしてみたいという事でいいですか？ボタンを横並びにするのは可能なんですが、ボタン１つ中央寄せのコードと、２つ横並びのコードは別にしておいた方が良いと思います。なので、さらにもう１つコードを追加していきます。
それと、牡丹様のブログの幅が分からないので、とりあえずのボタンサイズで以下書いてみますが、ブログの幅とボタンの幅の関係でブログの幅が狭いと横並びにはなりませんし、広すぎるとボタンが左に寄る形になります、その場合にはボタンの幅の数値を調整や余白の調整が必要になります。
まず、スタイルシートですが、新たに以下のコードを追加してみて下さい。
.box { text-align:center; /*ボタンの中央配置 */ margin-bottom:15px; display: block; width: 100%; /*ボタンの横幅 */ text-align: center; /*ボタン内の文字中央寄せ */ padding: 10px; /*ボタン内文字の余白 */ background-color: #E53935; /*ボタンの背景色 */ color: #ffffff !important; /*ボタン内の文字色 */ float:left; margin-right: 15px; border-radius: 5px; /*ボタンの角を少し丸く */ -webkit-border-radius: 5px; -moz-border-radius: 5px; font-weight: bold; /*ボタン内文字は太字 */ } .box a { text-decoration: none !important; /*ボタン内テキストリンク下線無し */ color: #ffffff !important; /*ボタン内の文字色 */ display: block; } .box-main:after { content:""; display:block; clear:both; } .box-main { text-align:center; } @media screen and (min-width: 600px) { .box {width:250px;} .box-main {margin-left:10px;} }追加できたら保存でOKです。
次に記事投稿画面でボタンを表示したい部分に次のようなコードを追加します。
これで一応横並びにはなると思いますが、先ほども書いたようにブログコンテンツの幅の関係で上手く表示されるかはやってみないと分かりませんので、一度試してみて下さい。PCで横並び、スマホからは縦に並ぶ感じになればOKです。
それと注意点としてはボタンの幅が250pxで設定してますので、広告コードのテキスト部分が長すぎるとボタン内のテキストが2段になり、ボタンが縦長になります、なので上手く行きません。その場合はボタンの幅の調整が必要ですし、ボタンの幅を大きくし過ぎるとコンテンツの幅に収まらないので横並びにはなりません。
ちょっと難しい部分ではありますが、もし上手く行かない場合にはブログのURLを教えて下さい。コメント公開時にはURLは削除しますし、ブログの幅などを調べて改めて考えてみますね！
とても分かりやすい記事で、すぐに
ボタンが完成しました、しげぞうさんありがとうございます！
こちらのボタンは中央寄せ表示されますが、
並べて表示するにはどのようにすればよいのだろうと
色々調べてトライしたのですがうまくできませんでした。
しげぞうさんに聞くには申し訳ないのですが
もしご存知でしたらこのボタンを並べる方法を
教えていただけましたら幸いです。
なるほどheight使えば良かったんですね！
解決しました、ありがとうございます
お手数おかけしました！
佐々木様
重要なご指摘ありがとうございます。多分余白ができるのはA8ネットさんのリンクですよね。佐々木様の言われるようにimgタグですね。これは広告の表示回数を計測するためのタグなので、改変はオススメできません。
なので、CSSでボタンの高さを指定する方法で解決できるのでは？と思います。具体的には以下のコードをスタイルシートに追加してみて下さい。
.kousiki { height: 25px; }スタイルシートを保存したら再度ボタンの余白を確認して下さい。もしそれでも解決しない場合にはお手数ですが再度コメント頂けると助かります。
PS:記事にも追記しておきました。ありがとうございます！
こんにちは、いつも素敵な記事を参考にさせて頂いています。
リンクをボタン化してみたのですが、下に一行余白ができてしまいました。
多分元からリンクにあるHTMLの「img」が原因かと思われるのですが、
この場合って勝手にHTMLを変更・削除してもよろしいのでしょうか？