モバイル表示でAdsenseがずれる

わいひらさん、こんにちは。
検索すると、最近の記事で「アドセンスの記事内ネイティブの広告をいくつか貼ると表示が崩れる？」
https://406080.net/native-in-article/
というのがありました。
記事内ネィティブ広告をたくさんはると右にずれていく現象があるようで、まさにこの現象でした。
別のブログに同じように配置したところ、やはりずれて表示される場合が発生しました。
Adsenseのコードをみる限り、以前はったときと変化がないので仕様上、なにか変更があったのかもしれませんね。

連投すみません。ということが判明したので、記事内ネイティブ広告は１つにとどめ、それ以外は300*250サイズではってみることで現象は回避できました。
根本的な改善ではないのですが、もしほかの人で同じ現象に気づいたひと（もしかしたら最近になって頻発していたので気づいていないかもしれません）もはりかえてみることで対処できるようですので、メモとして残しておきます。

リンクの提示があれば、わかると思ってたのですが、以下の内容の件。

ウィジェット内に<div class=”center”></div>など強制的にセンター表示するタグをつけても効かずだめでした。

.centerは、子テーマ側でセンタリングの記載をしないといけない気がします。違ったらスミマセン。その他記載が親テーマ側では設定済みだと思います。ただ、.centerは強制的な書き方かといえば、違う気：そうではない気がします。

こんばんわ。

その後似たような問題で悩んでいいる方からgoogleのフォーラムでも書き込みがありました。
ここ数日気づいた方がいるようです。

「記事内コンテンツの表示位置を左寄せにしたい」
https://productforums.google.com/forum/#!topic/adsense-ja/lizfzXpKSRQ;context-place=forum/adsense-ja

対処方法としては私の試したものか、「広告の許可とブロック > 広告配信 > ディスプレイ広告」セクションの「類似サイズのディスプレイ広告 – 類似サイズのディスプレイ広告を、広告ユニットに収まるようにサイズ変更して表示します。」を無効にした場合は、上記の問題は全く発生しないようです。

「記事内広告ユニットにディスプレイ広告が表示される場合、横幅が親コンテナより大きくなってしまう。」
https://productforums.google.com/forum/#!topic/adsense-ja/0MxGKBjgiyw;context-place=forum/adsense-ja

ネイティブ広告が何かとか、全くうとくてわかりませんが、気になるのが以下の事で。

「記事内広告ユニットにディスプレイ広告が表示される場合、横幅が親コンテナより大きくなってしまう。」

CSSで考えたら、下の記載では効かないんですよね。

iframe {
	max-width: 100%;
}

このプロパティは子要素に継承しないようなので。

継承 不可
引用元：max-width｜MDN ウェブドキュメント

iframe内にiframeが入っているのが原因だとした場合。どシンプルに考えたらCSSで対応できないのかな？と思います。

実際ソースを見てないのと はみ出した対処をしてないのでわかりませんが、例えば下のような書き方など試すと、どうなのかなとか思います。

例として：CSS

iframe iframe {
	max-width: 100%;
}

Autoptimizeをいれてるから、そのような挙動がおきる可能性もありそうですが、実際どうかは不明です。※チェックしたサイトがそうだったと言う共通点。
※Bad Requestエラーが出た時？だったか、スマホでもPCビューになり、キャッシュを削除したらスマホビューになった記憶が・・・！？

後は可能性は低そうに思いますけど、何かの設定とそのプラグインの影響・非同期コードではない・非同期で読み込むのに広告がタブレットと誤認したとか。

PCビューで広告を表示したとき、Chromeデベロッパーツールでスマホビューに変更したとき、再読み込みしない場合、広告が大きいまま表示される事が最近よくあります。

PCビューの画像

デベロッパーツール・スマホビューの画像

上記の様子は強制的にやっただけですが、スマホビューで時々このようになる原因が気になったので。

※ちなみに、上述のCSSの対応は面倒すぎる感じっぽいです。
横揺れした状態の画像とソースの表示

ins[id^="aswift"] {
	width: 100% !important;
}

このコードを使ってもその子要素にまたHTML・body・ins・iframeがあって。根気よく対処しないと見切れるのと、広告が画像のときとテキストの時があるので、やっぱりCSSでの対応は面倒な作業かな？と思います。