Cocoonで楽天アフィリタグ貼り付けたら背景がグレーになる問題の解決法

楽天アフィリエイトの商品リンクのタグを普通にコピーして、WordPress（テーマはCocoon）のカスタムHTMLに入力して表示すると、なぜか背景がグレーになります。

Cocoonのフォーラム記事を調べてみると、どうやらこれはCocoonのスタイルシートが悪さしているようです。

上記の記事を参考に作業したら、無事この問題を解決できました。

その方法を紹介します。

次の手順で行います。

1.追加CSSにコードを書き加える

WordPress管理画面を「外観＞カスタマイズ＞追加CSS」と進みます。

そこに下記のコードを書き加えて保存します。

 /*楽天アフィリタグ貼り付け後、背景がグレーになる問題解決用*/ 
.raku table tr {
    background-color: #fff;
}
.raku table td {
    border: none;
}

そしたら楽天アフィリタグの前後を次のようなCSSコードで囲みます。

<div class="raku">
楽天アフィエイトタグ
</div>

これで公開すると、無事背景がグレーになる問題は解決します。

上記のコードを楽天アフィリタグを貼り付けるたびに手打ちするのも面倒ですし、どこかに保存しておいてその度にそれをコピーして貼り付けるのもめんどくさい。

そう思いましたので私の場合、次のようにしています。

Cocoonは任意のタグを登録できる「アフィリエイトタグ」機能がある

WordPress管理画面の「Cocoon設定＞アフィリエイトタグ」から、AdSenseコードやその他のコードを登録して、記事更新時に簡単に呼び出すことができます。

この機能を使って下記の作業をします。

Cocoonのアフィリエイトタグ1つ目に「楽天アフィリタグ開始」と名前をつけて、次を保存。

<div class="raku">

同じくCocoonのアフィリエイトタグ2つ目に「楽天アフィリタグ終了」と名前をつけて、次を保存。

</div>

後は記事更新時に次の順にタグを並べます。

そうするとソース上は次になります。

<div class="raku">
楽天アフィエイトタグ
</div>

あまりスマートではないですが、この方法ならコードを覚える必要もありませんので、私の場合こうしています。