ワードプレスのテーマにCocoonを使っている環境で、
楽天アフィリエイトのコードを直接記事に貼った時に
楽天アフィリエイトの周りに、
薄いグレーの線や、薄いグレーの背景が表示されてしまうことを
解決する方法です。
－－－
※2023年9月27日追記
以前は、そのコードで線と背景が消えることを確認した
違うコードを載せていたのですが、2023年9月現在
今までのコードでは背景は消えるけど枠線は消えないことに気づいて
別のコードに変更しました。記事内のコードは変更後のコードになっているので
そのまま利用していただいて、背景と枠線を消すことができると思います。
2023年9月27日現在、この記事のコードを使ってCocoonで運営している2つのブログで
薄いグレーの線と背景を消すことができることを確認しました。
－－－
CSSコードを使用します。
楽天のコード自体を編集するのは規約違反になるので
CSSを使って、線や背景を出ないようにします。
ステップ１ Cocoonの子テーマにCSSコードを記述する
ワードプレスのダッシュボードの左メニューにある、
外観→テーマエディターと進んだ先の
上の方に、
子テーマ用のスタイルを書く
/*必要ならばここにコードを書く*/
という項目があるので、そこに
以下のCSSコードを記述します。
/* 楽天アフィリエイトに使うCSS */
.abcdefg table tr { background-color: #fff; }
.abcdefg table td { border: none; }
上記コードのabcdefgの部分は自分で好きな名前をつけて良いので
半角のアルファベットでabcとか、mikanとかorangeとか好きな名前を入力して大丈夫です。
.abcとか、.orangeとか、頭に「.」をつけて書きます。
テーマエディターにコードを記述すると以下のキャプチャー画像のようになります。
.abcdefg table tr { background-color: #fff; }は背景を白くすることで表示されなくなるコードです、このコードだけだと以下の画像のように周りに線が残るので、
線も消すために、.abcdefg table td { border: none; }というCSSコードも記述して
合計2つのCSSコードを使っています。
/* 楽天アフィリエイトに使うCSS */という部分は、これが何のために入力したCSSコードなのか、自分用のメモなので無くてもいいし、/* 楽天のコード */、/* 背景と線を消す */など
自由に入力して大丈夫です。/* */で囲んで、その中に自分用のメモを書きます。
エディターに入力したCSSコードを
記事に楽天アフィリエイトを貼る度に呼び出して使うという感じです。
上記のコードは下準備といったところ。
ステップ２ 投稿記事にCSSを呼び出すコードを記述する
記事を書いて、楽天アフィリエイトを貼る時に
記事をビジュアルからテキストに切り替えて、以下のコードを貼ります。
<div class="abcdefg"> 楽天アフィリエイトのコード </div>
楽天アフィリエイトのコード、というところには
楽天アフィリエイトから取得したコードを貼ります。
上記コードを記事に貼りつけると以下のようになります。
外観→テーマエディターにCSSを入力する時にabcdefgを好きなアルファベットに変更した場合は
記事での呼び出しコードでも、変更したアルファベットを入力します。
mikanにしたなら、<div class=”mikan”>楽天アフィリエイトのコード</div>という感じです。
これで、エディターに入力した「薄いグレーの背景と枠線を消すCSS」が呼び出され、適用され
記事を公開した時に、変な背景と変な線は表示されなくなって、
楽天アフィリエイトのみが表示されるようになります。
記事の編集画面では点線が表示されるのですが、これは編集画面だけのもので
記事公開後では、点線は表示されないので
あれ？点線残ってるじゃん？って思った時は、
記事を公開するか、プレビューで記事公開後のページを確認してみてください。
コメント