ダブルレクタングルの実装についてです。
ダブルレクタングルとは、Google Adsenseの「レクタングル(大)」を、横に並べる表示方法です。
こんな感じ
今回は、PCはダブルレクタングル、モバイル表示時はレクタングル1つにする表示方法を、CSSのみで作ったのでご紹介します。
なぜPCとスマホで表示数を変えるのか?
今回作成したものは、PCは2つ、スマホは1つと数を変えています。
これはレスポンシブ表示に設定している場合、モバイル向け表示のときに、画面上に2つ広告が表示されるのはポリシー違反とのこと。
なので表示状態に応じて、広告の表示数を変える設計にしました。
どんな表示になるの?
・ダブルレクタングルのとき(PC表示)
・シングルレクタングルのとき(モバイル表示)
作り方
では作り方です。
Adsenseの追加
まず記事下に、Adsenseを貼り付けていきます。
ぼくはAdsense Filterを導入しているので、元々あるコメント(のところ)を移動させていますが、使っていない方は、コピーしてきたまま貼り付けでOKです。
<div class="double-rect-ads-group"> <p style="text-align: center;"><span style="font-size: 85%;">【スポンサーリンク】</span><br /></p> <div class="double-rect-ads1"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-0123456789012345" data-ad-slot="0123456789"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- レクタングルその1 --> </div> <div class="double-rect-ads2"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-0123456789012345" data-ad-slot="987654321"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- レクタングルその2 --> </div> </div>
Adsenseコードの貼り付け以外での要点は、こんな感じです。
- 全体を「<div class="double-rect-ads-group">」でくくる
- 1つ目のAdsenseコードを「<div class="double-rect-ads1">」でくくる
- 2つ目のAdsenseコードを「<div class="double-rect-ads2">」でくくる
「スポンサーリンク」については、ご自由にどうぞ。
pタグなどで、この文言だけくくって、単独にしておくとよいですね。
CSSの設定
続いてCSSの設定です。
基本まるごとコピペでOKです!
/* Ads ダブルレクタングル */ /* 2017.03.31: Copyright (c) 2017 http://www.lisz-works.com/ */ .double-rect-ads-group > div { margin: 0 5px 0 5px; } .double-rect-ads1 { float:right; } .double-rect-ads2 { float:none; display:inline-block; } @media screen and (max-width: 750px){ .double-rect-ads-group > div { margin: 0 auto; } .double-rect-ads1 { float: none; } .double-rect-ads2 { display: none; } }
CSSの要点はこちら。
- 広告の左右に5pxマージンを取って間隔を少し開けてます。
- floatで、2つ横並びにするようにしています。
- 「@media screen and (max-width: 750px)」で、広告を1つにする幅を調整しています。使用するサイトに合わせて「max-width」のpx値を変更してください。
- 項番3の幅より小さくなったら、広告を1つ非表示にし、残った広告が記事中央に来るようにしています。
あとがき
実はコレを作ったくせに導入していません。
なぜかというと……
現在適用しているテーマ的に、うまいこと行かないからです……
テーマ変えようかな……コレ気に入ってるんだけどな……
むしろ自作した方がいいのかな……労力エグそう……
意気揚々と作り終えたのに、大分しょぼくれています……