AFFINGER5はかわいいボタンリンクが特徴のひとつ。
アフィリエイトリンクもかわいいボタンひとつであっという間にかわいくなっちゃう！！
ですが、AFFINGER5で使うボタンってショートコードなので、アフィリエイトリンクを改変しないと利用できない気がしたんですよね。
アフィリエイトリンクって改変したらダメだと思うんだけど、アフィリエイトリンクをボタンにするのってどうしたらいいのかな…？
と思って調べてみたら、divタグで囲むってワザを見つけたので備忘録がてら残しておきます。
アフィリエイトリンクは改変不可、もしくはしない方がいい
アフィリエイトリンクってたいてい「リンクURL」と「計測用コード」の2つから成り立っていますよね。
例えば某ASPのアフィリエイトリンクがこちら。
アフィリエイトURL
<a href="★①リンクURL★" target="_blank" rel="nofollow">お金持ちになれる財布</a>（なぜかここは改行されている）
<img border="0" width="1" height="1" src="★②計測URL★" alt="">
でもAFFINGER5のキラリと光るボタンってショートコードになっていて、ひとつのURLしか入力できなさそうなんですよね…。
キラリと光るボタンのコード
[st-mybutton url="★URLをここに入力する★" title="お金持ちになれる財布" rel=""～]
もしかしたらショートコードにURLを2つ表示させる方法があるのかもしれませんが、わたしでは分かりませんでした。
URLには★①リンクURL★を貼っておけばとりあえずリンクはされると思いますが、計測用のURLがないとわたしのところからリンクを踏んだと証明できず、却下される可能性もあるのでできれば避けたいところ。
それに一部のASPは利用規約で「タグ改変NG」となっているので、万が一それで強制退会（なる可能性はあまりないと思うけど）にでもなったらイヤです。
divタグで囲む方法なら100%安心
ということで調べてみたら、アフィリエイターさんたちはどうやらdiv要素でアフィリエイトリンクを囲むというやり方でやっているようです。
なるほどー。
divタグで囲む方法なら、
<div class="xxx"><a href="★リンクURL★" target="_blank" rel="nofollow">お金持ちになれる財布</a>（なぜかここは改行されている）
<img border="0" width="1" height="1" src="★計測URL★" alt=""><div>
こんな感じでASPのコードをまるっとそのまま貼るだけということですね。
AFFINGER5のdivのボタンは「ランキングボタン」
AFFINGERのボタンでショートコードではなくdivのボタンは「ランキングボタン」です。
ショートコードボタンたちにひっそりと存在している「ボタンA」「ボタンB」がランキングボタンに当たります。
ランキングボタンの色を変更したい場合は
step
1ダッシュボード→「ランキング管理」をクリック
step
2「CSS」を選択
step
3「リンクボタン」の項目でカスタマイズ
ここでボタンの色や文字色の変更ができます。
変更できる色は4種類です。
- リンクの文字色
- ボタン上部の色
- ボタン下部の色
- ボタンの影の色
ボタンはグラデーションっぽくできるようで、2色が選択できるようになっています。
あとはボタンができたらdiv要素でアフィリエイトリンクを囲みましょう。
ちなみに光るボタンのリンクを使いたいんですが、やっぱりショートコードを使っているからムリなんですかね(´・ω・`)
分かるよ～っていう親切な方、教えてください✨
