ヨコノリライフ

アドセンス広告に上下の余白をつける方法!

アドセンスの記事内に入る広告などで記事内のコンテンツと余白がなくて見づらくなってませんか?
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で余白を付けたということです。

やってみたら意外と簡単!と思ったんではないでしょうか。

一つ注意してほしいのはテーマファイルを編集するときは必ずバックアップをとるということです。

万が一記述ミスなどでエラーが出たときにバックアップがあれば元に戻すのも簡単です。

バックアップをとってどんどんチャレンジしてみてくださいね!

TOPへ戻る
お問い合わせはこちら