アフィリエイトリンクの改行をなくしたりボタン化する方法

特にA8のアフィリエイトリンクは1☓1の画像でインプレッションを測定（何回表示されたかデータを取っている）しているせいもあって余計な改行が出てくることがあります。

この改行をなくすことによって通常のリンクのように文章内で自然にリンクを置くことができます。

また、アフィリエイトリンクに限らず、リンクをボタン化することもコンバージョン率を高めるひとつの手段として有効です。

当サイトではWordPressのテーマSimplicityを使っているのですが、Simplicityを使っていない人でもCSSにコピペするだけで簡単に実装できます。

このページでは、アフィリエイトリンクの改行をなくす方法とリンクのボタン化について簡単に説明していきます。

アフィリエイトリンクのコード改変は多くのASPで禁止されているのでコード改変を行わずに実現します。

特に最後の方で載せている方法は自分なりにカスタマイズも容易だと思うのでオススメします。

＜無料で稼いでみるかい？＞
スマホアドレス登録推奨
「理由は？」←タップで表示・非表示

もくじ（見出しのまとめ）

1 アフィリエイトリンクの改行をなくす方法
- 1.1 アフィリエイトリンクの改行防止のために何をやっているのか
2 リンクをボタン化する方法
3 その他の方法
4 リンクの使い分け
5 リンクのボタン化のメリット
6 まとめ

アフィリエイトリンクの改行をなくす方法

まずはCSSに以下のコードをコピペしましょう。

.img-inline > img {
       display: inline !important;
}

.img-inline > img {

display: inline !important;

}

そして、WordPressなどでアフィリエイトリンクのコードを貼る時に

<span class="img-inline">アフィリエイトのコード</span>

1	<span class="img-inline">アフィリエイトのコード</span>

のように貼ればOKです。

「アフィリエイトのコード」の部分にA8などで取得したコードをそのままコピペするだけでOK

コードの中に余分な改行（img以外で）がある部分は削除してください。

アフィリエイトリンクの改行防止のために何をやっているのか

一応知っておいた方が良いと思うので書いておきます。

まず上のimg-inlineというのは、勝手に名前を付けているだけなので実際のところどんな名前にしてもOKです。

.img-inline > img

1	.img-inline > img

この部分は「.img-inline」の中の「img」だけに適用してね！と書いています。

display:inline

1	display:inline

の部分はインライン表示にしてくれ！という意味です。

これを指定しないとdisplay:block;状態になってしまって勝手に改行されてしまいます。

displayで指定できる値はいくつかあります。

有名ドコロというか便利なのでよく使うのがdisplay:none;で非表示にしたいときに使ったりします。

ここでなんでnoneにしていないかと言うと、noneだともしかしたらインプレッションの測定ができないかもしれないからです。

そうなると成果が反映されなかったり、ASPから怒られるかもしれません。（データが取れないので）

インラインで表示している上の方法は実は文字の直後に1☓1のimgタグが視認できないだけで表示されています。

noneだと全く表示されません。

この違いですね。

!important

1	!important

この部分は単に優先的に適用してくれよ！と書いているだけです。

CSSの書き方について詳しく知りたい人はこちらのサイトやこっちのサイトが役に立つかもしれません。

リンクをボタン化する方法

こちらも基本的にはCSSにコピペするだけでOKです。

WordPressテーマSimplicityを使用しているのであれば最近のアップデートでボタンクラスのアップデートがあったのでそれをそのまま使用してもOKです。

ただそのまま使用する時にもアフィリエイトリンクのコードを改変せずに使用するにはちょっとしたコツがあります。

ここでは、

Simplicityのボタンクラスでアフィリエイトリンクをボタン化する方法
CSSにコピペするだけでボタン化する方法

の2つについて解説します。

Simplicityのボタンクラスでアフィリエイトリンクをボタン化する方法

Simplicityを使っているならCSSなどをいじらなくてもボタン化することが可能です。

まずは、テーマ作者さんのページでサンプルのコードを見てみましょう。

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-arrow-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

