アフィリエイト広告タグを改変なしでボタンに貼る方法(ブロックエディタ)Affinger
![](https://chironeko.com/wp-content/uploads/2021/08/affinger-site4.jpg)
![](https://chironeko.com/wp-content/uploads/2020/11/700408.jpeg)
広告タグを改変しなくても、ブロックエディタでボタンが作れるよ!
Affingerで広告タグを改変せずにボタンを作る方法を知っていますか?
クラシックエディタでできることは知られていますが、何とブロックエディタでもできるんです!しかもちゃんと光らせることもできますよ!
現状ではAffingerでボタンに広告を貼れない
![A8.netの「広告素材の改変」警告画面](https://chironeko.com/wp-content/uploads/2021/06/affinger-button13.jpg)
現状、ASPによっては「広告タグの改変は一切NG」としているところもあり、一部だけをボタンに貼るとASPの規約違反になってしまいますよね。
この状態ではAffingerではボタンに広告が貼れません。
「クラシックエディタ」では改変なしで広告を貼る方法はありましたが、ブロックエディタではできないと思われていました。
![](https://chironeko.com/wp-content/uploads/2020/11/365034.jpeg)
でも、Affinger でブロックエディタを使ってできるんです!
ボタン光らせたり、色をグラデーションにしたりすることもできます(ただし、アイコンは入れられません)。
Affingerのブロックエディタで、ボタンの見栄えを損ねずに、広告タグをそのまま貼る方法をご説明します。
広告リンクを改変しないでボタンに貼る方法(Affinger)
作り方は簡単に言うと、
- ボタン内の< a href ~> </a> を、広告タグと入れ替える。
- その際、ボタンブロックではエラーが出るので、カスタムHTMLブロックに入れ替える
ということです。これを一つ一つ丁寧に解説していきましょう。
ブロックエディタの投稿画面で、+ > STINGERカスタムボタン をクリックします。
![STINGERカスタムボタンを押す](https://chironeko.com/wp-content/uploads/2021/06/affinger-button1.jpg)
ボタンブロックが表示されます。
右上の歯車マークで設定項目を開きます。上の部分の「テキスト」と「アイコン」のカスタマイズは設定不要です。下に移動します。
![STINGERボタン画面](https://chironeko.com/wp-content/uploads/2021/06/affinger-button2-1.jpg)
「レイアウト・デザイン設定」より下の部分をカスタマイズしていきましょう。
ここでは、ボタン幅を「30%」、「光る演出」に設定します。
ボタン幅が30%に縮小され、ボタンが光るようになりました。
![STINGERボタンを設定する](https://chironeko.com/wp-content/uploads/2021/06/affinger-button3-1.jpg)
次にボタンの色を変更します。「背景色1」と「背景色2」を設定すると、ボタンをグラデーションに設定できます。
ここではグラデーションに設定しました。
![STINGERボタンを装飾する](https://chironeko.com/wp-content/uploads/2021/06/affinger-button4.jpg)
ボタンの設定が終わったら、… > HTMLとして編集 をクリックします。
![STINGERボタン、HTMLとして編集ボタンを押す](https://chironeko.com/wp-content/uploads/2021/06/affinger-button5.jpg)
HTMLが表示されました。次は、下にHTMLブロックを挿入します。
+ > カスタムHTML をクリックします。
![STINGERボタンをHTML表示する](https://chironeko.com/wp-content/uploads/2021/06/affinger-button6.jpg)
下にHTMLボックスが表示されます。
上のHTMLを、下のHTMLボックス内にすべてコピーします。
![STINGERボタンのHTMLを、カスタムHTMLブロックにコピー](https://chironeko.com/wp-content/uploads/2021/06/affinger-button7.jpg)
HTMLコードがコピーされました。
下にコピーされたHTMLコードのうち、
<a href= ............
.................</a>
の部分を広告コードに置き換える必要があります。
![STINGERボタンのHTMLがコピーされたら、一部を置き換える](https://chironeko.com/wp-content/uploads/2021/06/affinger-button8.jpg)
ASPのサイトに移動して、目的の広告コードをコピーします。
広告素材は、「テキスト」タイプを選択してください。
![ASPの画面で、テキスト広告素材をコピーする](https://chironeko.com/wp-content/uploads/2021/06/affinger-button9.jpg)
aタグの部分を、広告コードで置き換えます。
広告コードが貼られたら、プレビュー表示してみましょう。
![ASP素材を、カスタムHTMLにコピーする](https://chironeko.com/wp-content/uploads/2021/06/affinger-button10.jpg)
この時点では、ボタンの形が崩れているように見えますが大丈夫です。
右上の プレビュー > 新しいタブでプレビュー を選択します。
![広告タグをコピーした後の、カスタムHTMLブロック](https://chironeko.com/wp-content/uploads/2021/06/affinger-button11.jpg)
新しいタブでプレビューされました。
ボタンが装飾付きできちんと表示されています。
![作成したボタンをプレビュー表示する](https://chironeko.com/wp-content/uploads/2021/06/affinger-button12.jpg)
これでボタンの作り方は終了です。
この方法の解説(他のテーマで使える?)
この方法では、ボタンの<a>タグを、広告コード<a>と入れ替えることで、ボタン作成を実現しています。
Affingerのボタン(STINGERカスタムボタン)の場合、ボタン装飾はほとんどが<p>タグに入っているので、<a href>タグを入れ替えても、ボタンの装飾をある程度保つことができます。
ただしAffingerでも、「アイコン装飾」は<a>タグ内に入っているので、広告コードに張り替えるとアイコンは消えてしまいます。
ちなみに、JINやSANGOの場合、ボタン装飾はほとんど<a>タグに設定されているので、広告コードの<a>タグと入れ替えてしまうと、ボタンのビジュアルを同じに保つことができません。
したがって、この方法はAffingerでのみ可能な方法となります。