Cocoon大好き、まるをです
ブログを収益化する上でアフィリエイトをする方は多いと思いますが、アフィリエイトリンクをボタン化したいと思ったことはありませんか?
こんな風に色を付けたり光らせたりと、カッコ良くカスタマイズさせるとちょっといい感じですよね
実はこれ、Cocoonテーマでは超簡単に作成することが可能なんです
ということで今回はアフィリエイトリンクをボタン化する方法について分かりやすく解説していきたいと思います
早速いってみましょ~
アフィリエイトリンクって?
![まるを](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2019/09/27E39842-45C9-4961-B50E-C931335469BD-2-1.jpeg?w=1256&ssl=1)
つーかそもそもアフィリエイトリンクって何よ?
という人もいたりすると思うので、まずはそこから説明していきます
アフィリエイトリンクとは、アフィリエイターがASP(アフィリエイト・サービス・プロバイダ)から報酬を得るため自分の記事内に設置する、特別なパラメータが含まれたリンクのことです。アフィリエイトリンクを設置しなければ、報酬が発生することはありませんので、ASPに登録したアフィリエイターがまずおこなう作業が、このアフィリエイトリンクを自身のサイトに設置することになります。
出典:A8キャンパスより一部抜粋
よくブロガーさんが自分のブログに広告を貼ってたりしますよね?あれがアフィリエイトリンクです
アフィリエイトリンクは大きく分けて三種類のタイプがあり、
- バナー
- テキスト
- メール
この三つを用途によって使い分けます
そしてボタン化する場合、【テキスト】を使って作成していきます
それでは実際に作成手順を見ていきましょう
アフィリエイトリンクをボタン化する手順
まずはどのASPでも構わないので、テキスト広告をコピーして下さい
僕は今回例としてもしもアフィリエイトのテキスト広告を使用したいと思います
なおテキスト広告にはいくつか種類がありますが、【自由テキスト】と表示されているものがオススメ(理由は後述します)
コピーしてきましたか?
それではコピーしたテキスト広告を使ってボタンを作成しましょう
まず【ブロックの追加】より、【囲みボタン】を探しましょう
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2019/10/57e35dca2408d7daa01f1f702b9f6a79.png?resize=663%2C515&ssl=1)
【囲みボタン】は【Cocoonブロック】の中にあります
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2020/07/9aa239c1ad7d84696453f08a9a3d41d3.png?resize=661%2C523&ssl=1)
【囲みボタン】を選択すると、以下のようなものが出てくると思います
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2020/07/5f9dd220aeb9e812da2ae3083bef3511.png?resize=1024%2C385&ssl=1)
ここに先ほどコピーしたアフィリエイトリンクを貼りつけていきます
画像右側の【ブロック】に注目して下さい
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2020/07/4c7c2b16526c0fe3f29a79904f85b838.png?resize=292%2C407&ssl=1)
ここで囲みボタンに関する細かな設定を行うことができます
【リンクタグ・ショートコード】というのがあるので、そこにコピーしたアフィリエイトリンクを貼りつけましょう
すると…
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2020/07/1336644a31310007898378aa763b196f.png?resize=1024%2C461&ssl=1)
このように表示されます
右の赤枠に書いてある文字が、そのまま記事内に反映されているのが分かります
ここで注目して欲しいのが、上記で触れた【自由テキスト】となっている部分
広告コードの文字列は、通常変更してはいけないんですが、【自由テキスト】に関しては名前の通り自由に文字を変えることができます
この画像で言うなら【※もしもアフィリエイトトップへのリンク】の部分は変えることができませんが、その前の【自由テキスト】の文字のみ変えてOKということになります
なので例えば
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2020/07/5ed99198b059ad5b86f062775e06e016.png?resize=1024%2C419&ssl=1)
こーゆう謎の中二病テイストにしてもいいのです(する意味はないが)
ともあれ、自由テキストを使えば自分の好きなように文章を変えることができるのでオススメです
さて、このように作成したボタンですが、このままではカッコよくないので更にカスタマイズを加えます
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2020/07/d3a75c8ea314273c475bc5b41658da68.png?resize=271%2C568&ssl=1)
右側の部分をスクロールしていくと、このように囲みボタンを色々とカスタマイズすることができます
例えばこれを
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2020/07/1c56baec318ab9710a57e86ac7c4ae77.png?resize=258%2C525&ssl=1)
こんな感じに変えると…
![](https://i0.wp.com/maruwoblog.com/wp-content/uploads/2020/07/b0d679f3243abd19f433cbc235a2f7e5.png?resize=824%2C321&ssl=1)
こんなになります
実際の表示を見てみると
こうなるわけですね。キラッと光ってカッコイイ!
もう少し細かくカスタマイズできるので、色々試してみてください
まとめ
アフィリエイトリンクをボタン化する方法について説明してきましたが、いかがでしたでしょうか
テキスト広告もボタン化することで見栄えが良くなるので、是非利用して欲しいところ
自分好みにカスタマイズして、カッコイイボタンを作ってみて下さい
以上、まるをでした
それではっ
コメント