1	<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-arrow-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

例えばこんなヤツですね。

Simplicityを使っているならここの

<a href="#"

1	<a href="#"

この#の部分にリンクを入れればOKです。

文字も適宜変更します。

ちょっとやってみますね。

<p><a href="http://kasegunet.jp/" class="btn btn-red btn-l"><span class="fa fa-arrow-right fa-fw" aria-hidden="true"></span> 稼ぐネットトップページ</a></p>

1	<p><a href="http://kasegunet.jp/" class="btn btn-red btn-l"><span class="fa fa-arrow-right fa-fw" aria-hidden="true"></span> 稼ぐネットトップページ</a></p>

こう入力すれば

稼ぐネットトップページ

こういうボタンができます。

ただこのままだとアフィリエイトリンクに使う場合にコードを少しいじらなくてはならなくなってしまいます。

なので、アフィリエイトリンクで使用する場合には以下のようにしてください。

<p class="btn btn-orange btn-l">ここにASPのアフィリエイトリンクをそのままぶち込む</p>

1	<p class="btn btn-orange btn-l">ここにASPのアフィリエイトリンクをそのままぶち込む</p>

これで一応はアフィリエイトリンクをコード改変せずにボタン化ができます。

A8.net

こんな感じです。

ボタン内の文字色やマウスオーバー時の色などを弄りたい場合にはCSSをいじっていきます。

これについては次の段で触れるのでそれを参考にしてください。

どうせCSSをいじるのであれば最初から下の方法を使ったほうが良いかもしれません。

CSSにコピペするだけでボタン化する方法

現状ではこちらをオススメします。

ネット上では高さが自動伸縮しなかったり、アフィリエイトリンクの改行が表示されてしまったり、テキスト部分だけしかリンクにならなかったりするボタンのCSSは結構あったのですが、自分が欲しいボタン化のCSSがなかったので、いじりながら作ってみました。

尚、私はCSSの専門家ではないため、不具合等があるかもしれません。

ただし、今のところ自分で使っていて不具合はありません。

ボタン全体をリンク化
ボタンサイズの自動伸縮
imgによるアフィリエイトリンクの改行を回避（見た目上）
アフィリエイト文字の前後に任意の文字列の追加

などです。

まずは以下をCSSにコピペしてください。

.buttonlink {
    max-width: 600px;
    text-align: center;
    margin:20px auto 20px auto;
    font-weight: bold;
    color: #ffffff !important;
    height: auto;    
}
.buttonlink > img{
    display:inline !important;
}

.buttonlink :before {
	content:"【\f00c公式】";
        font-family: FontAwesome;
}
.buttonlink :after {
	content:" \f08e";
        font-family: FontAwesome;
}

