Googleフォトの関係でブログのあちこちの画像が表示されてないんすねコレ。
そんな話はさておき、今日は自分用のメモでもと。
記事内、記事中、もしくは投稿内とでも言うのでしょうか。まあ、自分が書く記事本文ってやつの中に差し込んだ広告が最近300*600に近い縦長になる事が多いんです。
それが結構な数の誤クリックをしちゃっているみたいで、それは申し訳ないなと思う今日この頃。
以前は@mediaを使った閲覧・表示する端末によってサイズ指定をしていたのですが、もうなんだかそれ面倒なんでざっくりとした対応。
display:blockの横にmax-heightを入れてあげるとそれ以上の縦長verticalの広告がでない。つまり、これを指定してあげてPCで閲覧した場合、下のコードを例にすると縦280px以内の横horizontalへ広がる広告が表示される。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- test01 -->
<ins class="adsbygoogle"
style="display:block;max-height:280px;"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
投稿内の横サイズが720pxであれば、縦280pxに対して横720px内の広告が、もしくは336*280や300*250等のレクタングルの広告が表示される。
ちなみにmax-heightではなく、max-width:336pxなんてしてあげると、そのサイズに見合ったレクタングルが表示されるんだけど、PCで閲覧した場合に「ここはレクタングルじゃなくて、横枠の端から端までのサイズの広告も表示してほしい」なんて思ったりする訳で。
だったらmax-heightで指定してあげた方が良いかなと思う自分だったりします。ちなみにmax-width:336pxを差し込んで投稿内に広告を設置するとスマホで閲覧した場合に300*600の広告が出てしまう時がある。
もしかして広告の下に見出しを入れてあげないと縦に広がってしまうのかもしれない（テストはしていない）
