特典機能について

AdSense広告表示状態での画面幅変更時のレスポンシブ動作不調を解決したい | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
AdSense広告表示状態での画面幅変...
 
共有:
通知
すべてクリア

[解決済] AdSense広告表示状態での画面幅変更時のレスポンシブ動作不調を解決したい


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

サイトの特性上、大きな表が含まれており、読者がスマホ(Android:1060x2120)で閲覧する際には、時々画面を「横向き」にしていただきたい部分があるのですが、AdSense広告の表示状態では、再度「縦向き」にした時に、”正常な”レスポンシブ動作が停止してしまいます。

このとき、横幅はレスポンシブ応答をしていないAdSense広告に支配された状態で表示されます。

具体的には、例えば、⇒解決策の創出

一方、AdSense広告の非表示状態では、正常にレスポンシブ動作します。

例えば、⇒原因の分析

ただ、AdSense広告の表示状態でも「縦」⇒「横」⇒「縦」では、ダメですが、更に続けて「横」⇒「縦」とスマホの向きを変えると、元の正常な表示(欠けることもなくページのすべてが表示)となります。

もちろん、該当ページを再読み込みすれば正常にレスポンシブに動作します。

数日前にテーマを待望のcocoonに変更させていただいたたばかりで、まだ、何か設定のミスなどがあるのかもしれませんが、テーマ変更する前はこのような現象はありませんでした。頭を抱えております。

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

お手数をおかけしますが、よろしくお願いします。

(他のフォーラムにも同様の質問があるのかもわかりませんが、発見できませんでした。)

----------------------------------------------

サイト名:ロジカルシンキング研修.com

サイトURL: https://www.ltkensyu.com

ホームURL: https://www.ltkensyu.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/90.0.4430.212 Safari/537.36

サーバーソフト:LiteSpeed

サーバープロトコル:HTTP/1.1

エンコーディング:br, gzip, deflate

言語:ja,en-US;q=0.9,en;q=0.8

----------------------------------------------

テーマ名:Cocoon バージョン:2.2.9

カテゴリ数:4 タグ数:30 ユーザー数:1

----------------------------------------------

子テーマ名:Cocoon Child バージョン:1.1.2

style.cssサイズ:845バイト

functions.phpサイズ:203バイト

----------------------------------------------


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hideo1516

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

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


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

わいひらさん

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

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

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

 


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 

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


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

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

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

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hideo1516

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

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


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

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

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

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

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

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


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

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

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

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

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

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

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

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

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

 


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

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

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

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

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

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

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


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

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

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

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

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

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


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

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

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

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

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hideo1516

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hideo1516

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hideo1516

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

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

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


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  
投稿者:: @yhira

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

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

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

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


わいひら 件のいいね!
hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  
投稿者:: @yhira

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

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

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


hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  
投稿者:: @yhira

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

やはりそうでしたか。

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

 


わいひら 件のいいね!
hideo1516
(@hideo1516)
Active Member
結合: 6か月前
投稿: 16
Topic starter  

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

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

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

困りものですね。

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

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

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

good night!


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hideo1516

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hideo1516

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 
投稿者:: @hideo1516

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

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

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


hideo1516
 hideo1516
(@hideo1516)
ゲスト
結合: 6か月前
投稿: 8
 

@yhiraさん

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

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

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


mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2286
 

hideo1516さん

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

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

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

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

 
 
返信直後に、きちんと反映されているか確認することをお勧めします。
 
 
そして、返信が反映されていないような場合は、お手数ですが再度返信していただくしかないと思います。

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 

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

制限はないです。


hideo1516
 hideo1516
(@hideo1516)
ゲスト
結合: 6か月前
投稿: 8
 

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

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

投稿者:: @yhira

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

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

投稿者:: @hideo1516

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

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

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

つまり、

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

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


hideo1516
 hideo1516
(@hideo1516)
ゲスト
結合: 6か月前
投稿: 8
 

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

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

その結果、1.は解決しました。

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

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

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

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

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

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

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


hideo1516
 hideo1516
(@hideo1516)
ゲスト
結合: 6か月前
投稿: 8
 

わいひらさん

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

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

とりあえず、当初サイト 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
----------------------------------------------
This post was modified 6か月前 by わいひら

hideo1516
 hideo1516
(@hideo1516)
ゲスト
結合: 6か月前
投稿: 8
 

続きです。

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

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


hideo1516
 hideo1516
(@hideo1516)
ゲスト
結合: 6か月前
投稿: 8
 

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 

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

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

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


hideo1516
 hideo1516
(@hideo1516)
ゲスト
結合: 6か月前
投稿: 8
 

わいひらさん

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

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

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

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

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

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

 

 


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 

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

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


hideo1516
 hideo1516
(@hideo1516)
ゲスト
結合: 6か月前
投稿: 8
 

わいひらさん

ありがとうございます。

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 

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


共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon
タイトルとURLをコピーしました