Design WordPress

スマホのアドセンス広告の見切れを直す方法

更新日:

Pocket

10個以上ブログを運営しているんだが、かなり前からいくつかのブログで起きていた「スマホで見たときのアドセンス広告の見切れ」がようやく直ったので、今後またこの症状に引っかかった時用のメモを書いておきます。

アドセンスコードをいじるので、もし参考にされる方がはご自身の責任でお願いします。

スマホで見たときのアドセンス広告の見切れを直す方法

スマホで観たときのアドセンス広告の見切れの例はこんな感じ。

スマホで見ると、上のように文字や写真部分が見切れてしまっている。

アドセンスの規約的にもあまりよろしくなさそう。

 

今までこれを直す試みを何度かやってきたたんだけど、なかなかうまくきれいにまとまらなかったので放置していました。

 

今回また気になったので、いろいろ調べ直してみると簡単に解決しました。

 

見切れを治す方法

見切れていたのはレスポンシブで使っていたアドセンスコード。

まずアドセンスコードをいじる。

メモ

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- コード例) -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-※※※※※※※※※※※※※※※※"
data-ad-slot="※※※※※※※※※※"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

レスポンシブのアドセンスコードを取得すると、上のようなコードになると思います。

上のコードにある「data-full-width-responsive="true"」の「"true"」を「"false"」に変える。

 

すでに使用しているアドセンスに修正を掛ける場合、「data-full-width-responsive="true"」自体がない場合もあったので、「data-ad-slot="※※※※※※※※※※"」の次の行に「data-full-width-responsive="false"」を追加する。

 

そして「data-ad-format="auto"」の部分を「data-ad-format="rectangle"」にしておく。

■完成例

メモ

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- コード例) -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-※※※※※※※※※※※※※※※※"
data-ad-slot="※※※※※※※※※※"
data-ad-format="rectangle"
data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

アドセンスコードの修正はこれで終わり。

 

これだけでもきれいに表示できることもありますが、自分の場合はもう少し見切れてしまう部分があったので下記の方法で解決しました。

 

メモ

<div style="margin-left:-10px;">

ここにアドセンスコードを入れる

</div>

自分は広告の右端が見切れていたので、上のコードを入れることで見切れていた部分を左に寄せる事ができ、違和感なくきれいに表示することができました。

「-10px」は広告の見切れ具合によって微調整できるので、表示されている広告の状態を見ながら数字を合わせてみるのが良いかと思います。

同じ広告ではないのでいまいち参考にしにくいですが、こんな感じに広告を閉じる「✗」のマークの範囲まで表示できるようになりました。

前はこのマークさえ表示できなかったんでね。

 

まとめ

上の見切れを直す方法は、とりあえず何も考えずできるやり方かなと思います。

なぜ見切れていて、どういう理由で改善できたのかなど細かいことはなしで書いています。

 

自分も色々なサイトやブログなどでスマホで見た時に広告が見切れてしまう修正方法を見ましたが、コードの解説などごちゃごちゃして逆にわかりにくいものがあったので、これくらいシンプルに書いておけば得意でない方でも楽かなと思っております。

 

今回レスポンシブのコードを例にして書きましたが、その他のコードでもおそらく応用可能だと思います。

レスポンシブ以外では、インフィードリンクユニットでの見切れを直すことができました。

 

とりあえずアドセンスコードの修正はしっかり注意して行ってください。

以上!

-Design, WordPress

Copyright© YOuTsk , 2019 All Rights Reserved Powered by STINGER.