こんにちは。まめです。
今回はWordPressのテーマ「THE THOR」の使い方として、アフィリエイトリンクをボタンにする方法を紹介します。
アフィリエイトリンクはテキストタイプのものや、バナーになっているものがASPのサイトからは利用できますよね。
しかし、バナーはいかにもな広告ですし、テキストだとあまり目立ちません。
そんなときにテキストリンクを「ボタン」にすることで、広告っぽさも軽減され、テキストだけよりは目立つようになります。
他のサイトなんかでも良くみる形式で、見やすいですよね。
なので、どうやって、ボタン化をするかを紹介していきます！
しかし、結論を先に言うとTHE THORの機能を使ってボタン化するのはグレーなやり方になってしまうので、HTML、CSSを編集してボタン化する方法も併せて紹介します。
アフィリエイトリンクを編集するときの注意
まずは大前提として、アフィリエイトリンクを編集するときの注意点です。
普通のリンクであれば、気にする必要はありませんが、アフィリエイトリンクはASPから提示されているコードであるため注意が必要です。
基本的にはアフィリエイトリンクのコードを編集することは規約にて禁止されています。
なぜかというと、ASPにて取得できる広告コードは広告主が掲載してほしい形でが提示されているため、勝手に改変してしまうと、広告主の意図しない広告になってしまうわけですね。
なので、例えば、バナータイプの場合に画像を変更したり、テキストリンクの場合にテキストの文言を変更することは禁止されています。
※テキストリンクは「自由テキスト」になっているものもあり、その場合は自由なテキストに変えることができます。
ではボタンにするのはどうなのかという話しですね。
大手ASPの見解は次のような感じです。
| ASP | 広告素材の改変について |
|---|---|
| A8.net | バナー画像の変更、テキスト広告の文言の変更、広告コードからリンク部分のみを使用すること等が該当します。 |
| afb | フォーイットが別途定めた場合を除き、クライアントまたはフォーイットから提供されたリンク（広告素材およびそのリンクコードを含む）をフォーイットに無断で改変すること。 ※フォーイットはafbの運営会社 |
| もしもアフィリエイト | マーチャントから提供された広告素材、広告リンク等を、当社またはマーチャントの許可なく改変すること。 ※マーチャントはもしもアフィリエイトの運営会社 |
このように規約で広告素材のコードを改変することは禁止されていますね。
これ以外のASPについては、各ASPの利用規約を確認してみてください。
しかし、コード自体を改変せずにボタン化をする方法があります。その方法を使えば、おそらく問題ありません。
アフィリエイトリンクをボタン化する方法
では、本題のアフィリエイトリンクをボタン化する方法です。
今回はプラグインを利用する方法は省きます。
HTMLとCSSを編集する必要がありますが、プログラミングの知識がなくても大丈夫です。
最初にも言いましたが、THE THORの機能を使ってボタンを作ることはグレーなやり方になってしまいます。
THE THORの機能を使う方法
まずはTHE THORのボタン化の機能を使う方法です。
ただ、正直この方法は実施して良いか怪しいので自己責任でお願いします。
THE THORには標準機能としてボタン化をする機能がありますね。
こんな感じのやつです。
普通のリンクをつくるのであれば、テキストを好きな文言にして、リンクのURLを貼れば良いですが、アフィリエイトリンクの場合は先にも紹介したようにいろいろな注意が必要です。
まずは上のボタンのHTMLのコードを見てみましょう。
<div class=”btn btn-left”><a class=”btn__link btn__link-primary” href=”/”>リンクテキスト</a></div>
<div class=”btn btn-left”>の部分がテキストの装飾をしているコードになります。
今回は「btn btn-left」という属性をテキストに付加していますね。
この属性をどのような装飾にするかをCSSで決めています。
またhref=”/”の” “の部分がURLのリンクになります。上のボタンはリンクを貼っていないので、/しか入っていませんね。
では続いて、A8.netの広告コードを見てみましょう。
<a href=”https://px.a8.net/ ○○○ ” rel=”nofollow”>【THE THOR（ザ・トール）】</a>
<img border=”0″ width=”1″ height=”1″ src=”https://www15.a8.net/ ○○○ ” alt=””>
○○○の部分は一応隠しています。
このherf=”https://px.a8.net/ ○○○ “の部分がアフィリエイトのリンクになります。
表示するとこんな感じですね。
そして、これをTHE THORの機能でボタン化するとこんな感じになります。
できたじゃん！と思いますよね。
しかし、この方法だとリンクがなくなっています。
コードを見てみましょう。
<div class=”btn btn-left”><a class=”btn__link btn__link-primary” href=”/”>【THE THOR（ザ・トール）】</a></div>
<img src=”https://www15.a8.net/0.gif?a8mat=3BDO67+67V08I+4CL8+5YJRM” alt=”” width=”1″ height=”1″ border=”0″ />
このように、href=” “の” “のリンクがなくなっていますね。
なのでこのボタンをクリックしてもどこにも飛びません。
では、どうするかというと、広告コードのherf=”https://px.a8.net/ ○○○ “の” “の中のURLを上のコードのhref=” “の中に入れることで、商品のページに飛ばすことができます。
けれど、これって、コードの改変に当たるんじゃないの？と思いますよね。
正直、僕自身もこのやり方がコードの改変に該当するかどうか、利用規約を読むだけでは微妙な気がしています。
特にA8.netの規約ではURLのコードを抜き出すというのは禁止と書かれているので、この方法は黒に近いグレーかなと思っています。
なので、この方法であればTHE THORの機能を使って、ボタン化できますが、この方法を使うのは自己責任でお願いします。
ちなみに僕はこの方法は怖いので次に紹介する方法を使っています。
HTML、CSSを編集してボタン化する
では、どうやってボタン化するかです。
これはTHE THORの機能を使わずにHTML、CSSを編集してボタン化します。
まずは、もう一度、THE THORのボタン化した時のコードを見てみましょう
<div class=”btn btn-left”><a class=”btn__link btn__link-primary” href=”/”>リンクテキスト</a></div>
そして、<div class=”btn btn-left”>の部分で属性をテキストに付加して、CSSでこの属性をどのような装飾にするかを決めていると説明しましたね。
なので、<div class=”btn btn-left”>広告コード</div>とすることで、広告コードに属性をつけて、CSSで装飾を決めることで、ボタン化をすることが可能です。
ちなみに「btn btn-left」は単なる名前なので、なんでも良いのですが、CSSと紐づく名前のため、装飾を変えたい場合は「btn btn-left」からは変える必要があります。
今回は「btn-1」という名前に変えてみます。
そしてテキストの編集で、次のようにHTMLを編集しましょう
1 2 3 4 5 | <div class="btn-1"> <!--広告コードを貼り付け--> </div> |
続いてCSSを追加します。
WordPressのダッシュボードから外観＞カスタマイズ＞追加CSSをクリックします。
この追加CSSの中に次のコードを貼り付けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .btn-1 { background-color: #61c359; color: #fff; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2); font-weight: bold; border-radius: 4px; max-width: 80%; margin: 0.5em auto; padding: 0; text-align: center; line-height: 1.4; transition: all .2s ease; opacity: 0.8; } .btn-1:hover { box-shadow: none; transform: translateY(2px); } .btn-1 a { text-decoration: none !important; color: #fff !important; display: block; margin: 0; padding: 0.5em; } .btn-1 > img { float: left; } .btn-1::after{ content: ''; clear: left; } |
これでbtn-1という属性の装飾を決めたことになります。
そしてこれを表示するとこんな感じ。
装飾については、CSSのコードを編集することで、色や形などは好きに変更できますが、これは知識がないと難しいので、最初はネットから拾ってくるのが良いですね。
ちなみに上で紹介したコードは下のサイトのものを活用しています。
Astro description…
この方法であれば、広告コード自体は特に改変しておらず、属性を付加しただけなので、コードの改変には該当しないと思います。
まとめ
いかがだったでしょうか。
正直、THE THORの機能で普通にボタン化できないのは残念ですね。
せっかくならTHE THORの機能を使ってボタン化したいと思い、いろいろ検索をしてみたのですが、答えにたどり着くことはできませんでした。。
しかし、HTML、CSSでの編集もなれれば、複雑な作業ではないので、これを機会に多少、HTML、CSSの知識を深めていくのも良いですね。
ちなみに、僕自身もプログラミングやTHE THORについて、豊富な知識があるわけではないので、他の方法などを知っている方がいれば教えてください。