.buttonlink a {
 text-decoration: none !important;
 color: #ffffff !important;
 display:block;
 padding: 10px;
 background-color: #FF773E;
    margin-right: auto;
    margin-left: auto;
    border-radius: 10px;  
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.buttonlink a:hover {
 text-decoration: none !important;
 color:#666666 !important;
 background-color: #fff;
 border:2px solid #F00;
}

.buttonlink {

max-width: 600px;

text-align: center;

margin:20px auto 20px auto;

font-weight: bold;

color: #ffffff !important;

height: auto;

}

.buttonlink > img{

display:inline !important;

}

.buttonlink :before {

content:"【\f00c公式】";

font-family: FontAwesome;

}

.buttonlink :after {

content:" \f08e";

font-family: FontAwesome;

}

.buttonlink a {

text-decoration: none !important;

color: #ffffff !important;

display:block;

padding: 10px;

background-color: #FF773E;

margin-right: auto;

margin-left: auto;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

.buttonlink a:hover {

text-decoration: none !important;

color:#666666 !important;

background-color: #fff;

border:2px solid #F00;

}

あとは、記事内に以下のように入力すればOKです。

<span class="buttonlink"><a href="http://kasegunet.jp/ target="_blank">稼ぐネット</a></span>

1	<span class="buttonlink"><a href="http://kasegunet.jp/ target="_blank">稼ぐネット</a></span>

するとこんな感じのボタンになります。
稼ぐネット

ちなみにspanでなく、divでもpでも使えます。

spanで囲うと次の行までの幅が小さくできます。pやdivだと見えはしませんが、テキスト（ブロック要素）の下の方に1☓1画像が表示されているため、次の行まで少し空白ができます。

アフィリエイトのコードもそのままぶち込んでOKです。

A8.net
テキストリンク自体をボタン化しているので、1✕1の画像による改行でボタンが縦長になることもありません。

また、リンクテキストの文字数が多くなった場合は自動で伸縮します。

こんな感じ
このページでは、アフィリエイトリンクの改行をなくす方法とリンクのボタン化について簡単に説明していきます。アフィリエイトリンクのコード改変は多くのASPで禁止されているのでコード改変を行わずに実現します。

モバイルでも文字の長さに応じてボタンごと伸縮します。

テキストがサービス名だけでなくやたら長いアフィリエイトテキストリンクってありますよね？

個人的には、サービス名だけのテキストリンクが一番好きなのですが、それを提供していない広告主もいます…

そういうのでも一応は大丈夫です。

ボタンの横幅も文字数に応じて自動調整にしたい場合はdisplay:block;をdisplay:inline-block;に変えてみてください

CSSが少し長めなので簡単な解説を付記したバージョンも載せておきます。

.buttonlink {
    max-width: 600px;/*最大幅の指定*/
    text-align: center;/*テキストを中央表示*/
    margin:20px auto 20px auto;
    font-weight: bold;/*テキストを太字にする*/
    color: #ffffff !important;
    height: auto;    /*高さを自動調整*/

}
.buttonlink > img{
    display:inline !important;
}

.buttonlink :before {
	content:"【\f00c公式】";/*テキストの前に付ける文字列*/
        font-family: FontAwesome;
}
.buttonlink :after {
	content:" \f08e";/*テキストの後ろにつける文字列*/
        font-family: FontAwesome;
}

.buttonlink a {
 text-decoration: none !important;/*リンクテキストの下線をなし*/
 color: #ffffff !important;/*リンクの文字色*/
 display:block;
 padding: 10px;
 background-color: #FF773E;/*背景色*/
    margin-right: auto;/*右余白を自動調整 */
    margin-left: auto;/*左余白を自動調整 */
    border-radius: 10px;  /*角丸く */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.buttonlink a:hover {
 text-decoration: none !important;　/*マウスオーバー時のリンクテキストの下線なし */
 color:#666666 !important;/*マウスオーバー時の文字色 */
 background-color: #fff;/*マウスオーバー時の背景色 */
 border:2px solid #F00;/*マウスオーバー時に黒の枠線表示 */
}

.buttonlink {

max-width: 600px;/*最大幅の指定*/

text-align: center;/*テキストを中央表示*/

margin:20px auto 20px auto;

font-weight: bold;/*テキストを太字にする*/

color: #ffffff !important;

height: auto; /*高さを自動調整*/

}

.buttonlink > img{

display:inline !important;

}

.buttonlink :before {

content:"【\f00c公式】";/*テキストの前に付ける文字列*/

font-family: FontAwesome;

}

.buttonlink :after {

content:" \f08e";/*テキストの後ろにつける文字列*/

font-family: FontAwesome;

}

.buttonlink a {

text-decoration: none !important;/*リンクテキストの下線をなし*/

color: #ffffff !important;/*リンクの文字色*/

display:block;

padding: 10px;

background-color: #FF773E;/*背景色*/

margin-right: auto;/*右余白を自動調整 */

margin-left: auto;/*左余白を自動調整 */

border-radius: 10px; /*角丸く */

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

.buttonlink a:hover {

text-decoration: none !important;　/*マウスオーバー時のリンクテキストの下線なし */

color:#666666 !important;/*マウスオーバー時の文字色 */

background-color: #fff;/*マウスオーバー時の背景色 */

border:2px solid #F00;/*マウスオーバー時に黒の枠線表示 */

}

このうち、beforeとafterの部分だけ簡単に解説します。

コード改変せずにアフィリエイトリンクに文字を追加する方法

うえのCSSの中の以下の部分ですね。

.buttonlink :before {
	content:"【\f00c公式】";/*テキストの前に付ける文字列*/
        font-family: FontAwesome;
}
.buttonlink :after {
	content:" \f08e";/*テキストの後ろにつける文字列*/
        font-family: FontAwesome;
}

.buttonlink :before {

content:"【\f00c公式】";/*テキストの前に付ける文字列*/

font-family: FontAwesome;

}

.buttonlink :after {

content:" \f08e";/*テキストの後ろにつける文字列*/

font-family: FontAwesome;

}

この「content:””」の「””」の中の部分が付け足されています。

必要に応じて追加・削除してください。

アイコン部分の「f00c」などはFont Awesone Finderで選べます。

今ｱﾚが安い？タイムセールﾁﾗ見

その他の方法

この方法はオススメしませんが、見た目上のリンク文字列自体を任意に変更することも可能です。

なぜオススメしないかと言うと、ASPの規約違反になる可能性が高い点とGoogleに隠しテキストと認識されペナルティの対象になる可能性が高い点です。

参考までにCSSを載せておきます。

.button-link{
    position:relative;
    max-width:600px;
    padding:10px;
    border:solid 2px #000;
    text-align: center;
    margin:20px auto 20px auto;
    font-weight: bold;
    color: #ffffff !important;
}
 
.button-link a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-indent:-999px;
}

.button-link{

position:relative;

max-width:600px;

padding:10px;

border:solid 2px #000;

text-align: center;

margin:20px auto 20px auto;

font-weight: bold;

color: #ffffff !important;

}

.button-link a{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

text-indent:-999px;

}

あとはリンクをタグで囲ってあげれば良いだけです。

<div class="button-link>任意の文字列<a href="http://kasegunet.jp/">稼ぐネット</a></div>

1	<div class="button-link>任意の文字列<a href="http://kasegunet.jp/">稼ぐネット</a></div>

これで「任意の文字列」がリンクになります。

この方法では、本来あるべきリンクテキストを-999pxを指定することで画面外へ追いやっています。

そしてリンク自体はwidthとheightを100%に指定することでBOX全体に適用しています。

あとは任意の文字列を適当にBOX内に書けばOKです。

アフィリエイトリンクの改変には該当しないですが、おそらくほとんどのASPで規約違反に該当するのではないかと思います。

また、リンクテキスト自体を画面外へ飛ばしているため、Googleに隠しテキストと見做される可能性もあるのでオススメしません。

　
div要素全体をリンク化する方法は以下のサイトも参考になるかもしれません。

参考
CSSでdiv全体をリンクにする方法

【CSS】DIV要素全体にリンクを効かせる方法

ちなみに、ひとつ上で紹介した私が書いたCSSでは、div要素全体をリンク化しているのではなく、リンクテキストをブロック要素にしてそのエリアをリンク化しています。

なのでpでもdivでもspanでも使えます。

リンクの使い分け

文章内に自然にリンクを配置する場合とボタン化する場合との使い分けについて簡単に書いておきます。

まず、アフィリエイトの側面からサイト訪問者を４つの層に分類します。
（バナー広告に関しては今回このページでは関係ないので除外して考えます）

アフィリエイトリンク・広告を忌み嫌っており、かつ、情報をタダ見する層

この層は基本的にどうすることもできません。

成果に直接結びつけるのではなく、間接的に貢献してもらいましょう。

アフィリエイトリンクの判別はつくが、仕組みはよく知らない層

この層にはprettylinkなどのプラグインでリダイレクトすることが有効です。

アフィリエイトの存在くらいは知っているけどアフィリエイトリンクの判別がつかない層

この層にはテキスト内のリンクが有効です。

アフィリエイトってなに？って層

この層にはボタンリンクでもテキスト内リンクでもどれでも構いません。

つまり、書いているページの内容によって（そのページを訪れる訪問者の属性によって）リンクを簡単に使い分けていくのが良いのではないかというのが結論です。

使い分けが面倒な場合は文章内で自然に出てくる部分はそのまま改行無しテキストリンクを使い、h2タグやh3タグの最後にボタンリンクを置くなんて感じでもいいかもしれません。

これは個人的な使い分けなのでこれが絶対的ルールな訳ではありません。あくまで参考程度に捉えてください。

最終的にはサイトのテーマや訪問者の属性を考えながら実際にいろいろと試して効果測定していくしかありません。

各リンクのメリット・デメリットと使い分けについてはこちらのページも参考にしてみてください。

リンクのボタン化のメリット

ボタン化することのメリットはリンクを目立たせることができる点とリンクのクリック領域を広げることができる点です。

まず、テキストリンク自体のメリットとして、バナー広告と異なり広告カットをされづらいという点があります。

Google Chromeなどのブラウザを使用しているのであればAdblock plusなどの拡張機能を入れている人も多いのではないでしょうか？

バナー広告やAdsenseだと広告カットされ、収益に繋がりませんが、テキストリンクであれば基本的にカットされません。

さらにそのテキストリンクを目立たせることができるのがボタン化です。

また、バナー等の画像広告は読み込みに少し時間が掛かるのに対して、上で紹介したCSSでのボタン化はバナーに比べて軽いです。

これらに加え、ボタン化することによってクリック領域を広げることも可能となります。

通常のアフィリエイトリンクではクリック報酬はもうほとんどありませんが、とりあえずリンク先を見てもらえる確率はあがるでしょう。

領域の広げ方によっては誤クリックを狙うこともできますが、これはユーザー側からするとウザイだけだと思うので辞めたほうが良いと思います。

まとめ

以上、いくつか方法を書いておきました。

どの方法を使う場合でもアフィリエイトリンクをボタン化する場合は提携しているASPの利用規約を熟読の上自己責任でお願いします。

ちなみに利用規約で禁止されているASPであっても個別に問い合わせると許可をもらえることもあります。

ボタンの色についてですが、赤やオレンジを使うことをオススメします。

これらの色はクリック率が少しあがるはずです。

ボタン化することの最大のメリットはリンクを強調できる点です。

メリットを最大限に活かしていきましょう！

『アフィリエイトリンクの改行をなくしたりボタン化する方法』へのコメント

名前:理系女子ママ投稿日：2019/07/04(木) 23:20:08 ID：ecca5633f 返信
はじめまして。
ボタン化のcssを紹介しているサイトでは大抵で囲われていて改行されてしまうので、のコードはまさに求めていた物でした！
早速使わせていただいています。紹介いただき本当にありがとうございます！
もしよければ教えていただきたいのですが、テキストリンクの文字の大きさを
少し大きくしたい場合は、どこにどのように追記すればいいのでしょうか？
お忙しい中恐れ入りますが、教えていただけると助かります。
よろしくお願いいたします。
名前:谷藤みはる投稿日：2017/06/24(土) 10:27:01 ID：ee018bb4e 返信
はじめまして、ＰＣど素人でアフィリエイトに挑戦してみようと思っています。cssなどわかるはずもなく、コピペＯＫで提供してくださっているかたのサイトを参考にさせていただいております中こちらにたどり着きました。
質問させていただきたいのですが、cssにコピペするだけでボタン化する方法で
稼ぐネット
アフィリエイトのコードもそのままぶち込んでＯＫとありますがどこにでしょう？
<a href="（アフィリエイトのコード）
でやってみました。ボタンも反映されリンク先にもとびましたが、コードを入れる場所が合ってるかという不安から、これできちんとＡＳＰに反映されているのか質問させていただきたく思います。よろしくお願いいたします。