投稿者:: @hideo1516

なお、同サイトでは、AdSenseは自動広告のみの使用で、遅延読み込みさせておりますが、テーマ指定の広告設定方法に変更しても、手動広告のみに変更しても上記の振る舞いは同様でした。

試しに、テーマの広告設定方法にしていただけますか。

わいひらさん

お忙しいところありがとうございます。

AdSense広告を、マニュアルに従って、すべて手動広告に設定し、自動広告も削除しました。

スマホでの確認の結果は同様のものでした。

追記）因みにテーマcocoonで作成されている他の幾つかのサイトでも、恐らく同様の現象が生じているように思われます。

例えば、【Cocoon】アドセンス自動広告の設定方法は2ヶ所だけでOK ...

当サイトを含め、同様の現象が見られるサイトでは、PC画面を表示させておき、横幅を拡大・縮小しますと、縮小時に画面下部に横スクロールバーが表示されます。スクロールバーを、そのまま右方向に移動すると、AdSense広告部分だけが拡大表示のままになっています。

やっぱ、AdSenseの仕様のような気がします。
こちらのページはCocoonではありませんが同様の状態になります
https://ultimate-ez.com/2018/02/24/4979/
もしCocoonテーマの問題であれば、他テーマでは正常に動作すると思うのですが。

なるほど、確かにそうなっていますね。

しかし、少し前まで、テーマlightningを活用させていただいておりましたが、AdSense広告ではこのような現象は経験しませんでした。

「解決策の創出」ページは、SearchConsoleからモバイルユーザビリティの指摘を受け、その際に表示された画像が、ちょうど、スマホの「縦」⇒「横」⇒「縦」で表示されたHPページが縮小された画像でした。

同様のAdSense広告配置のサイトで、問題現象が見られないサイトも沢山ありますので、何らかの対応策があると考えられます。

手前勝手な問題提起ですから、すぐにでなくても結構ですが、何か解決策にお気づきになられましたら、ご教示いただきたいと存じます。

恐縮ですが、本トピックは閉じないで置かせていただきます。

投稿者:: @hideo1516

同様のAdSense広告配置のサイトで、問題現象が見られないサイトも沢山ありますので、何らかの対応策があると考えられます。

正しく自動広告が表示されているサイトやページをご存知なんですね。
僕がいくつか探してみた限りでは、まともに表示されているものがなくて。
正常表示されているサイトをご存知でしたら、URLを教えていただければ幸いです。
デベロッパーツールなどで、そのソースコードを調査してみます。

遅い時間までありがとうございます。

例えば、【WordPress】子テーマとは？仕組みや使い方を解説【上書き防止】などはどうでしょうか。

でも、よく見ると横幅を縮小した際に、Ad広告の表示を切り欠いているようですが。

一方、GoogleのAdSenseヘルプページに対応方法のヒントになりそうなことが書かれています。⇒ディスプレイ広告ユニットのレスポンシブな動作について

ブレークポイントの位置設定にも関係がありそうで、そのページのリンク先レシポンシブコードの修正方法にも具体的な対策が書かれています。

わいひらさん　お世話になっております。

もしかすると僕の認識違いで、テーマを変更する前にはAd広告表示が、異なる別の振る舞いをしていて、スマホ画面の「縦」⇒「横」⇒「縦」操作に、「広告が切れるだけ」で、必ずしもレスポンシブに反応していなかったのかもしれません。

むしろcocoonがまともに動作しているのではと思います。

以下の現象から、当初目的に沿った直接的な解決策はないものでしょうか。

「解決策の創出」ページには現在、本文の最上部と最下部に全幅広告がありますが、最下部広告の方は、「縦」⇒「横」⇒「縦」に正常に応答しています。

しかし、少なくとも最上部広告の方は、一旦、横幅サイズに拡大表示された後は、「縦」に戻したときに、拡大表示タイプのままであるため、ページのコンテンツ部分の横幅が、それに応じて縮小表示してしまうようです。

