アフィリエイトのボタンリンクの作り方！

オリジナルのボタンや画像を作ってアフィリリエイトリンクを挿入したいという人はいませんか？

ちょっと公式サイトが用意してくれたバナーが自分のデザインと合わない・・。訴求力が足りないなんてことは良くあることです。きれいなサイトはリンクをオシャレに作っている所もありますからね。

図解していきますが、その前に一番大事な注意点を一つ！

情報系以外広告主の意図に反する画像広告を勝手に作るのは絶対NGってことです。

判断基準が分からない場合はまずお問い合わせで聞いてみましょう！

アフィリエイトのリンクボタンを作る手順

ではさっそくアフィレエイトのリンクをボタン化する方法を図解していきます。

基本は３ステップです。

ペー内の１商品に向かってリンクを飛ばしたい場合は商品リンクを利用

続いて、アフィリエイトのリンク先がホームページのようになっているケースです。

A8ですとアパレル・飲食系などが多く、購入率○○％なんて書いてあります。トップページに読者を飛ばしてしまうと、そこで購入に迷いが生じるので個別商品にリンクさせましょう。

まずは上の方は飛ばしたいページのURLを入れます。

下の方は商品画像の上で右クリックをして画像アドレスをコピーしたものを貼ります。

全てコピーして貼ればOKです。

CSSでオリジナルボタンにアフィリエイトリンクを入れる方法

続いてオシャレなボタンにアフィリエイトリンクを入れる方法ですね。

先に断っておくと、ワードプレステーマにはすでにボタン専用の機能がついているので、そこまで自作しなくてもいいですし、実際広告主が用意してくれたテキストリンクの方がなじみがあってクリック率が良かったりします。

自作の教材などを売りたい場合はボタンにこだわっても良いです。

また無料ブログでは使えないものが有ります。

この二つを守ったうえでやってください。

アフィリエイトボタンのデザインを提供してくれるおすすめサイト

サルワカさんのサイトはHTMLとCSSのコードが大量にあります。アフィリエイトのボタンデザインはもちろん。見出しや吹き出しデザインまであるので、是非とも参考にしてください。

サルワカさん・・本当にキレイ！

同じくジャジャーンさんのサイトもカラフルなオリジナルのボタンデザインを無償配布してくれてます。アフィリエイトサイトだけではなくオウンドメディアに使えるようなバリエーションが多いのが特徴的です。

ジャジャーンさん・・・なんと１２０個

他にもピンタレストやインスタでもオシャレなデザインを大量配布しているサイトが見つかります。海外サイトのデザインもきれいなのですが、日本語対応の方が説明が分かりやすいのではないかと思います。

CSS挿入の場所にボタン表示用のCSSをコピペして入れる

まずはcssと書かれている部分をそのままコピペしてブログのcssの一番下のところに貼り付けましょう！

プラグインはコレが番バグが出にくいと思います。

表示させたい部分にHTMLを入れる。

続いて投稿画面の方にHTMLモード（テキストモード）ではり最後にアフィリエイトリンクを入れれば完成です。

ビジュアルエディタに戻してリンクを入れましょう。

アフィリエイトのボタンの色やデザインでおすすめは？

アフィリエイトのボタンリンクの色や形についても質問がでたので追記します。

テキストリンクはグーグルに合わせて青が原則なのですがボタンリンクは「緑」「青」「赤」を使っている人が多いですね。これは信号と同じで、すでに人の意識の中に刷り込まれているという説もあります。

青や緑は進行なので行きたくなるとか、赤は血を表すから興奮を与え、購入意欲を高めるなどの通説も・・。

ABテストをしてほしいのですが、基本はサイトの見出しやヘッダーの色に合わせるか、迷った上記の３色で良いと思います。

形に関しても元々用意されている「丸おび」「スクウェア（四角）」ですね。

実はAIにボタンタグを作ってもらうことも可能！

いろいろ探しても、どうもぴったりのボタンがないっていう人はＡＩにＣＳＳとＨＴＭＬコードを書いてもらうなんてことも可能です。

このように「どんなデザインを書いて欲しいのかをお願いする」

後はそれを貼るためのHTMLコードをお願いする。

変えたい場所や形をしていするといくつかパターンを作ってくれます。ただ、ビジュアルで表示されないので上記の参考サイトのCSSも見ながらさくせいするのがおすすめ。

ワードプレスでアフィリエイトリンクをボタン化する方法

後はワードプレスですですね。ブロックエディタを使えればＡ８やアフィリエイトＢなどＡＳＰのリンクをボタン化することが可能です。

ただ、ボタン化するってことは公式が用意したバナーを一部変えることになりますので注意してください。

基本は「公式サイトはコチラ」くらいのボタンが良いです。

有料のテーマの場合は単にボタンの色や形を変えるだけではなく、光らせたり、グラデーションにしたり、複数の形にワンクリックでできます。

ボタンのバリエーションを増やすプラグインもありますが、ワードプレスのテーマやバージョンとの相性を考えないとうまく表示されずリンクボタンが「✖」になってしまうので注意してください。

自分でCSSで使うかテーマが用意してくれたものを使った方が更新時にエラーが出なくて済みますよ。

以上簡単ではありますがアフィリエイト画像へのアフィリエイトリンク挿入でした！