【最新】GoogleAdSenseのレクタングル広告を横並びで2つ並べる方法【ダブルレクタングル】

どうも、豆ゴロです。
本日はGoogleAdSenseのレクタングル広告を横並びにする方法をご紹介します！

ちなみにテーブルタグ使って並べているのをよく見ますが、表でないものにテーブルタグを使うのはよくないのと、そもそもマークアップ的に美しくないのでテーブルを使用せず良い感じにしてみます。
また、テーブルタグを使用すると一部解像度の低いスマホ端末でスクロールバーが出るので控えめに言って最低です。使用されている方は今すぐ書き換えましょう。

設置のイメージ
まずは広告を準備
- 広告を設定する前に規約違反に注意
- 広告タグにコードを追加する
ダブルレクタングルにするタグ
総括

設置のイメージ

そもそもダブルレクタングルってなんぞや？という方もいるかと思いますが、イメージ的にはこんな感じです。

このブログでも採用していますが、縦幅と横幅がほぼ同じぐらいの広告を2つ並ばせたものです。
色々なブログやサイトでもよく見ますよね。

この広告の並べ方、いろいろな人がやっているとおり効率が1つ並べるよりも良いのです。

まずは広告を準備

AdSenseの管理画面から広告ユニットを作成しましょう。

広告を設定する前に規約違反に注意

広告を作成する前に規約違反事項を確認。
実はPCサイトは横並びOKですが、スマホサイトでは連続してアドセンス広告を表示させるのはNGの為、スマホで閲覧した場合は片方の広告は非表示にして1つだけ広告を表示させるという方法をとらなければいけません。

スマホでサイトを見た際に片方の広告をスタイルシートの「display:none」タグで隠すという方法。
このブログでも採用しています。

更にここで落とし穴があるのですが、AdSenseの広告ユニットを選択する際にレクタングルとレクタングル(大)を選んでいる場合、display:none;タグで広告を非表示にする方法は規約違反になります。

ではどうするのか？
なんと驚いたことにレスポンシブ広告なら非表示にしてもOK！

という訳で広告ユニットはレスポンシブ広告を選びましょう

横並びで2つ広告を配置をするのでレスポンシブ広告のユニットを2つ発行しておきましょう。

広告タグにコードを追加する

レスポンシブ広告を作成したあと画面に広告のタグが表示されますが、このタグだけだと上手く広告を並べる事が出来ません。

発行した広告のコードを少し改変します。
以下の赤字の部分を追加修正してください。

■1つ目の広告コード
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– example_gad_1 –>
<ins class=”adsbygoogle”
style=”display:inline-block;width:300px;height:250px“
data-ad-client=”ca-pub-XXXXXXXXXXXXX”
data-ad-slot=”XXXXXXX”
data-ad-format=”auto”></ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>

■2つ目の広告コード
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– example_gad_1 –>
<ins class=”adsbygoogle gad_size1 ad_right_none“
style=”display:block”
data-ad-client=”ca-pub-XXXXXXXXXXXXX”
data-ad-slot=”XXXXXXX”
data-ad-format=”rectangle“></ins>
</ins>
<script>
(adsbygoogle = window.adsbygoogle || ).push({});
</script>

ちなみに各広告タグの1行目のjsを読み込むコードはサイト内に1つ入っていれば不要。
大抵の方がAdSenseの審査でタグ埋め込んでいるはずなので消しちゃってokです。いくつも設定していると表示速度が遅くなる為、1つ以外は全て削除しましょう。
ページの表示速度が早くなります。

ダブルレクタングルにするタグ

少し昔はfloatタグを使う方法が流行っていましたが、直近はdisplay: flex;タグを使用するのが流行りらしいので今回は流行りの方法で記載しています。

広告をいれたい場所に以下のコードを追加

<div class="rectangle_ad">
 <div>1つ目の広告ユニットコード</div>
 <div class="ad_right">2つ目の広告ユニットコード</div>
</div>

スタイルシートに以下のコードを追加

.gad_size1 {
 width: 300px !important;
 height: 250px !important;
}
.rectangle_ad {
 display: flex;
 display: -webkit-flex; /* Safari用 */
 justify-content: space-around;
 -webkit-justify-content: space-around; /* Safari用 */
}
@media screen and (max-width: 680px) {
 .ad_right, .ad_right_none{
 display: none;
 }
}

なんともスマート！
めっちゃくちゃ簡単です。