サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年6月9日 20:04
どこのカテゴリーに書いて良いのか悩み、結局雑談にしました。
このCocoonのサイトでも発生している、モバイル時のAdSense広告の左右が切れる件ですが。。。
以下のトピックも関係しているかもしれません。
Twitter公式アプリからページを表示した時だけ広告が右にずれる
https://wp-cocoon.com/community/postid/48200/
https://wp-cocoon.com/community/postid/48200/
[解決済] バナー広告の設置について
https://wp-cocoon.com/community/postid/50872/
https://wp-cocoon.com/community/postid/50872/
以下の条件で、解消するかも知れません。
（ただ、モバイル時のAdSenseのScriptエラーは解消しないです。）
（ただ、モバイル時のAdSenseのScriptエラーは解消しないです。）
- 広告ウィジェットを使う
- data-full-width-responsiveは、「false」を指定する
- data-ad-formatは、自分で指定する
（ "rectangle"（レクタングル）、"vertical"（縦長）、"horizontal"（横長）） - ウィジェットの広告フォーマットは、「広告コードをそのまま表示」を選択する
項番1～3の条件が揃っていても、項番4で「オート（AdSenseにおまかせ）」やその他のものを選択すると、上手くいかないような気がします。
違いは、何かと言えば、ソースコード上では、
<ins class="adsbygoogle"
の前に、
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
があるかないか。。。しかない気がします。
（「広告コードをそのまま表示」を選択すると、上記Scriptが出てくる。。。気がします。）
（「広告コードをそのまま表示」を選択すると、上記Scriptが出てくる。。。気がします。）
ただ、項番3の「data-full-width-responsive」を「false」にしないとダメ…というのもどうなんだろう…と。
（「true」ではダメでした。）
（「true」ではダメでした。）
関連コンテンツは、まだCocoon設定からしているので、解消の確認はしていないです。
トピックスターター 2021年6月9日 21:27
ちなみに、以下ですが。。。
ただ、項番3の「data-full-width-responsive」を「false」にしないとダメ…というのもどうなんだろう…と。
G●●gleさん、上手くやってよ。。。という意味です。
おまかせできないじゃん、という嘆きでしょうか。
2021年6月10日 20:41
これは、他テーマでも同様の表示になります。
「data-full-width-responsive」を「false」とかも試したことがあるのですが、うまくいきませんでした（もしかして、うまくいったのですか？）。
Cocoonテーマを使用していない東スポとかのGoogle広告でもまともに表示されてないので、ちょっと何が正解なのかわかりません。
正しい表示がされている、ページのURLを提示していただければ、そのページを参考に修正出来ればと思います。
ただ、今まで何度か提示をお願いしたことがあるのですが、ずれないでで表示されるページが出てきたことがないので是非僕も知りたいです。
あとこのトピックは、「Cocoonテーマに関する質問」フォーラムに移動させていただきます。
2021年6月10日 20:45
違うテーマを使用している、こちらとかでもおかしな表示になります。
https://bokuafi.work/adsense-broken-layout/
どうしたらいいんだか。
トピックスターター 2021年6月10日 21:27
わいひらさん
すみません、私のサイトは非公開で…。
（大変申し訳ない。。。です。ちょっと今は、大変ヤバい状況にあるのです。。。30日くらい監視されます。）
元々は、他の方のサイトを拝見していて、気づきました。
（チャンビアさんのサイトです。）
投稿ページ中のAdSenseは、はみ出しているのに、関連コンテンツははみ出していないのです。
（私のサイトでは、関連コンテンツもはみ出します。）
その違いはなにか…と思ったところ、先にも書きました条件です。
少しだけ実験しましたので、先に書いたことと重複しますが、書きます。
（画像をつぎはぎしますので、途中で再編集できなくなったら、別の返信に続けます。）
正直、上手くいっているのかは分かりません。
以下のエラー（幅を取得できない？）は、出続けます。
以下は、どちらもバナー広告です。
どちらも広告ウィジェットを使用しています。
どちらも広告ウィジェットを使用しています。
上は正しくバナー広告になってはみ出さず。
下は、バナーにならず、更にはみ出しています。
その違いですが。
上は、以下のように設定しました。
私が先に書いた以下の条件で設定した感じです。
- 広告ウィジェットを使う
- data-full-width-responsiveは、「false」を指定する
- data-ad-formatは、自分で指定する
（ "rectangle"（レクタングル）、"vertical"（縦長）、"horizontal"（横長））- ウィジェットの広告フォーマットは、「広告コードをそのまま表示」を選択する
下のバナー広告は、Cocoon設定に入力したコードを使用するカタチで、ウィジェットで「バナー」を指定しています。
Cocoon設定に入力しているコードは
- data-full-width-responsiveは「true」
- data-ad-formatは「auto」
の状態です。
そろそろ別の返信に分けます。
トピックスターター 2021年6月10日 21:38
続いては、ソースコードを比較します。
上の正しい表示のバナーは、以下のような感じでした。
<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>
下のはみ出してしまうコードは、以下です。
すみません、コード入力するとエラーになってしまいます。
以下に貼り付けました。
違いは、「data-full-width-responsive」が「false」なのはそうなのですが。
以下の有無なのではないかと推測しています。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
試しに、カスタムHTMLにコードを指定すると、広告は正常に表示されるように思います。
「data-full-width-responsive="false"」だけは変更する必要がありそうです。
「data-full-width-responsive="false"」だけは変更する必要がありそうです。
データフォーマットも、コントロールするなら指定する必要はあると思います。
カスタムHTMLであれば、Scriptが出てくるからではないか…と推測しています。
私のサイトの関連コンテンツには、「<script async src="https://pagead2～」はないのですが。
チャンビアさんのサイトの関連コンテンツには、それが表示されているように思います。
チャンビアさんのサイトの関連コンテンツには、それが表示されているように思います。
関連コンテンツもカスタムHTMLに貼り付けてみたのですが直ぐには表示されないようで、ちょっと今は検証を注視しています。
私のサイトは、ちょっとヤバい状態のようですから、あまり変なことは止めておきたいのです。
私のあくまでも推測ですが。
- data-full-width-responsive="false"であること
- 「<script async src="https://pagead2～></script>が、
「<ins class="adsbygoogle"」の前にあること
上記の2つの条件が必要なのではないか。。。と思っています。
（チャンビアさんのサイトは、関連コンテンツですので、data-full～はないのですけど。）
トピックスターター 2021年6月10日 22:01
わいひらさんにこういう説明をするもの。。。ですが。
今はみ出している広告は、どうも全幅で表示しようとしているように思います。
G●●gleが。
（幅が取得できない的なエラーが関係している？）
そのため、ネガティブmarginを指定していて、そのはみ出した部分が表示されていないのだと思います。
無理矢理「position: absolute;」を追加して表示させてみると、やはり全幅広告のようです。
（他の部分の表示は崩れますが。）
（他の部分の表示は崩れますが。）
これを上手く表示する方法が見当たらず。。。
全幅は諦めて、「data-full-width-responsive="false"」にするしかないのかなぁ。。。と感じています。
ただ、それだけでは上手く表示はできず。。。
やはり、「<script async src="https://pagead2～></script>」は必要なのかなぁ。。。と、アバウトに思っています。
すみません、自分のサイトを提示できなくて。
トピックスターター 2021年6月10日 22:30
ちなみに、わいひらさんにご提示いただいた、以下のサイトですが。
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～</script> 」が出ているように思います。
そして、良く見る以下のエラーが出ていないんですよね。
何が違うのでしょう。。。
デベロッパーツールからも、全幅で表示されているようです。
全幅かどうかはともかく、何とか表示できると良いのですが。
（とりあえず、私が提示した条件を設定すると、はみ出さずに表示はできています、全幅ではありません。私のサイトは犯人捜し中で、閲覧制限をしています、重ね重ねすみません。。。）
トピックスターター 2021年6月11日 12:23
関連コンテンツのはみ出しが解消しました。
やり方を書きます。
まずは、画像から。
「Cocoon設定」－「広告」の画像です。
ここの「関連コンテンツ用コード入力」欄にコードを入力すると、実際の表示ははみ出ます。
その際のHTMLコードは、以下のようになっていました。
元々、「Cocoon設定」－「広告」－「関連コンテンツ用コード入力」に設定しているコードと比較すると。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
がない状態で、
data-full-width-responsive="true"
が追加されていました。
2021年6月11日 12:34
現在当サイト（当トピックページ）の広告は、
- 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"
にしてみます。
トピックスターター 2021年6月11日 12:35
続いて、関連コンテンツがはみ出さなくなった方法です。
関連コンテンツ用のAdSenseのコードは、以下の画像の青字部分に入力しました。
そして、表示させたい場所に、広告ウィジェットを設置します。
「広告コードをそのまま表示」を選択しておくことが必要です。
この際のソースは、以下のような感じです。
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
上記のScriptが出てきて、
data-full-width-responsive="true"
上記はなくなりました。
チャンビアさんのサイトを参考に、どうすれば同じになるか、試した結果です。
トピックスターター 2021年6月11日 12:42
わいひらさん
このCocoonのサイトは、以下が出ています。
私のサイトにも出ています。
これが出ていると、全幅表示「data-full-width-responsive="true"」ははみ出してしまうようです。
ですので、「data-full-width-responsive="false"」にする必要があると思います。
上記画像のエラーが出ていないサイトでは、全幅表示「data-full-width-responsive="true"」でも大丈夫みたいです。
2021年6月11日 12:43
まともに表示されないのは、僕だけの環境なんだろうか。
https://bokuafi.work/adsense-broken-layout/
Chrome派生ブラウザではなくて、本家Chromeにしてもやっぱりはみ出す…。
トピックスターター 2021年6月11日 12:45
私からは、全幅で表示できているように見えます。
アドセンスのScript関連のエラーもこのサイトは出ていないです。
2021年6月11日 12:47
このエラーメッセージは、CSSで非表示にしている広告ユニットに対してadsbygoogle.push()すると出るエラーなので、スクリプトコードの位置とは関係ないような気がします。
けれど一度、CSSで非表示になる広告部分を外してみます。後で。
トピックスターター 2021年6月11日 12:53
わいひらさん
このエラーメッセージは、CSSで非表示にしている広告ユニットに対してadsbygoogle.push()すると出るエラーなので、スクリプトコードの位置とは関係ないような気がします。
これは納得しました。
私のサイトで、このエラーが表示されている個数と、
「広告（PC用）」を使用している数が一致します。
ということは、わいひらさんの仰っている通りだと思います。
2021年6月11日 12:59
とりあえず、このサイトでCSS非表示広告となりそうな広告を全て外してみました。
エラーもでなくなりましたが、やっぱり僕の環境だと広告がはみ出すようです。
自分の環境がおかしいのかな…。
トピックスターター 2021年6月11日 13:02
うーん。
私の環境で試したところ。
以下の状態だと、
正しく表示されます。
同じウィジェットで、広告フォーマットだけを変更すると
はみ出てしまいます。
2021年6月11日 13:04
こちらがだめだったようなので
- 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"
ただやっぱり添付画像のようにはみ出しちゃうんですよね…。
ここら辺は何度も試しているのですが、毎回このような状態になります。
他の方の環境だとどうなんだろう…。
トピックスターター 2021年6月11日 13:06
今現在のこのCocoonフォーラムをみると、私からははみ出ていないです。
こちらはChrome
以下は、Firefoxです。
2021年6月11日 13:09
以下の状態だと、
正しく表示されます。
これ、horizontalではなくてrectangleだとどうなりますか？
トピックスターター 2021年6月11日 13:12
はみ出さないですね。
2021年6月11日 13:12
今現在のこのCocoonフォーラムをみると、私からははみ出ていないです。
マジで？そしたら、いよいよ僕の動作環境がおかしいのかも。
2021年6月11日 13:16
Chromeはダメだけど、Firefoxならいける。
トピックスターター 2021年6月11日 13:17
スマホの実機でもはみ出さないです。
2021年6月11日 13:19
現在、こちらのエラーが出る状態に当サイトを戻しました。これだとどうでしょう？
これではみ出さない場合は、data-full-width-responsive="false"に変更しておこうと思います。
トピックスターター 2021年6月11日 13:22
はみ出さないですね。
スマホ実機でも確認しましたが、はみ出さないです。
2021年6月11日 13:31
そしたら現在こちらの状態にしてみました。
- insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」なし
- data-full-width-responsive="false"
これだとどうでしょうか？
2021年6月11日 13:33
僕の環境の公式Chromeデベロッパーツール環境もシークレットモードでも、やっぱりはみ出して表示される…。
Chrome拡張とかの問題とかでもないのか…。
トピックスターター 2021年6月11日 13:36
あら、はみ出しません。
スマホ実機で確認しました。
Chromeのデベロッパーツールでもはみ出さないですね。
Firefoxでも。
トピックスターター 2021年6月11日 14:07
私のサイトでも、以下をやってみました。
- insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」なし
- data-full-width-responsive="false"
やはり、はみ出さないみたいですね。
では、ちょっと昼食を食べてきます。
（もしかすると、わいひらさん修正くださっているのかも。そんな中すみません。）
トピックスターター 2021年6月11日 14:20
そう言えば、ちょっと思い出しました。
「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」です。
今度こそ、昼食を。。。
トピックスターター 2021年6月11日 15:04
ああ、間違いに気づきました。
（今更もう。。。という気もしますが。）
1つ上の返信の一昨日（6/9）と、先程やってみた。。。の部分は、以下が正しいです。
- insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」あり
2021年6月11日 19:09
とりあえず、data-full-width-responsive="false"でアップしておきました。
https://github.com/yhira/cocoon/commit/30f2985973d8a4a7c86e8e4e3d530bc6b7c61c8e
近いうちに自動アップデートもかけます。
「」は、以前私もやったことがあります。
その時は、デベロッパーツールでしか試していませんでしたが、その際にはやはり、はみ出したままでした。
それで「効果ないじゃん。。。」と思っていました。
僕もこれまで、5、6回は試してうまくいかなかったので、効果がないものと思っていました。
※僕のChromeデベロッパーツール環境では現在でもうまくはいっていないですが ?
とりあえず、僕以外のChrome環境や実機で正常動作しているのが確認できたのは大きな収穫です。
2021年6月11日 19:15
しかし、先程やってみたところ、
- insの上に「<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>」なし
は、条件ではない感じですよね。
これはおそらく関係ないと僕は思っています。
これが動作してなかったら、パソコンでも表示されないですし、asyncで読み込まれているので、実行タイミングとかもあまり関係なさそうですし。
トピックスターター 2021年6月11日 19:16
わいひらさん
ありがとうございます。
ちょっと今、スマホしかない状態ですので、後ほど確認させていただきます。
確認が終わったところで、ご連絡いたします。
2021年6月11日 19:16
ごくごく最近に、Chromeのバージョンアップがありましたが、それが関係していたりしますか？
（デベロッパーツール上のことではありますが。）ちなみに、私のChromeは「バージョン: 91.0.4472.101」です。
僕も同様のバージョンで行っていますが
現在相変わらずこんな状態です。
トピックスターター 2021年6月11日 19:22
asyncで読み込まれているので、実行タイミングとかもあまり関係なさそうですし。
確かに。。。です。
となると、やはりdata-full-width-responsive="true"（全幅表示）が原因だったと思うのですが、なぜ以前"false"がきかなかったのだろう。。。と、謎が深まります。
いずれにしても、後ほど確認させていただきますね。
トピックスターター 2021年6月11日 19:25
Chromeの件は謎ですね。。。
モバイルはFirefoxなどでご確認いただくしかないかもしれませんね。
今もスマホからは、このサイトははみ出していませんし。
いったい何が。。。
トピックスターター 2021年6月11日 20:49
わいひらさん
とりあえず、修正対象の「ad.php」だけアップロードするカタチで確認させていただきました。
「Cocoon設定」の「広告」、及び、広告ウィジェットに直接入力するコードは以下の状態にしました。
- data-ad-format="auto"
- data-full-width-responsive="true"
（AdSense指定のものをそのまま。。。という意味です。）
関連コンテンツはformatは違いますし、date-full～は指定はないですけど。
結果的にはすべてOKでした。
- 「Cocoon設定」から表示位置を指定する方法
- 広告ウィジェットのコードを空で、表示する方法
- 広告ウィジェットにコードを入力する方法
上記で試してみました。
PCでもモバイルでも問題なく（はみ出さない）、「Cocoon設定」やウィジェットで「広告フォーマット」を変更しても問題ありませんでした。
（HTMソースは、2ヶ所しか確認しませんでしたが、表示が問題ないので大丈夫かと。）
お時間をかけての検証やご対応いただき、ありがとうございました。
しばらく解決できずにいましたので、非常にすっきり致しました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。