見出し画像

【無料で全部読めます】Google Adsense でサイズを指定したのにheight:autoになるバグについて

注意:この記事は小説投稿サイトSolispiaの運営としてではなく、開発者としてです。

この間、新たに広告を追加しようとしたところ、サイズを指定してある固定広告のはずなのに、ソースコードではheightがautoとして表示されてしまいました。

もし、悩んでいる方がいらしたら解決の一助となれば幸いです。


width:200px,height:100pxの固定広告を作成しようとしたところ、アドセンスのコードとして以下のような形で出力されました。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=個人の番号"
     crossorigin="anonymous"></script>
<!-- hoge -->
<ins class="adsbygoogle"
     style="display:inline-block;width:200px;height:100px"
     data-ad-client="個人の番号"
     data-ad-slot="広告の番号"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

しかし、上記のコードで広告を張ると、ソースコードではheightがautoとして扱われてしまい、画面いっぱいに表示されてしまいました。

そこで、別の方法を模索しました。

結論から言いますと、コードを変更します。

規約でホバーがクリックとなったり、広告の枠が光ったりするような改変は禁じられているものの、レスポンシブルを変更したりするのは規約で認められています。

もし、心配な方がいらしたらご自分の目で規約を確認されることをお勧めします。


まず、inline-block要素から block要素へと変更させます。

また、styleでサイズを指定するのではなく、cssのクラスを追加し、そこでサイズを指定するようにします。

具体的には以下のように変更させます。

<style>
.hoge { width: 200px; height: 100px; }
</style>

    <!-- hoge -->
    <ins class="adsbygoogle hoge"
        style="display:block"
        data-ad-client="個人の番号"
        data-ad-slot="広告の番号"
        ></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

このようにすると、期待した動作が行えるはずです。

あまり、原因がわかっていないのですが、cssを別途で記述してinline-block要素のままにすると、サイズが正しく表示されないバグが同様に起こりました。

そのため、上記のように変更することをお勧めします。

もし、わかる方がいらしたら教えていただければ幸いです。


今回の記事はこれで以上ですっ!

読んでくださり、ありがとうございました。

以下でご購入いただいたお金はサイトの維持管理や記事の費用に充てさせていただきます

ここから先は

47字

¥ 300

この記事が参加している募集

仕事について話そう

この記事が気に入ったらサポートをしてみませんか?