アフィリエイトリンクをボタン化する時に注意すべき2つのこと

アフィリエイトリンクのボタン化に注意が必要だと警告していることをイメージした黄色信号の画像

リンクのボタン化はCSSを使ったり、プラグイン(WordPressの場合)などを使えば簡単にできます。

ただしアフィリエイトリンクをボタン化するときは少しだけ注意が必要です、

なぜなら少しの改変がASP規約に違反してしまう恐れがあるため

ここではアフィリエイトリンクをボタン化する方法とその注意点についてまとめました。

アフィリエイトリンクをボタン化する方法は簡単

どの環境でブログやサイトを運営しているかに関わらず、アフィリエイトリンクをボタン化するにはCSSを使うのが一番簡単です。

そのやり方を説明すると次の通り

まず次のようなアフィリエイトリンクがあるとしましょう。

<a href="https://example.com/ref?id=1234567890" target="_blank" rel="nofollow">これはサンプルリンクです</a>
<img width="1" height="1" src="https://example.com/0.gif?id=1234567890" alt="">

この状態だと普通にテキストだけのリンクが表示されるはずです。

これをボタン化するにはまず全体をdiv要素で囲みます。

<div class="my_link_btn">
<a href="https://example.com/ref?id=1234567890" target="_blank" rel="nofollow">これはサンプルリンクです</a>
<img width="1" height="1" src="https://example.com/0.gif?id=1234567890" alt="">
</div>

黄色でマーキングした所が新たに追加した部分

div要素に class="my_link_btn" というオリジナルのクラス名を付けるのがポイントです。

アフィリエイトリンクのリンク(a)タグやimgタグを直接改変する必要はありません。

そうしたら今度は次のCSSをサイト・ブログ全体に追加

.my_link_btn{
  display: inline-flex;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transition: box-shadow 0.5s;
  border-radius: 5px; 
  background: #f33; 
  font-weight: bold;
  box-shadow: 0px 3px 6px #855;  
}
.my_link_btn a{
  color: white;
  text-decoration: none;
  padding: 15px 18px; 
}
.my_link_btn:hover{
  box-shadow: 0px 9px 12px #855;  
}

このようなCSSを全ページ共通で埋め込んでおけば先ほどのアフィリエイトリンクがボタン化されます。

そして実際にボタン化されたリンクは次のような感じ

ボタン化されたアフィリエイトリンクの例

四角型のシンプルなデザインです。

またマウスなどでホバーしたときの見た目は次のような感じ

ボタン化されたアフィリエイトリンクをホバーしたときの様子

ホバー時は影を付けて浮かび上がるようなデザインにしました。

文字色とか背景や、ボタンの形は各自でお気に入りのものに変更してください。

ちなみにWordPressの場合なら今使用中のテーマのstyle.cssにこのCSSを貼り付けることで全ページに埋め込むことができます。

あるいはテーマに依存せずにCSSを埋め込みするなら次記事で紹介した「Custom CSS and JS」プラグインを使うのもおススメです。

WordPress記事内にカスタムCSSやJSを簡単に埋め込む方法
カスタムCSSやjavascriptをWordPressサイトで組み込みたい場合、「Simple Custom CSS and JS」というプラグインが使いやすくておすすめです。ここではこのプラグインの導入・使い方からWordPressでカスタムCSS・JSを扱うときの注意点まで解説します。

以上がアフィリエイトリンクをボタン化させる方法

リンクに少し手を加え、サイト全体にボタン化用CSSを追加するだけです。

アフィリエイトリンクをボタン化する時の注意点

内部リンクなど普通のリンクをボタン化する場合は何も問題はありません。

しかしASPから取得したリンクをボタン化するときは次の2点に要注意

  • ASP規約に違反していないか確認する
  • リンクをボタン化するツールは使わない

この2つの注意点について詳しく説明すると次の通りです。

1. ASP規約に違反していないか確認する

まず今利用しているASPでリンクの変更が認められているか確認しましょう。

