シェアが増えると有益情報も増える不思議なサイトです

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

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

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

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

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

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

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

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

お知らせ
プライムが無料で使えます
トップページをリニューアルしました

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

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

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

のように貼ればOKです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この違いですね。

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

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

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

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

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

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

ここでは、

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

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

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

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

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

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

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

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

文字も適宜変更します。

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

こう入力すれば

稼ぐネットトップページ

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

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

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

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

A8.net

こんな感じです。

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

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

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

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

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

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

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

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

    この方法でできること

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

などです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今アレが安い?タイムセールチラ見

その他の方法

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

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

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

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

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

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

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

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

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

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

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

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

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

リンクの使い分け

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

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

  • アフィリエイトリンク・広告を忌み嫌っており、かつ、情報をタダ見する層
  • この層は基本的にどうすることもできません。

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

  • アフィリエイトリンクの判別はつくが、仕組みはよく知らない層
  • この層にはprettylinkなどのプラグインでリダイレクトすることが有効です。

  • アフィリエイトの存在くらいは知っているけどアフィリエイトリンクの判別がつかない層
  • この層にはテキスト内のリンクが有効です。

  • アフィリエイトってなに?って層
  • この層にはボタンリンクでもテキスト内リンクでもどれでも構いません。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

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

↓フォローしとく?LINE@でお得な情報ゲット!