ちなみに、以下ですが。。。

投稿者:: @mk2_mk2

ただ、項番3の「data-full-width-responsive」を「false」にしないとダメ…というのもどうなんだろう…と。

G●●gleさん、上手くやってよ。。。という意味です。

おまかせできないじゃん、という嘆きでしょうか。

これは、他テーマでも同様の表示になります。
「data-full-width-responsive」を「false」とかも試したことがあるのですが、うまくいきませんでした（もしかして、うまくいったのですか？）。
Cocoonテーマを使用していない東スポとかのGoogle広告でもまともに表示されてないので、ちょっと何が正解なのかわかりません。
正しい表示がされている、ページのURLを提示していただければ、そのページを参考に修正出来ればと思います。
ただ、今まで何度か提示をお願いしたことがあるのですが、ずれないでで表示されるページが出てきたことがないので是非僕も知りたいです。

あとこのトピックは、「Cocoonテーマに関する質問」フォーラムに移動させていただきます。

違うテーマを使用している、こちらとかでもおかしな表示になります。
https://bokuafi.work/adsense-broken-layout/
どうしたらいいんだか。

わいひらさん

すみません、私のサイトは非公開で…。
（大変申し訳ない。。。です。ちょっと今は、大変ヤバい状況にあるのです。。。30日くらい監視されます。）

元々は、他の方のサイトを拝見していて、気づきました。
（チャンビアさんのサイトです。）

投稿ページ中のAdSenseは、はみ出しているのに、関連コンテンツははみ出していないのです。
（私のサイトでは、関連コンテンツもはみ出します。）

その違いはなにか…と思ったところ、先にも書きました条件です。

少しだけ実験しましたので、先に書いたことと重複しますが、書きます。
（画像をつぎはぎしますので、途中で再編集できなくなったら、別の返信に続けます。）

正直、上手くいっているのかは分かりません。
以下のエラー（幅を取得できない？）は、出続けます。

下のバナー広告は、Cocoon設定に入力したコードを使用するカタチで、ウィジェットで「バナー」を指定しています。

• data-full-width-responsiveは「true」
• data-ad-formatは「auto」

の状態です。

そろそろ別の返信に分けます。

続いては、ソースコードを比較します。

上の正しい表示のバナーは、以下のような感じでした。

  <div class="ad-wrap">
    <div class="ad-responsive ad-usual"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 投稿タイトル上（横長） -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xx-xxx-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="horizontal"
     data-full-width-responsive="false"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

• data-full-width-responsive="false"であること
• 「<script async src="https://pagead2～></script>が、
  「<ins class="adsbygoogle"」の前にあること

上記の2つの条件が必要なのではないか。。。と思っています。
（チャンビアさんのサイトは、関連コンテンツですので、data-full～はないのですけど。）

わいひらさんにこういう説明をするもの。。。ですが。

今はみ出している広告は、どうも全幅で表示しようとしているように思います。
G●●gleが。
（幅が取得できない的なエラーが関係している？）

そのため、ネガティブmarginを指定していて、そのはみ出した部分が表示されていないのだと思います。

ちなみに、わいひらさんにご提示いただいた、以下のサイトですが。

https://bokuafi.work/adsense-broken-layout/

私のスマホからは、全幅で表示に成功しているように見えます。
（全幅だと、押しちゃいそうですが。）

<div class="textwidget custom-html-widget">
<p style="text-align: center;">広告<br />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<ins class="adsbygoogle"
style="display:block"
data-ad-client="xx-xxx-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</p></div>

関連コンテンツのはみ出しが解消しました。

やり方を書きます。

まずは、画像から。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

data-full-width-responsive="true"

現在当サイト（当トピックページ）の広告は、

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」あり
• data-full-width-responsive="true"

という状態になっています。
ただ、僕の環境（Chromeデベロッパーツール）だとやっぱりはみ出します（左右ではないけど）。
1度、この状態でmk2さんの環境だとどうなるか見てもらってよろしいでしょうか。

もしこれでダメなようでしたら、次は

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」あり
• data-full-width-responsive="false"

にしてみます。

続いて、関連コンテンツがはみ出さなくなった方法です。

関連コンテンツ用のAdSenseのコードは、以下の画像の青字部分に入力しました。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

上記のScriptが出てきて、

data-full-width-responsive="true"

わいひらさん

このCocoonのサイトは、以下が出ています。

まともに表示されないのは、僕だけの環境なんだろうか。
https://bokuafi.work/adsense-broken-layout/
Chrome派生ブラウザではなくて、本家Chromeにしてもやっぱりはみ出す…。

私からは、全幅で表示できているように見えます。

このエラーメッセージは、CSSで非表示にしている広告ユニットに対してadsbygoogle.push()すると出るエラーなので、スクリプトコードの位置とは関係ないような気がします。

けれど一度、CSSで非表示になる広告部分を外してみます。後で。

わいひらさん

投稿者:: @yhira

このエラーメッセージは、CSSで非表示にしている広告ユニットに対してadsbygoogle.push()すると出るエラーなので、スクリプトコードの位置とは関係ないような気がします。

これは納得しました。

私のサイトで、このエラーが表示されている個数と、
「広告（PC用）」を使用している数が一致します。

ということは、わいひらさんの仰っている通りだと思います。

とりあえず、このサイトでCSS非表示広告となりそうな広告を全て外してみました。
エラーもでなくなりましたが、やっぱり僕の環境だと広告がはみ出すようです。
自分の環境がおかしいのかな…。

うーん。

私の環境で試したところ。

以下の状態だと、

こちらがだめだったようなので

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」あり
• data-full-width-responsive="true"

 当サイトもこちらの環境にしてみました。

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」あり
• data-full-width-responsive="false"

 ただやっぱり添付画像のようにはみ出しちゃうんですよね…。
