【はてなブログ】記事下にgoogleアドセンスの広告を横並びに２つ配置したいときのCSS

googleアドセンスを　はてなブログのブログ記事下に配置したときのCSSメモです。

googleアドセンスでは、レスポンシブ用の広告が簡単に利用できるようになっているので、そちらを利用している方も多いかもしれません。私の場合は少し古い手法ですが、ブログ記事下に横並びにgoogleアドセンスを配置したかったのでやってみたことをメモ書きとして残しておこうと思います。

【今回やりたいこと】

パソコンの場合には、横並びに2つgoogleアドセンスを配置
スマホの場合には、1つのみgoogleアドセンスを配置
広告は固定幅で 300px × 250px

手順

googleアドセンスの広告枠を2つ作成する
レスポンシブ広告コードを修正する
HTMLを管理画面から記事下HTML へ貼り付ける
CSSを管理画面からデザインCSS へ貼り付ける

手順１　googleアドセンスの広告枠を2つ作成する

googleアドセンスの固定幅の広告を２つ作成します。

googleアドセンスの管理画面から、広告 → ディスプレイ広告を選択します。

広告ユニット名を入力します。わかりやすいように「記事下左」とつけました。広告ユニット名は任意ですので、わかりやすい名前をつけてください。形は「スクエア」を選択します。

広告サイズは「固定」を選択し、幅300、高さ200を入力してコードを作成します。

作成したコードから、パブリッシャーIDと広告ユニットIDをメモします。

パブリッシャー ID（例: ca-pub-1234567890123456）
広告ユニット ID（data-ad-slot）（例: 1234567890）

同様の手順で、「記事下右」を作ります。同様に作成したコードから、パブリッシャーIDと広告ユニットIDをメモします。

手順２　レスポンシブ広告コードを修正する

左側の広告はスマホでもパソコンでも表示されるようにし、右側の広告はスマホで非表示になるように、レスポンシブ広告コードを編集します。

サンプルコード

<!-- google adsence -->
<p class="google_ads_links">スポンサーリンク</p>
<div class="google_ads_articles">
  <div class="ads_left">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
    <!-- individual_articles_left -->
    <ins class="adsbygoogle individual_articles_left"
          style="display:block"
          data-ad-client="ca-pub-1234567890123456"
          data-ad-slot="8XXXXX1">
    </ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  </div>

  <div class="ads_right">
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
      <!-- individual_articles_right -->
      <ins class="adsbygoogle individual_articles_right"
            style="display:block"
            data-ad-client="ca-pub-1234567890123456"
            data-ad-slot="8XXXXX1">
      </ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
  </div>
</div>

サンプルコードを元に、手順１で作成したパブリッシャーIDと広告ユニットIDに変更します。

ca-pub-1234567890123456 をパブリッシャー ID に置き換えます。
8XXXXX1 を広告ユニット ID で置き換えます。２か所あるので、それぞれに左側と右側の広告ユニットIDを設定します。

出来上がったコードを、「管理画面」→「デザイン」→「カスタマイズ」 →「記事」→「記事下HTML」に貼り付けます。

手順３　CSSを管理画面からデザインCSS へ貼り付ける

/* google_ads_articles */
.google_ads_links {
  text-align: center;
}
.google_ads_articles {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .google_ads_articles {
    justify-content: space-between;
  }
}

.individual_articles_left {
  width: 300px; height: 250px;
}

.individual_articles_right {
  display: none;
}
@media(min-width: 768px) {
  .individual_articles_right {
      width: 300px; height: 250px;
  }
}