【WordPress】Googleアドセンスをh2タグの前に貼ろうとしたら広告とh2タグがぴったりくっついてしまうので対処した話。

このブログにGoogleアドセンスを貼ろうとした際に発生した問題です。

色々なサイトで「h2タグの前に貼ると収益がアップしやすい」ということを信じて自動的に広告が入るようにphpコードを挿入してみました。

コードは以下の通りです。

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
// 本文中にアドセンスコードを自動挿入する
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
function add_ads_before_h2($the_content) {
if (is_single()) {
$ads = <<< EOF
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- WordPress広告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOF;
$h2 = '/^.+?<\/h2>$/im';//H2見出しのパターン

if ( preg_match_all( $h2, $the_content, $h2s )) {
  if ( $h2s[0] ) {
    
    // 1つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][0] ) {
      $the_content  = str_replace($h2s[0][0], $ads.$h2s[0][0], $the_content);
    }

    // 3つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][2] ) {
      $the_content  = str_replace($h2s[0][2], $ads.$h2s[0][2], $the_content);
    }

    // 5つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][4] ) {
      $the_content  = str_replace($h2s[0][4], $ads.$h2s[0][4], $the_content);
    }

    // 7つ目のh2見出しの上にアドセンス挿入
    if ( $h2s[0][6] ) {
      $the_content  = str_replace($h2s[0][6], $ads.$h2s[0][6], $the_content);
    }
    $the_content .= "<p></p>";
  }
}
}
return $the_content;
}
add_filter('the_content','add_ads_before_h2');

で、やってみたところ、無事Googleアドセンスは表示されたのですが、何故か広告と見出しがくっついてしまう現象が発生しました。

↓こんな感じ。

最初にやってみたこと。

で、すぐ頭に出てきたのは、「h2の上にマージンを入れてみるか」でした。

margin-top: 15px;

もうお分かりの方もいらっしゃると思いますが、うまく行くはずありません。

h2タグはインライン要素なので上下マージンは無効なのです。

cssの基本中の基本ですね。

で結局どうしたか。

Googleアドセンスのスクリプトタグの最後に<p>タグを入れてみて解決（？）しました。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- WordPress広告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- ↓ここ -->
<p></p>