css レスポンシブアドセンスを横並び 幅が小さくなったら縦並びに

レスポンシブ対応のレイアウトを採用して、記事下にレスポンシブアドセンスを横並びに設置し、更に記事下の幅が小さくなったら縦並びにする。これを実現するためのcssを考えてみた。

例: ↓ は、記事下の幅が [924px] の場合。

2017-09-07_14h29_01.jpg

2017-09-07_14h47_01.jpg

<!-- アドセンス PC記事下 レスポンシブ -->

<div style="clear:both;overflow:hidden;">

<div style="float:left;margin-right:24px;width:calc((100% - 24px) / 2);min-width:336px;padding-top:40px;">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ 左 or 上 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

<div style="float:left;margin-right:0px;width:calc((100% - 24px) / 2);min-width:336px;padding-top:40px;">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ 右 or 下 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

</div>
  • 左右のアドセンスの間には [24px] の余白を持たせる。
  • 左右のアドセンスの幅は [(記事下の幅 100% - 24px) / 2] で横に2つ並べる。
  • 但し、アドセンスの幅が [336px] 未満にならないように制限する。これは [300px x 600px] など縦長のアドセンスにならないようにするため。
  • 記事下の幅が [336px + 24px + 336px] 未満になれば、アドセンスは縦に2つ並ぶことになる。

cssで決定された幅に最適なアドセンスが表示される。もっとも、小さなアドセンスが表示されることもある。その都度、アドセンス側で”効果”を重要視しているからである。

例えば [450px] [336px] が並ぶこともある。ただ、この場合でも Google Publisher Toolbar - Chrome 拡張機能 でアドセンスサイズを確認すれば [450px] [450px] が並んでいることが分かる。

つまり、いっぱいに表示されることもあれば、その枠内で小さく表示されることもあると云うワケだ。

因みに [336px] 固定にしたければ・・・

2017-09-07_16h57_18.jpg

<!-- アドセンス PC記事下 レスポンシブ -->

<div style="clear:both;overflow:hidden;">

<div style="float:left;margin-right:24px;width:calc((100% - 24px) / 2);min-width:336px;padding-top:40px;">
<div style="width:336px;margin:0 auto;">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ 左 or 上 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</div>

<div style="float:left;margin-right:0px;width:calc((100% - 24px) / 2);min-width:336px;padding-top:40px;">
<div style="width:336px;margin:0 auto;">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- レスポンシブ 右 or 下 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</div>

</div>

↑ このようにすればよい。アドセンス枠の左右のマージンは、均等にすると見栄えがよくなる。

admin
カテゴリ:資料
2017/09/07 14:55 | コメント (0)
◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
プロフィール
カテゴリ
ブログ内検索
Powered by さくらのブログ