ここら辺は何度も試しているのですが、毎回このような状態になります。
他の方の環境だとどうなんだろう…。

今現在のこのCocoonフォーラムをみると、私からははみ出ていないです。

こちらはChrome

投稿者:: @mk2_mk2

以下の状態だと、

 

正しく表示されます。

これ、horizontalではなくてrectangleだとどうなりますか？

はみ出さないですね。

投稿者:: @mk2_mk2

今現在のこのCocoonフォーラムをみると、私からははみ出ていないです。

マジで？そしたら、いよいよ僕の動作環境がおかしいのかも。

Chromeはダメだけど、Firefoxならいける。

スマホの実機でもはみ出さないです。

現在、こちらのエラーが出る状態に当サイトを戻しました。これだとどうでしょう？
これではみ出さない場合は、data-full-width-responsive="false"に変更しておこうと思います。

はみ出さないですね。

そしたら現在こちらの状態にしてみました。

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」なし
• data-full-width-responsive="false"

これだとどうでしょうか？

僕の環境の公式Chromeデベロッパーツール環境もシークレットモードでも、やっぱりはみ出して表示される…。
Chrome拡張とかの問題とかでもないのか…。

あら、はみ出しません。

スマホ実機で確認しました。

私のサイトでも、以下をやってみました。

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」なし
• data-full-width-responsive="false"

やはり、はみ出さないみたいですね。

では、ちょっと昼食を食べてきます。
（もしかすると、わいひらさん修正くださっているのかも。そんな中すみません。）

そう言えば、ちょっと思い出しました。

「data-full-width-responsive="false"」は、以前私もやったことがあります。

その時は、デベロッパーツールでしか試していませんでしたが、その際にはやはり、はみ出したままでした。

それで「効果ないじゃん。。。」と思っていました。

突然思い立ち、一昨日（6/9）に、

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」なし
• data-full-width-responsive="false"

で、やってみたところ、はみ出さなくなりました。

しかし、先程やってみたところ、

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」なし

は、条件ではない感じですよね。

もしかして。。。

「data-full-width-responsive="false"」がきいていかなかったのって。
ごくごく最近に、Chromeのバージョンアップがありましたが、それが関係していたりしますか？
（デベロッパーツール上のことではありますが。）

ちなみに、私のChromeは「バージョン: 91.0.4472.101」です。

今度こそ、昼食を。。。

ああ、間違いに気づきました。
（今更もう。。。という気もしますが。）

1つ上の返信の一昨日（6/9）と、先程やってみた。。。の部分は、以下が正しいです。

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」あり

とりあえず、data-full-width-responsive="false"でアップしておきました。
https://github.com/yhira/cocoon/commit/30f2985973d8a4a7c86e8e4e3d530bc6b7c61c8e
近いうちに自動アップデートもかけます。

投稿者:: @mk2_mk2

「」は、以前私もやったことがあります。

その時は、デベロッパーツールでしか試していませんでしたが、その際にはやはり、はみ出したままでした。

それで「効果ないじゃん。。。」と思っていました。

僕もこれまで、5、6回は試してうまくいかなかったので、効果がないものと思っていました。
※僕のChromeデベロッパーツール環境では現在でもうまくはいっていないですが ? 

とりあえず、僕以外のChrome環境や実機で正常動作しているのが確認できたのは大きな収穫です。

投稿者:: @mk2_mk2

しかし、先程やってみたところ、

• insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」なし

は、条件ではない感じですよね。

これはおそらく関係ないと僕は思っています。

これが動作してなかったら、パソコンでも表示されないですし、asyncで読み込まれているので、実行タイミングとかもあまり関係なさそうですし。

わいひらさん

ありがとうございます。

ちょっと今、スマホしかない状態ですので、後ほど確認させていただきます。

確認が終わったところで、ご連絡いたします。

投稿者:: @mk2_mk2

ごくごく最近に、Chromeのバージョンアップがありましたが、それが関係していたりしますか？
（デベロッパーツール上のことではありますが。）

ちなみに、私のChromeは「バージョン: 91.0.4472.101」です。

僕も同様のバージョンで行っていますが

現在相変わらずこんな状態です。

投稿者:: @yhira

asyncで読み込まれているので、実行タイミングとかもあまり関係なさそうですし。

確かに。。。です。

となると、やはりdata-full-width-responsive="true"（全幅表示）が原因だったと思うのですが、なぜ以前"false"がきかなかったのだろう。。。と、謎が深まります。

いずれにしても、後ほど確認させていただきますね。

Chromeの件は謎ですね。。。

モバイルはFirefoxなどでご確認いただくしかないかもしれませんね。

今もスマホからは、このサイトははみ出していませんし。

わいひらさん

とりあえず、修正対象の「ad.php」だけアップロードするカタチで確認させていただきました。

「Cocoon設定」の「広告」、及び、広告ウィジェットに直接入力するコードは以下の状態にしました。

• data-ad-format="auto"
• data-full-width-responsive="true"

（AdSense指定のものをそのまま。。。という意味です。）

関連コンテンツはformatは違いますし、date-full～は指定はないですけど。

結果的にはすべてOKでした。

• 「Cocoon設定」から表示位置を指定する方法
• 広告ウィジェットのコードを空で、表示する方法
• 広告ウィジェットにコードを入力する方法

上記で試してみました。

PCでもモバイルでも問題なく（はみ出さない）、「Cocoon設定」やウィジェットで「広告フォーマット」を変更しても問題ありませんでした。
（HTMソースは、2ヶ所しか確認しませんでしたが、表示が問題ないので大丈夫かと。）

お時間をかけての検証やご対応いただき、ありがとうございました。
しばらく解決できずにいましたので、非常にすっきり致しました。