それでも続けて「横」⇒「縦」とすると元の正常な表示に戻ります。

もし、時間があればよろしくお願いします。

ソースコードを見ていきますと、わけがわからなくなって参りました。

昨晩以降、現在のAd広告は自動は「オフ」にしてあり、「スポンサーリンク」文字列つき手動広告のみを添付画像通りの位置だけに設定してあるはずなのですが、・・・。

サイトの「解決策の創出」ページ（固定ページ）には、グローバルメニュー直下（本文最上部）と本文最下部に1件ずつ表示されています。

ソースコードを見る限り、最下部Ad広告は設定通りに配置されていますが、「スポンサーリンク」の文字列とともに最上部Ad広告に相当するコードが見当たりません。

また、表示されないはずのサイドバーの新着記事最上部に存在するようにコード表示されています。（これは、そういう仕様かも）

単純な想像ですが、他の「インデックスページ」の一部分がどこかに隠れているのでしょうか？

どうやら最上部の広告は自動広告のようで、謎の一部が解けそうです。

AdSense自動広告の中でもタイトル下の大きな広告は「自動広告をオフ」にしても、最長で2日間ほど消えないケースがあるとのことです。⇒アドセンスの自動広告が消えない時の対処方法

自動広告コードをコードの記述から外してもそのようなことになるとは！Googleの先生方どうしで協議していただきたいものです。

とりあえず、AdSenseサイトで一旦「自動広告をオン」して、別の固定ページ戦略案の創出ページを広告表示除外ページに設定し再び「オフ」にし、短時間で広告が消えること、その他の手動広告のみの場合では問題現象が生じないことを確認してみます。

昨晩の”手動広告のみ”の状態と考えて、確認した作業も無駄になってしまいました。

最上部にAds手動広告を設置し、一部の確認はできました。（戦略案の創出などページ：シークレットモードでもスマホでは広告が表示されず、PCで画面の横幅縮小時にスクロールバーが表示されないことで確認。）

ここまでの確認範囲で、少なくとも最上部に登場する、全幅のAdSense自動広告を載せなければ、目的のスマホによる「縦」⇒「横」⇒「縦」操作において、サイト読者の不都合は生じないものと判断しました。

テーマcocoon固有の問題ではなかったと言えます。

それでも、「最上部に登場するAds自動広告のみが期待通りに反応しないという課題」を解決していただければ、僕にとって使いやすく、格段に優れた、嬉しいテーマになりますので期待しております。

わいひらさん、お騒がせの上、貴重なお時間を浪費させてしまい、申し訳ありませんでした。

当初の問題は一応解決したものと考えます。

ありがとうございました。 ? 

投稿者:: @hideo1516

例えば、【WordPress】子テーマとは？仕組みや使い方を解説【上書き防止】などはどうでしょうか。

このテーマもCocoonでは。だとしたらやっぱテーマの問題ではないのでは。
また、これのどの部分か出来ればスクリーンショットもいただければと思います。
自動広告なので出現する場所は違うかもしれないので。

投稿者:: @hideo1516

一方、GoogleのAdSenseヘルプページに対応方法のヒントになりそうなことが書かれています。⇒ディスプレイ広告ユニットのレスポンシブな動作について

ブレークポイントの位置設定にも関係がありそうで、そのページのリンク先レシポンシブコードの修正方法にも具体的な対策が書かれています。

ここら辺のことは、すべて試してみたことはあるのですが、これでうまくいったことは残念ながらないんです。。

投稿者:: @hideo1516

テーマcocoon固有の問題ではなかったと言えます。

それでも、「最上部に登場するAds自動広告のみが期待通りに反応しないという課題」を解決していただければ、僕にとって使いやすく、格段に優れた、嬉しいテーマになりますので期待しております。

