[Googleアドセンス]リンク広告がきれる時の修正の方法[コピペOK]

ブログ・アフィリエイト

こんにちは。kakeです。

先日にGoogleアドセンスでリンク広告を設置しました。

設置完了!!!

と思ったらなぜかスマホ表示では右端がきれていました。

ということで、

「どうやったら広告がきれているのを修正できるの??」

上記のテーマで解説していこうと思います。

468_60

スポンサードサーチ

[Googleアドセンス]リンク広告がきれる時の修正の方法[コピペOK]

[Googleアドセンス]リンク広告がきれる時の修正の方法[コピペOK]

上のように表示されていればオッケーなのですが、僕はスマホ表示がきれてしまうという現象がおきてしまいました。それを以下で解説していこうと思います。

スマホでアドセンスのリンク広告がきれるとは

スマホ表示でリンク広告がきれているとは一体どのようなものでしょうか?以下のようなものです。

リンク広告画像

右端がきれているのがわかると思います。これを修正していきます。

アドセンスのリンク広告をスマホで正しく表示させる方法

結論として、WordPressのテーマエディタでCSSを編集して修正していきます。

以下のコードをCSSの一番下で良いので貼り付けましょう。(※CSSは上から順に適用されていきますので、下にしておけば、何かに打ち消される心配がないってことですね。)

@media screen and (max-width: 500px){
     .adsbygoogle {
         overflow: visible;
     }
}

方法としては以上になります。これで直ればここでブラウザバックしてもOKです。以下では、原因について解説していきます。

Googleアドセンスのリンク広告がきれている原因は?

Googleアドセンスのリンク広告がきれている原因は?

まず、クロームでディベロッパーツール(検証)を開きましょう。

検証画面

リンク広告の部分を探してCSSを確認すると、下記のようになっています。

.adsbygoogle {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

このようになっています。

ここでoverflow: hidden;という部分をoverflow: visible;に変更してみてください。

検証画面

するとどうでしょう。ちゃんと表示されましたね。

原因と結果

  • overflow:hidden;が問題でした
  • →スマホ表示のCSSをoverflow: visible;にしてあげればオッケー

まとめ:正しくアドセンスのリンク広告が表示されていれば大丈夫!

正直、今回の後半の内容は理解はしなくてもいいかなと思います。

とりあえず、スマホ表示でおかしくなっているところを先ほどのせたコードで解決できればオッケーですね。

今回は以上になります。