アドセンスの記事内に入る広告などで記事内のコンテンツと余白がなくて見づらくなってませんか？
web制作の知識がなくてもこれから紹介することをそのままコピペすれば余白を付けることができますよ！
余白を付けるコード
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-############" crossorigin="anonymous"></script>
<div class="ads-margin">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub- ########" data-ad-slot="#########" data-ad-format="auto" data- full-width-responsive="true">
</ins>
</div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>今回余白を付けたコードです。
説明していきますね！
single.phpのコードを編集する
記事内の広告ということで、single.phpというファイルを編集します。
WordPress管理画面から編集する場合は
外観 ＞ テーマファイルエディター ＞ single.php
を選択して下記のコードを探してください。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-############" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub- ########" data-ad-slot="#########" data-ad-format="auto" data- full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>下記のコードを見つけたら
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub- #################" data-ad-slot="##########" data-ad-format="auto" data- full-width-responsive="true">
</ins>のコードを他のクラスで囲いCSSで余白を追加します。
<div class="ads-margin">
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub- ###############" data-ad-slot="###########" data-ad-format="auto" data- full-width-responsive="true">
</ins>
</div>私の場合は<div class=”ads-margin”></div>というクラスを付与し、このクラスの中に<ins>〜</ins>を入れました。
クラス名のmarginとは余白のことです。
CSSで余白を付ける
ads-marginと付与したクラスにCSSで余白を付けます。
こちらもWordPress管理画面から編集する場合は
外観 ＞ テーマファイルエディタ ＞ CSS ＞ style.css
を選択し、分かりやすく一番下にでも下記のコードを追加します。
（分かりやすくとはコードを書くことに慣れていない人にとってという意味です）
.ads-margin{
margin: 40px 0;
}要素（広告）の上下40pxの余白を付けるという意味です。
まとめ
今回は対象の広告にクラスを付与し、付与したクラスにCSSで余白を付けたということです。
やってみたら意外と簡単！と思ったんではないでしょうか。
一つ注意してほしいのはテーマファイルを編集するときは必ずバックアップをとるということです。
万が一記述ミスなどでエラーが出たときにバックアップがあれば元に戻すのも簡単です。
バックアップをとってどんどんチャレンジしてみてくださいね！
タグ