Cocoon固有の問題でない場合の修正方法は僕にもわかりかねます。
ネットに書かれている方法は一通りやったことがあるのですが、直ったことはなくて（他テーマサイトを調査しても正常表示されてなくて）。
なので、これまで何度かレスポンシブ動作について書き込みがあったのですが、正常動作しているサイトの提示をお願いしても、一度もでできたことがないです。
正常動作しているサイトを調査出来れば、ある程度なにか分るとは思うのですが。

投稿者:: @yhira

これのどの部分か出来ればスクリーンショットもいただければと思います。

例の「PC画面の横幅縮小時に横スクロールバーが表示されない」ことが「スマホの縦⇒横⇒縦回転時におかしな挙動をしない」ことと対応関係にあることから、単純に「正常な振る舞いでは」と捉えて例示しました。

前のテーマも恐らくそのように反応していたせいで、「正常」だったと感じていたものと思います。

その後、「違うかな」と思い、継続して、広告を含めてレスポンシブに変化する正に「正常」と言えるサイトを探しましたが、僕もまだ発見できておりません。

投稿者:: @yhira

Cocoon固有の問題でない場合の修正方法は僕にもわかりかねます。

既に十分すぎるほど様々なことをご確認・研究のうえ、ご経験されておられる、わいひらさんに素人が失礼なことを申し上げたかもしれません。 ? 

それでも、わいひらさんであれば、下部の自動広告では、途中で切れることもなく、むしろ正常にレスポンシブに動作していることから、最上部の自動広告も正常に動作させられるのではないか、という僕の期待をお伝えさせたいただきました。

投稿者:: @yhira

これまで何度かレスポンシブ動作について書き込みがあったのですが、正常動作しているサイトの提示をお願いしても、一度もでできたことがないです。
正常動作しているサイトを調査出来れば、ある程度なにか分るとは思うのですが。

やはりそうでしたか。

引き続き、正常動作しているサイトをロングレンジで探してみます。

本件に関連して、GoogleAdSense自動広告設定に起因して、テーマの広告設定を妨害しているということはないでしょうか。

AdSense自動広告の細かな仕掛けがブラックボックスの中に置かれているみたいで、

1. 「オフ」にしてもなかなか機能せず、
2. サイト上の特定場所への表示の削除操作をしても「このページでは 4 個の広告エリアが削除されませんでした」という結果
3. コードにも何ら表示されないため、

困りものですね。

実は、当サイトに投稿ページが複数あるのですが、広告設定にチェックが入っているにもかかわらず、手動Ads広告は一向に表示されていません。（該当編集ページでも広告非表示にしていません。）

ウィジェット[C]広告（PC用）を、例えば、投稿「ロジカルシンキングで問題解決！みんなで使う問題解決プロセス！」ページの「コンテンツ上部」に設定しても表示されません。

すみません。これは別件になりますか。

good night！

投稿者:: @hideo1516

それでも、わいひらさんであれば、下部の自動広告では、途中で切れることもなく、むしろ正常にレスポンシブに動作していることから、最上部の自動広告も正常に動作させられるのではないか、という僕の期待をお伝えさせたいただきました。

こちらの「下部の自動広告」のURLとスクリーンショットをいただいてよろしいでしょうか。
もしかして、こちらのページがそうですか。
https://takapon.net/wp_child_theme/

投稿者:: @hideo1516

本件に関連して、GoogleAdSense自動広告設定に起因して、テーマの広告設定を妨害しているということはないでしょうか。

これもちょっと考えづらいです。
通常だったら、ブラウザキャッシュ、プラグインのページキャッシュ、サーバーのキャッシュなどを疑うかもしれません。

投稿者:: @hideo1516

ウィジェット[C]広告（PC用）を、例えば、投稿「ロジカルシンキングで問題解決！みんなで使う問題解決プロセス！」ページの「コンテンツ上部」に設定しても表示されません。

すみません。これは別件になりますか。

申し訳ないですがフォーラムの案内にありますように、出来る限り1つのトピックに対して1つの質問でお願いいたします。

@yhiraさん

昨晩、2件「返信を追加」したのですが、どこかに行ってしまったようです。

