サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2021-08-22 19:15
いつもお世話になっております。
モバイルでインデックスページを見た時、アドセンス広告が枠からはみ出すほど大きく表示されてしまいます。
モバイルでインデックスページを見ることがあまりなく、いつから発生しているかは不明ですが、1か月前は正常だったと思います。
改善策は何なのか、わかる方がいましたら教えていただけると幸いです。
----------------------------------------------
サイト名：DeteLog(デテログ)
サイトURL： https://dete-diary.com
ホームURL： https://dete-diary.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-child-master/skins/bizarre-foods-bluecurry/style.css
WordPressバージョン：5.8
PHPバージョン：8.0.8
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：br, gzip, deflate
言語：ja,en-US;q=0.9,en;q=0.8,it;q=0.7
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.5.1
カテゴリ数：11
タグ数：166
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.6
style.cssサイズ：24232バイト
functions.phpサイズ：168バイト
----------------------------------------------
Gutenberg：1
AMP：1
PWA：0
Font Awesome：5
Auto Post Thumbnail：0
Retina：1
ホームイメージ：/wp-content/uploads/2018/05/dete_logo_1020-w1080.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.6.1
Akismet Anti-Spam 4.1.10
Aurora Heatmap 1.5.1
Broken Link Checker 1.11.15
Contact Form 7 5.4.2
EWWW Image Optimizer 6.2.3
Google XML Sitemaps 4.1.1
SiteGuard WP Plugin 1.6.0
TablePress 1.14
Useful Blocks 1.5.0
WordPress Ping Optimizer 2.35.1.2.3
WP Multibyte Patch 2.9
----------------------------------------------
Topic starter
2021-08-22 19:25
質問でインデックスページで発生していると書きましたが、各記事ページの本文中や[ ad ]コードで掲載したアドセンス広告でも同様にサイズが大きくはみ出しているのを確認しました。
となると、不具合が発生したのはここ2、3日の間ということになります。
その間にしたことは、ロリポップのPHPバージョンを8.0にしたことと、cocoonのバージョンアップです。ワードプレスバージョンを5.8にする前から発生していました。
他に何か必要な情報がありましたら教えてください。よろしくお願いいたします。
2021-08-22 20:56
5t3fd3dさん
各記事ページの本文中や[ ad ]コードで掲載したアドセンス広告でも同様にサイズが大きくはみ出しているのを確認しました。
これは、以下のような状態のことでしょうか。
であれば、AdSenseの仕様ではあり、以前から発生していたはずです。
ただ、親テーマのバージョンアップをしばらくしていなければ、その限りではないですが。
「Cocoon設定」－｢広告｣の以下の画像のチェックを外せば、解消すると思います。
（ヴィジェットに個別にコードを設定をしていると、解消しないかもですが。）
（ヴィジェットに個別にコードを設定をしていると、解消しないかもですが。）
インデックスの方は、ちょっとまだ確認していませんが。。。
上記のチェックを外すとどうなるのか、確認したいところですね。
（インデックスページも、「data-full-width-responsive="true"」になっているようですし、はみ出す場合、広告幅が、画面幅と同じになっているように見えます。）
上記のチェックを外すとどうなるのか、確認したいところですね。
（インデックスページも、「data-full-width-responsive="true"」になっているようですし、はみ出す場合、広告幅が、画面幅と同じになっているように見えます。）
わいひら reacted
Topic starter
2021-08-22 21:45
@mk2_mk2 さん
返信ありがとうございます。
添付画像のようにはみ出してしまいました、横スクロールしないと全部表示されない状況です。
モバイル広告の幅を広くするの項目は外してあるはずですが反映されていないでしょうか？
親テーマのバージョンは最新になっているかと思います。
引き続きお気づきの点などあればよろしくお願いいたします。
2021-08-22 21:51
5t3fd3dさん
お互いに同じ場所を確認するのが良いと思います。
画像添付いただいた記事のURLを教えてください。
2021-08-22 22:05
5t3fd3dさん
URLは、 https://dete-diary.com/23221/
だと思いますが。。。
今拝見したところ、急に「data-full-width-responsive="false"」になりました。
設定を変更なさいましたか？
ここは、ショートコードではなくて、「本文中」のようですね。
「本文中」は、今の状態ならばはみ出さないと思います。
おそらく設定作業などなさっているのかと思いますし、応答がないようですので、私は離脱させていただきますね。
Topic starter
2021-08-22 22:19
@mk2_mk2 さん
ありがとうございます。先ほど添付した画像の広告は[ad]のものです。
URLは https://dete-diary.com/23221/ です。ほかの記事やインデックスページでも、adコードか本文中の広告か問わず同様の症状が出ています。
また、広告の種類(企業)によってはみ出る場合とはみ出ない場合があるようです。
設定は今日20時ごろに触ってからは変更していないです。
引き続き何かわかる方がいらっしゃいましたらご協力いただけますと幸いです。
2021-08-22 22:32
ありがとうございます。先ほど添付した画像の広告は[ad]のものです。
そうですか。。。
私には「本文中」に見えます。
クラスに「ad-content-middle」が出ている（赤枠部分）ので、「本文中」だと思うのですけど、ご本人がそうおっしゃるのであれば、違うのかもしれません。
私もしっかり調べず、フィーリングでそう思っただけですので。
「【価格めやす】 5万円～」を目印にしていますから、他に同様なものがあれば違うかもしれません。
記事自体は同じものを見ているようです。
記事自体は同じものを見ているようです。
ソースが実際のページ表示と同じであるというのは、これで。
もっと下方にも広告があって、こちらはクラス名が「ad-shortcode」になってますから、ショートコードで表示させているのかな。。。と思ったのですけど。
（すみません、これもフィーリングです。）
（すみません、これもフィーリングです。）
ただ、どちらにせよ、今は「data-full-width-responsive="false"」になっており、何度かリロードしてみましたが、はみ出しません。
（少し前は、はみ出していたのですが、その時は「true」でした。）
（少し前は、はみ出していたのですが、その時は「true」でした。）
キャッシュの影響の可能性はあるかもしれません。
ブラウザキャッシュなどをクリアしてみてはどうかなと思います。
では、申し訳ないですが、これで失礼してしまいます。
作業がありまして。
（インデックスページは確認未済です、すみません。）
作業がありまして。
（インデックスページは確認未済です、すみません。）
わいひら reacted
Topic starter
2021-08-22 22:43
2021-08-23 00:19
5t3fd3dさん
時間がありませんので、今日はこれが最後になると思います。
Cocoon設定のコードを使用している分には、問題がないはずです。
（ショートコードを含む）
上記は、以下の画像の部分のことです。
Scriptの内容を見ても問題ないですし、私の端末から何度リロードしても、問題ないです。
スマホでも確認しました。
はみ出しは起こりません。
スマホでも確認しました。
はみ出しは起こりません。
5t3fd3dさんが、まだはみ出している場合は、キャッシュだと思います。
5t3fd3dさんのブラウザのキャッシュをクリアすることをお勧めします。
ただ、上記の場所のコード以外のものを使用しているものがあり、それらは今はみ出しています。
それらは、ウィジェットを使用しているようです。
インデックスページもウィジェットだと思います。
ウィジェットのコードを確認したところ、上記画像のCocoon設定のものと同じコードをウィジェットに入力しているように見えます。
「data-ad-slot」がCocoon設定に入力しているものと同じですし、Scriptもウィジェットに入力しているものが出てきています。
（Cocoon設定に入力していれば、出てこないScriptが出てきている。）
（Cocoon設定に入力していれば、出てこないScriptが出てきている。）
私が確認した範囲で。。。ですが。
Cocoon設定に入力しているコードと同じもの使うのであれば、ウィジェットのコード欄は入力の必要はありません。
添付画像のように空欄にしてください。
添付画像のように空欄にしてください。
Cocoon設定に入力しているものと、違うコードを使用する場合に入力するためのものです。
空欄であれば、Cocoon設定に入力しているコードを自動的に使用します。
上記対応で、はみ出しはなくなるはずです。
まずは、5t3fd3dさんの端末のブラウザキャッシュをクリアすることをお勧めします。
わいひら reacted
2021-08-23 02:52
5t3fd3dさん
只今スマホからで、しっかりは調べられないのですが。
1度だけ、5t3fd3dさんが仰っているであろう事象が発生しました。
私の環境からは、かなり何度もリロードしたり、別の記事に移動したりしても、この1度しか発生せず、再現が難しいです。
この再現以降、何度か表示させてみましたが、再現しません。
それはさておき。
この広告は「本文中」だと思います。
恐らく広告フォーマットが「AdSenseにおまかせ」になっているのではないかと思われます。
「レスポンシブレクタングル」に変更していただけますでしょうか。
それで、状況をみたいです。
それで、状況をみたいです。
Topic starter
2021-08-23 10:21
@mk2_mk2 さん
返信ありがとうございます。
ウィジェットの広告には何も入力しないでいましたがはみ出ている状況でした。
先ほど以下の設定変更をしました。
- インデックスミドルと本文中/本文下を、ウィジェットで広告表示➡cocoon設定で広告を表示に
- AdSenseにおまかせ➡レスポンシブレクタングルに変更
これで現状はみ出しがなくなっています。
その後、２をしないで１だけの状態でインデックスミドルの広告を表示させてみた(cocoon広告表示でアドセンスにおまかせ)ところ、添付画像のようになりました。はみ出していないけれど異常に拡大されて表示されてしまいます。
AdSenseにおまかせだと相性が良くないということなのでしょうか。
今は、
- インデックスミドルと本文中/本文下を、ウィジェットで広告表示➡cocoon設定で広告を表示に
- AdSenseにおまかせ➡レスポンシブレクタングルに変更
の状態になっています。
2021-08-23 11:37
5t3fd3dさん
只今スマホからですので、調べたりは難しいです。
AdSenseは最近（今月）、新しい広告の種類が増えました。
5t3fd3dさんのサイトには、それが表示されたと思われます。
毎回表示されるものではないようですので、再現されない場合があるのだと思われます。
ユーザーからその広告フォーマットを指定はできないと思われます。（新しいものですので、まだ良く分かりません。）
ただ、自動広告か「オート（AdSenseにおまかせ）」にした際には、その新しい広告フォーマットが表示されることがあるのだと思われます。
そのため「レスポンシブレクタングル」にしていただいて、広告フォーマットをユーザーが指定するとどうなるのか、確認をさせていただいた次第です。
相性ではなく、新しい広告が原因だと思います。
（それにしても領域の大きさを無視するとは。。。）
ウィジェットはお使いになっても大丈夫だと思います。
ただし、広告フォーマット指定する必要があると思います。
つまり「オート（AdSenseにおまかせ）」以外にします。
（表示する場所にも依るとは思いますが。
今はスマホですので、調べたり、長い文章を書くのが難しいです。
夕方～夜くらいに、もう少し調べてから、ご説明できればと思います。
2021-08-23 19:59
5t3fd3dさん
話がややこしいですし、少し難しい話もすると思います。
しかしながら、AdSenseは管理者さんの責任において掲載するものですし、説明には避けては通れないものもありますので、ご了承ください。
はみ出しているという事象は、今回私が見つけたものは、厳密には2つあります。
どちらもASenseの仕様であり、これをコントロールするのは、管理者さんの役割かと思います。
大きく分けて、2点お話させていただきます。
1点目として、以下の写真のものです。
これは良く「全幅表示」と呼ばれたりします。
モバイル時に、AdSenseは基本的には「全幅表示」がデフォルトです。
モバイル時に、AdSenseは基本的には「全幅表示」がデフォルトです。
これをコントロールするには、AdSenseのコードの「data-full-width-responsive」というタグパラメーターを使用します。
「true」であれば全幅、「false」であれば全幅ではなくなります。
デフォルトは「true」です。
コードの修正は、難易度が高いとお感じになる方もいらっしゃるようです。
そのため、Cocoonでは、簡単にメニューで変更できるようにしています。
それは、「Cocoon設定」－「広告」の「モバイル広告の幅を広くする」のチェックです。
これを外すことにより、「data-full-width-responsive」を「false」へと修正します。
ただし、これが有効な範囲は、「Cocoon設定」－「広告」に入力した広告コードのみです。
また、広告フォーマットを「広告コードをそのまま表示」にしていれば、テーマ側では修正せず、入力値ををそのまま出力します。
2点目です。
以下の写真のものがそれです。
これは、幅だけでなく、高さもかなりあります。
全画面に広告が表示されるタイプのもののようです。
（全画面インライン広告というらしいです。）
全画面に広告が表示されるタイプのもののようです。
（全画面インライン広告というらしいです。）
これは、最近導入された広告だと思います。
AdSense管理画面にも「お知らせ」が表示されています。
Google AdSense ヘルプ 全画面インライン広告のご紹介
https://support.google.com/adsense/answer/10907848?hl=ja
日本語ページでは、8月XX日になっているのですが、英語ページを確認したところ8月12日に発表されたようです。
広告フォーマットは、管理者さんが指定できます。
広告コードの「data-ad-format」というタグに指定します。
広告コードの「data-ad-format」というタグに指定します。
1点目と同じく、Cocoonではメニューから簡単に選択できるようにしています。
そして、Cocoonには「広告コードをそのまま表示」「オート（AdSenseにおまかせ）」を選択することもできます。
広告コードのデフォルトは「auto」ですので、コードを管理者さんが修正していなければ、これらの2つを設定している場合は、「data-ad-format」タグが「auto」になっていると思います。
これが「auto」の場合、「全画面インライン広告」が表示されることがあるということだと思います。
（「auto」の場合は、広告フォーマットはAdSense側が判断しますので必ずしも「全画面インライン広告」が表示されるとは限らない、都度変わると思います。）
1点目の「全幅表示」の場合は、要素のエリアをはみ出しても、上手く表示するようにAdSense側が画面幅やどれだけはみ出す必要があるのかを、上手く指定しています。
しかし、2点目の「全画面インライン広告」はまだ新しいこともあって、それらが上手くいっていない可能性があります。
なかなか再現できないこともあり、AdSense側がどういうスタイル指定をしているのかまでは、確認はできていないです。
（「全画面インライン広告」を導入しているサイトでないと確認できない。。。です。）
新しいフォーマットのようですので、この辺りはまだ知見は少ないと思います。
（少なくとも、私はないです。）
難しい感じになってしまいました。
ただ、事実をお伝えするには、こうなってしまいました。
フォーラムで説明するのは、なかなか難しいです。
要約すると。
2点目のような、「全画面インライン広告」が表示されないようにするためには、広告フォーマット（「data-ad-format」タグ）を「auto」にしてはダメだということだと思われます。
「おそらく」です。
自動広告と「data-ad-format」タグが「auto」の2つの場合に、「全画面インライン広告」が表示されるものと、今のところは思われます。
よって、「全画面インライン広告」を表示させないためには、Cocoonの広告フォーマットを。
- 「広告コードをそのまま表示」以外（デフォルトの広告コードを設定している場合）
- 「オート（AdSenseにおまかせ）」以外
上記の2つを満たす必要があるということだと思われます。
2021-08-23 20:40
ふと思ったのは。。。
おそらくAdSenseの仕様ですから、AdSenseのコミュニティでお問い合わせいただくと、より詳しいことが分かるかもしれません。
本家ですし、詳しい方がいらっしゃるかと思います。
Topic starter
2021-08-23 23:15
@mk2_mk2 さん
度々ありがとうございます。
今回の疑問は２点に分けてご説明いただいたうちの２点目についてです。
アドセンス側の仕様変更が原因の可能性があるのですね。わかりやすい説明をありがとうございました。
インデックスページではアドセンスにおまかせにすれば投稿のアイキャッチに近い広告を出してくれるので重宝していましたが、この調子が続くのであれば今後はレスポンシブレクタングルでいこうと思います。
アドセンスの仕様変更について調べてアドセンスのフォーラムでも質問してみようと思います。
どうもありがとうございました。
わいひら reacted
2021-08-23 23:39
5t3fd3dさん
仕様変更と言えば仕様変更ですね。
何となくですが、仕様追加というイメージではいます。
今までの仕様に「全画面インライン広告」が追加されたという意味では。
その辺は言葉の綾でしょうから。。。
もし、AdSenseのコミュニティでご回答があり、何らかのことが分かった場合には、フィードバックしていただけると、大変ありがたいですし、他の方々も助かるのではないかと思います。
可能でしたら、宜しくお願いします。
ちなみに。。。
記事中の「全画面インライン広告」は、サイズ的にも表示できると思いますので、AdSenseの判断は正しいんだと思います。
ただ、表示位置の調整が現段階ではできていない。。。という感じに見えました。
（全幅表示の方は、上手くやってくれるんですけど。）
しかし、インデックスページについては、そもそも領域の広さ的に無理があるように見えます。
そこに、「全画面インライン広告」を表示しようとしてしまうのは、まだAdSense側の解析なのか判断なのかが、上手くいっていないのかなぁ。。。と思ってしまいます。
本当のところは分かりませんけど。
更にちなみに。。。
お問い合わせの際には、具体的にどのページのどの場所かが、はっきりと分かるようにしていただけると大変助かります。
インデックスページは直ぐ分かりましたが、記事中の広告については、いくつもあって直ぐには分かりませんでした。
最初は、どの記事なのかも分かりませんでした。
ご本人でないと、これはなかなか探せないです。
そして今回の事象は、インデックスページを見ただけでは良く分かりませんでした。
以前から何度か見た、はみ出す現象かな。。。くらいにか思いませんでした。
しかし、記事中のものを見て、初めてピンときました。
そういうこともあり、どこを見れば良いのかをはっきりとしていただけると、探す時間なども短縮できて大変助かります。
実際の表示やコードなどを比べながら調べたりしますが、今回はなかなか再現できず、どの場所を見て良いのかも、分からないことがありました。
もし今後もお問い合わせいただくことがあれば、ご協力いただきたいです。
わいひら reacted
2021-08-24 16:48
5t3fd3dさん
丁寧にありがとうございます。
只今スマホからですので、簡単に失礼してしまいます。
今回のことは、まだ新しい追加仕様だと思われ、私も5t3fd3dさんにトピックを立てていただかなければ、きっと気づきませんでした。
そういう意味では大変勉強になりました。
未知のものだけに、私も良く分からず、可能な限り詳しい情報が欲しいと思っただけですので。
今後ご協力いただければ、大変助かります。
アドセンスのコミュニティで聞いてみた際は何かわかることがあったら別トピックでシェアする予定です。
はい、そうしていただけると、多くの方々にとって有益だと思います。
よろしくお願い致します。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。