CSSのみで「PCはダブルレクタングル、スマホはレクタングル1つ」を作ってみた

ダブルレクタングルの実装についてです。

ダブルレクタングルとは、Google Adsenseの「レクタングル(大)」を、横に並べる表示方法です。

こんな感じ

今回は、PCはダブルレクタングル、モバイル表示時はレクタングル1つにする表示方法を、CSSのみで作ったのでご紹介します。

なぜPCとスマホで表示数を変えるのか？

今回作成したものは、PCは2つ、スマホは1つと数を変えています。

これはレスポンシブ表示に設定している場合、モバイル向け表示のときに、画面上に2つ広告が表示されるのはポリシー違反とのこと。

なので表示状態に応じて、広告の表示数を変える設計にしました。

どんな表示になるの？

・ダブルレクタングルのとき(PC表示)

・シングルレクタングルのとき(モバイル表示)

作り方

では作り方です。

Adsenseの追加

まず記事下に、Adsenseを貼り付けていきます。

ぼくはAdsense Filterを導入しているので、元々あるコメント(のところ)を移動させていますが、使っていない方は、コピーしてきたまま貼り付けでOKです。

hapilaki.hateblo.jp

<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コードの貼り付け以外での要点は、こんな感じです。

1. 全体を「<div class="double-rect-ads-group">」でくくる
2. 1つ目のAdsenseコードを「<div class="double-rect-ads1">」でくくる
3. 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の要点はこちら。

1. 広告の左右に5pxマージンを取って間隔を少し開けてます。
2. floatで、2つ横並びにするようにしています。
3. 「@media screen and (max-width: 750px)」で、広告を1つにする幅を調整しています。使用するサイトに合わせて「max-width」のpx値を変更してください。
4. 項番3の幅より小さくなったら、広告を1つ非表示にし、残った広告が記事中央に来るようにしています。

あとがき

実はコレを作ったくせに導入していません。

なぜかというと……

現在適用しているテーマ的に、うまいこと行かないからです……

テーマ変えようかな……コレ気に入ってるんだけどな……

むしろ自作した方がいいのかな……労力エグそう……

意気揚々と作り終えたのに、大分しょぼくれています……