質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1602閲覧

SPサイズの時だけ左側にネガティブマージンがついて左にアドセンス広告がはみ出ます。 自分でやっているわけでもないのになぜのようになるのでしょうか? 解決策はないでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/10 10:15

SPサイズの時だけ左側にネガティブマージンがついて左にアドセンス広告がはみ出ます。
自分でやっているわけでもないのになぜのようになるのでしょうか?

解決策はないでしょうか?

下記を見ると逆側にネガディブマージンを入れればいいとあるのですがこの方法しかないでしょうか?
http://itbenricho.com/adsense-hamidashi.html

ソース

                  <aside> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 300new --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-slot="6"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </aside>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Google Adsenseのせいで左側にネガティブマージンがついてるので、CSSでadsbygoogleのクラスにoverflow:hiddenを追加したら、ネガティブマージンが消えます。

Google Adsに普通に表示したかったら、Responsive Adsを使ってください :)

.adsbygoogle { overflow: hidden; }

:)

投稿2018/02/10 10:22

jerome.dupuis

総合スコア172

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/10 10:54

ありがとうございます。 adsence側のバグでこんなことが起きているのですね。 googleが修正するまではほとんどのadsenceにこれを付けておかないといけないのですね。
jerome.dupuis

2018/02/10 11:05

バグではないです。ちゃんと表示したかったら、Responsiveを対応するAdsを使ってください:) Adsenseの管理画面でチェックしてみてね。(今はパソコンを使ってないので、自分でチェックが出来ません)
退会済みユーザー

退会済みユーザー

2018/02/10 12:10

確かにできましたこれはgoogleのバグではなくレスポンシブ広告ではなく固定300px広告を使っているので SPサイズの時になぜかはみ出るという事なんですね。 サイズは収まるサイズなのですが。 コメントアウトで300と記載してあるものはすべて固定と判断して変更しないといけないという認識でよいでしょうか? 固定はすべてレスポンシブにした方がよさそうですね。
jerome.dupuis

2018/02/10 14:05

そうですね、 Google adsのstyleを変更。 <ins class="adsbygoogle" ==>> style="display:inline-block;width:300px;height:250px" <<== data-ad-client="xxx" data-ad-slot="xxx"></ins> <script> でも、基本的に、ネガティブマージンは絶対に出ないように開発したかったら、 レイアウトのメインDivのクラスにoverflow:hiddenを追加。上記のサイトの場合に、 #wrapper { overflow:hidden }
退会済みユーザー

退会済みユーザー

2018/02/11 04:40

<aside id="wrapper"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 300new --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-slot="6"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </aside> このような事でしょうか? 最も広告をかこっている親につけるのですね。 このcssははみ出た部分を隠すものですが、私のイメージだとはみ出た部分が消えると思ったのですがなぜはみ出なくなったのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問