今日もWEBで生きている

略して「WEB生き」。豆ゴロが思いのまま書き殴ります。

【GoogleAdSense】ブログでレクタングル広告を横並びで並べる方法【ダブルレクタングル】

f:id:mamegoro:20170912180731p:plain

どうも、豆ゴロです。
本日はGoogleAdSenseのレクタングル広告を横並びにする方法をまとめていきます!

ちなみにテーブルタグ使って並べているのをよく見ますが、表でないものにテーブルタグを使うのはよくないのと、そもそもマークアップ的に美しくないのでいい感じにしてみます。

スポンサーリンク

 

設置のイメージ

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

f:id:mamegoro:20171018185404p:plain

よく2つバナーが並んだ広告をみると思いますが、アレです。
この広告の並べ方、いろいろな人がやっているとおり結構効率がいいです。

まずは広告を準備

そんな訳でAdSenseの管理画面から広告を選んでいきます。

ちょっと待ってそれNGだよ

よく他のサイトで紹介されているのが、PCサイトは2つ並び、SPサイトは2つ並びの1つをCSSの「display:none」で隠すという方法。
これ実はAdSenseの広告ユニットでレクタングルとレクタングル(大)を選んでいる方は規約違反です。

じゃあどうするのか!
なんと!!!レスポンシブ広告ならOK!!


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

f:id:mamegoro:20171018185358p:plain

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

おまじないを書く

という訳でレスポンシブ広告を選んだわけですが、これだけだと上手く広告を並べられないので、発行した広告のコードにおまじないを追加します。

■1つ目の広告コード

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_gad_1 -->
<ins class="adsbygoogle gad_size1"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXX"
data-ad-slot="XXXXXXX""
data-ad-format="rectangle"></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です。軽くなります。

横に並べる方法

ちょっと昔はfloatタグを使ってclaer-fixで解除みたいなのが流行ってたのですが、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;
}
}

なんともスマート!
最後の@media screen and (max-width: 680pxで、レスポンシブページで広告を1つしか表示させない設定にしているので、レスポンシブではなくPC,SP別ソースの方は削除してOK。

総括

いかがでしたでしょうか。
回りくどい説明省いているので、分かりにくいって方はコメントください。
また、あまりテストをしていないので、実装しておかしな部分がある方はぜひご連絡ください。

※ちなみに・・・この記事で紹介したコードを使用して不具合等が起こっても責任はとりませんので自己責任で!!