サイドバーの「最近の投稿」にも表示されていません。

返信回数に制限があるのでしょうか？

hideo1516さん

私からも見当たりません。

特に返信回数の制限は聞いたことはありませんが。。。

ありがちなのは、ログインしない状態（ゲスト）で、reCAPTCHAのチェックを忘れてしまうケースです。

返信できたようで、密かにエラーになっていて気づかない場合があります。
（添付画像の右上のようなエラーメッセージが表示されます。）

返信回数に制限があるのでしょうか？

制限はないです。

そうでしたか。次回から注意して確認します。

では、昨晩返信させていただいたつもりの事柄を思い出しながらメモします。

投稿者:: @yhira

こちらの「下部の自動広告」のURLとスクリーンショットをいただいてよろしいでしょうか。

上下にAds広告を設置している該当サイトがなかなか見つからないのですが、これは、自サイトにおける、下記現象の観察結果に基づいています。

投稿者:: @hideo1516

「解決策の創出」ページには現在、本文の最上部と最下部に全幅広告がありますが、最下部広告の方は、「縦」⇒「横」⇒「縦」に正常に応答しています。

しかし、少なくとも最上部広告の方は、一旦、横幅サイズに拡大表示された後は、「縦」に戻したときに、拡大表示タイプのままであるため、ページのコンテンツ部分の横幅が、それに応じて縮小表示してしまうようです。

それでも続けて「横」⇒「縦」とすると元の正常な表示に戻ります。

つまり、

1. 最初の「縦」画面では、すべてが正常にレスポンシブ動作をしています。
2. 次の「横」画面でも、すべてが正常にレスポンシブ動作しています。
3. 次の「縦」画面に戻したとき、最上部広告の横幅＝画素数が直前の「横」画面幅のまま残りますが、表示上の画面では、あたかも最上部広告が横幅を支配しており、相対的に縮小されたコンテンツが表示されます。
4. 最下部の広告は、常に欠けることなくコンテンツ幅と一致して動作しています。
5. そのまま、続けて「横」画面にすると、上記２．と同じ結果になります。
6. そして、再度「縦」画面に戻すと、最初の１．の表示状態に戻ります。

結局、上記３．のみが具合が悪いということになっております。

昨日は日曜日という機会でもあり、このままの表示状態で放置しておくことは避けたいので、下記目的で、一旦、前のテーマに戻すことにしました。

1. SearchConsoleからの「モバイルユーザビリティの指摘」をクリアーしておきたい。
2. 以前は何故、問題に気付かなかったのか確認したい。

その結果、１．は解決しました。

２．の結果はあくまでも、例によって現象論に過ぎませんが、この前の返信における３．

次の「縦」画面に戻したとき、最上部広告の横幅＝画素数が直前の「横」画面幅のまま残りますが、表示上の画面では、あたかも最上部広告が横幅を支配しており、相対的に縮小されたコンテンツが表示されます。

部分だけが異なっており、最上部広告の横幅は表示に対して支配せず、横幅を支配するのはコンテンツでした。

結果的に、最上部広告は半分で切れてしまっていますが、コンテンツは常にレスポンシブに振舞っています。⇒例、「解決策の創出」ページ

これで、サイト運営者としては実害がないため、気づかなかったのだろうと思います。

というわけで、具体例を変更してしまいましたので、同様の現象が見られる、僕が関与している別のサイトをこちらに載せておきます。⇒Friendly Bridge 日本留学支援センター

気が付いた点ですが、どちらも「表」があるページという点が共通で、「表」がメディアクエリで設定したコンテナー幅を超えるなど、完全にレスポンシブに動くような条件になっていない場合には、こうした現象が起こるのかもしれません。

わいひらさん

いつも大変お世話になっております。

しばし休みましたが、このフォーラムの同じ課題にて、再開させていただきますので引き続きよろしくお願いいします。