大抵のASPではテキストや画像の変更は認められていませんが、フォントや太字などの見た目的な装飾については許可されています。

なのでほとんどの場合、ボタン化しても特に問題はないはずです。

しかし全てのASPでそうとは限らないのでボタン化前に規約を確認するのが安全

ちなみに主要ASPのリンク改変についての見解は次のようになっています。

ASP リンク改変への見解(要約)
A8.net 広告素材改変は基本禁止。ただしテキスト部分の装飾など元コードに影響のない改変はOK
もしもアフィリエイト タグ書き換えは全く問題なし。アフィリエイトリンクのURLのみを利用してもOK
アクセストレード バナー画像やテキスト変更など広告表現の変更をともなう改変は禁止。元コードに影響を与えない改変は恐らくOK
afb(アフィb) 広告のリンクコード改変は禁止(規約にもこれだけしか書いていない)
バリューコマース コードの改変は不可。ただしトラッキングなどに影響が出ること承知なら改変可能とも読み取れる
TCSアフィリエイト 広告原稿は文言・画像の改変は一切禁止。ただし広告表現に影響を与えない範囲なら恐らく改変OK
JANet(ジャネット) リンクテキストやバナー画像の変更は禁止。元コードに変更を与えない改変なら恐らくOK

ざっと見解を簡単にまとめるとこんな感じです。

より詳しい見解や改変OKの基準については次記事でまとめたので是非ご覧ください。

アフィリエイトリンク改変はどこまでOK?主要ASPの見解まとめ
アフィリエイトリンクを取得して貼り付けるときリンク改変していいかの判断に迷うことはありませんか?ここでは8つの主要ASPがリンク改変にどういう見解をしているのかと改変OKな範囲についてまとめました。

ほとんどのASPではテキストやバナー画像の改変が禁止と書かれているので、ボタン化については問題ないと思われます。

ただし afb(アフィb)バリューコマースTCSアフィリエイト については規約的にNGな可能性があります。

なので心配なら各ASPに問い合わせしてみてください。

2. リンクをボタン化するツールは使わない

リンクをボタン化するツールやWebサービスは探してみると結構あります。

例えばWordPressの場合なら「Max Buttons」がリンクボタン作成に便利なプラグイン

おしゃれなリンクボタンが簡単に作れるWPプラグイン「MaxButtons」の使い方
ページ内に設置したリンクのクリック率を上げたい場合に有効なのがリンクをボタン形式にすることです。ただボタン形式のリンクを作る場合はCSSなどの知識が必要になるので自力で作ろうとするとかなり手間と時間がかかります。そこで便利なのがリンクボタンを時間をかけず簡単操作で作成する「MaxButtons」というプラグインです。ここではこのプラグインの導入と使い方について紹介します。

特別な知識が無くても簡単な操作で作れるのがツールを使う利点ですよね。

ですがアフィリエイトリンクのボタン化にはツールを使わないほうが安全です。

なぜならツールやプラグインを使った場合、

  1. リンクURLを入力
  2. ボタンテキストを入力
  3. リンクボタンを作成

という風にリンクURLとボタンテキストを手打ちで入力しなければならないため

ASP規約に違反しないためにはリンクURLだけでなく、ボタンテキストもASP側で用意されているコードと同じ文言にしないといけません。

そうなるとボタンテキストの打ち間違えで規約違反になる恐れもあるため、おススメできないという訳です。

なのでリンクボタン作成ツールは使わない方が安全だと思います。

そもそもツールでボタン化したリンクは元コードと全く違うものになるので、ASPによっては即違反になることもあるかもしれません。要注意です。

まとめ

以上アフィリエイトリンクをボタン化する方法と注意点についてでした。

ASP規約的にもテキストやバナー画像の改変には当たらないので、特に違反することはないと思います。

ただしコード改変に厳しいASPでは許可されていないこともあるので、心配なら自分の利用しているASP規約を確認したり問い合わせしてみるのがおススメです。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press