とりあえず、当初サイト https://www.ltkensyu.com/ は、一旦、元のテーマに戻しておりますが、何としても解決して、魅力的なcocoonテーマを活用したいと思っています。

課題の切り口を少し変えてみます。別のサイトで、次の画像をご覧いただきたいと存じます。

1. （上段2つの画像）サイト：cocoonで作成した https://www.japliuxue.com/ にはAds広告があり、デベロッパーツールで、「iPad」表示→「iPhone表示」とした際の変化の様子
2. （下段2つの画像）サイト（同上サイトの英語版）：cocoonで作成した https://en.japliuxue.com/ にはAds広告がなく、デベロッパーツールで、「iPad」表示→「iPhone表示」とした際の変化の様子

Ads広告がある場合の「iPhone表示」時は、サイト運営者・閲覧者にとって、やはり具合が悪いので解決したいところです。

----------------------------------------------
サイト名：Friendly Bridge 日本留学支援センター
サイトURL： https://www.japliuxue.com 
ホームURL： https://www.japliuxue.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
WordPressバージョン：5.7.2
PHPバージョン：7.4.12
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：br, gzip, deflate
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.2.9
カテゴリ数：2
タグ数：0
ユーザー数：2
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：1
JavaScript縮小化：0
Lazy Load：1
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
All In One WP Security 4.4.8
BackWPup 3.9.0
Broken Link Checker 1.11.15
Classic Editor 1.6
Contact Form 7 5.4.1
Download Monitor 4.4.4
EWWW Image Optimizer 6.1.5
Google XML Sitemaps 4.1.1
Language Selector Related 1.1
Redirection 5.1.1
TinyMCE Clear Float 1.3.2
WP Multibyte Patch 2.9
WP Super Cache 1.7.3
----------------------------------------------

続きです。

当初のサイト https://www.ltkensyu.com/ で、テーマを以前のテーマに戻して、全幅広告の有無による表示への影響をデベロッパーツールで確認した画像です。

「iPad表示」→「iPhone表示」で、全幅広告はカットされていますが、サイトは閲覧者にとって好ましい全幅表示になっています。

念のため、当方のサイトだけがこのような振舞になるのか、それとも他のサイトでも同様な現象が生じるのかについて、調べてみました。

例えば、全幅広告のある、cocoonで作成されたサイト https://sleep-so.com/adsense-pageview0/ でも、デベロッパーツールで「iPad表示」→「iPhone表示」を実施しますと、先のような現象が生じていることを確認できます。

添付画像のようなはみ出る形での対処で良いのなら以下のCSSを子テーマの style.cssに追加するのでもいいのではないかと思います。

.google-auto-placed{
  overflow: hidden;
}

よろしければ、不具合環境で試してみていただいてよろしいでしょうか。
それでよろしいようであれば、親テーマ側にも適用しようと思います。

わいひらさん

お忙しいところ、ありがとうございます。

ご指定いただいた通りにcssを追加したところ、添付画像の通り、サイトが表示されました。

これなら、サイト閲覧者にとってもOKだと思います。

簡単なようですが、僕などとても思いつくものではなく、大変助かりました。

確認しながら、再度、弊サイトのcocoon化にチャレンジします。

本当にありがとうございました。

https://www.ltkensyu.com/
上記のサイトを提示していただけて、hideo1516さんがどのようにされたいのかが分かったので助かりました。
問題なかったようなので、先程紹介したコードを親テーマの方にも適応しておきます。
次回アップデートで適用させたいと思います。

GitHub上のファイルには適用しておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
https://github.com/yhira/cocoon/commit/03b9c5777c0667662ccb30b18f67124c98a7f9a6#diff-b78be019f1dc6d57753ea900c3805b114cd53ab7c0db836cc081836df1b99b7aR1871

わいひらさん

ありがとうございます。

ただ、対象がAdSense”自動”広告だけで宜しいのかどうか、僕は未確認ですのでその点はご承知おきいただきたいと存じます。

確か、他はすべて同様の対応をしてあります。