かぶとたいぞうです。
スマホのブラウザchromeを最新バージョンに更新すると、このブログのレイアウトが崩れて、ページの下の方のコメント欄などが一番上に表示されて本文が読めなくなるという障害が1ヶ月ほど前から発生しておりました。
不思議なことに、そのような現象は最新版のchromeでしか起こりません。しかも最新版のchromeでもPCでは起こりませんので、スマホのchromeの設定で「PCサイト」にチェックを入れると正しく表示されるのです。
最新版のchromeのスマホにだけ発生するバグ
Firefox、Safariなど、他の主要なブラウザではスマホでもPCでも正常に表示されます。
最新版chrome特有の、しかもスマホにだけ起こる障害なので、無視してもいいかと思いましたが、最新版chromeのユーザーはけっこういるらしく、何人かの読者の方からもメールでレイアウト崩れの。指摘を受けました。
いきなり記事下のコメント欄が表示される
いきなりコメント入力欄が画面の一番上に表示されるので、「ユーザー名やメールアドレスを入れて何かコメントをしなければ記事を読めないように細工をしたのか」とお叱りのメールもいただきました。
結論から言えば、WP（ワードプレス::このブログを作っているサーバー上のワープロのようなアプリケーションソフト）のテーマのソース記述を変更して、無事にレイアウト崩れを修正することができました。
若い頃にSEをしていて本当に良かったと思います。
【関連性の高い記事】
WPのソースを修正してレイアウト崩れはなおった
今までご不自由をおかけしていた読者の方々にお詫びを申し上げます。
今後はもう大丈夫なのでご安心ください。
さて、ここから先は技術情報なので、WPやグーグルアドセンス広告の記述、PHPやCSS（いずれもWPのプログラムソースのようなもの）にご興味のある方だけお読みください。
いささか専門的な内容なので、技術的なことがまったく分からない人が読んでも理解できないかもしれません。
WPのレイアウト崩れ修正に関する技術情報
私はCatch EvolutionというWPのテーマを使っています。このテーマはトップページと各記事のページに分かれていて、トップページには記事の抜粋だけが一覧表示されます。そして抜粋の最後の「続きを読む」をクリックすると各記事のページに飛ぶのです。
Catch Evolutionをいじってある
私はCatch Evolutionを構成するいくつかのcssファイルやphpファイルをいじりました。表示に関する記述変更とグーグルアドセンス広告掲載のための追加記述です。
表示に関する記述変更は、年寄り向けにブログ記事の文字を大きく表示したかったのです。
Catch Evolutionは機能的にも見た目もいいのですが、文字がやや小さく、また文章がスマホ画面の端から端まで表示されず、少し外側に空きを作るのです。大きな字で画面の端から端まで表示させるよう作りかえようと思ったのです。
スタイルシートのボーダーやパディング、フォントサイズ、画面幅変更がレイアウト崩れの原因か
その時にスタイルシートのボーダーやパディング、フォントサイズ、画面幅などを変えました。
ボーダーやパディングはブラウザによって捉え方が違います。私は自分で改良した後、各ブラウザで表示のされ方をチェックしました。そしてその時（3年前）はどのブラウザでもスマホでも正しく表示されることを確認しました。
今回chromeの最新バージョンでレイアウトが崩れるのは、chromeのボーダーやマージン、パディングの判断に変更があったからだろうと予想しました。
レイアウト崩れの原因はpaddingやmargin、borderではなかった
しかしそうではありませんでした。自分が変更した部分をもとに戻してもやっぱりレイアウトは崩れたままでした。
もう少し詳しく見ようと思いましたが、春なので畑仕事が忙しく手を付ける暇がありませんでした。
そこでサーバーの管理をしていただいているシステム会社に依頼して技術者のかたに見てもらうことにしました。
他の人が見たらレイアウト崩れがないと言う
ところが、技術者のかたが最新版のchromeで私のブログを見ると正しく表示されると言うのです。
アンドロイドのバージョンを変えてもやっぱり正しく表示され、レイアウト崩れは起きていないと言います。
私はかつてプログラム開発をしていたから分かるのですが、特定のOSやバージョン、特定の機種にだけ起きる不具合というのがあるのです。メーカーによってはOSを少しいじるのです。だからテストを行うにもいろいろな機種、OSとバージョン、機器構成などで行います。
ちなみに私のスマホはギャラクシーですが、今回見てくれた技術者のかたにこれ以上頼むとすれば、いろいろなメーカーのスマホ、アンドロイドバージョンを揃えなければなりません。
重い腰を上げて自分で見ることにした
それならやっぱり自分で見たほうが早いと思い、農作業がひと段落したタイミングで腰を据えてソースを最初から見ていきました。
ところがいくら見ても分かりません。私は自分が変更した箇所には必ず注釈文でメモを残します。プログラマーだったころからの習慣です。変更箇所をすべて見ましたがおかしなところはないし、デフォルトに戻してもだめでした。
WPのテーマを最新版のデフォルトに変更する
そこでテーマを最新版にアップデートしてすべて最新版のデフォルトで動作確認することにしました。
もちろん現在のテーマの構成ファイル全てと、自分が書いた記事を全てダウンロードしてからテーマを最新版に更新しました。
すると予想通り最新版chromeのスマホでも正しく表示されました。
デフォルトの最新版テーマだと正しく表示される
Catch Evolutionの最新版は2020年の12月に出ています。chromeの最新版はその後だと思います。だからおそらくCatch Evolutionがchromeの変更に対応したのではありません。
だとすると、ボーダーやパディングなどではなく、それ以外の私が加えた変更が最新のchromeで引っかかっているのです。
レイアウト崩れの原因はグーグルアドセンス広告表示の記述しか考えられない
考えられるのは、グーグルアドセンス広告を表示させるための追加記述しかありません。
テーマを最新版にアップデートしたからレイアウト崩れがなおったのではなく、テーマを最新版にしてグーグルアドセンス広告の記述が全て消えたからレイアウト崩れがなおったのです。
また一つ一つグーグルアドセンス広告の記述をソースに加えていき、その都度スマホで画面を確認すれば、どこかの時点でレイアウト崩れが発生するはずです。
ちなみに私がグーグルアドセンス広告の記述を入れているソースは3つです。ファンクションとヘッダと各記事です。
その3つだけファイルごと戻せばいいかと思いましたがだめでした。最新版テーマの各ファイルの連携が切れてエラーが出ました。
だから私が3年前に記述した各ソースをエディタで開いて、グーグルアドセンス広告の記述部分を最新版の方に一つ一つコピペしていきました。
原因はヘッダファイルに記述した広告だった
一つコピペしてはスマホ画面を確認してまた次をコピペするという作業を慎重に行なっていきました。するとヘッダのphpファイルに記述した、全ページのタイトル下の広告表示がレイアウト崩れの犯人だと分かりました。
トップページにも各記事ページにも、タイトルの下に広告が載るよう、ヘッダphpのタイトル表示の後の〈body〉部内の、各記事ページに飛ぶ命令の直前にグーグルアドセンス広告の記述を加えていたのです。
う少しややこしいところに入れた広告記述ですが、ここに入れないと全ページのタイトル下には広告が表示されないのです。
〈body〉タグ間に記述した広告表示記述でレイアウト崩れを起こすchromeのバグ
今までのchromeではこの記述がスマホで表示しても通用していたのに、どういうわけか最新のchromeはヘッダファイルの〈body〉タグ間に記述した広告表示記述でレイアウト崩れを起こすバグを持っているようです。しかも特定のスマホでしか発生しない、かなりナローな発生条件です。
察するに〈body〉部で各記事ページに飛ぶべきところを、グーグルアドセンス広告表示記述に邪魔されて各記事に飛べなかった（エラーで戻った）ので、いきなり記事下のコメント欄が表示されたのでしょう。
→グーグルのchrome開発担当者のかた、見てますか？
head部のグーグルアドセンス自動広告表示記述は無事
ちなみに同じヘッダファイルでも〈head〉タグ間に記述しておいたグーグルアドセンスの自動広告表示記述はまったく問題がありませんでした。
対策として、全ページのタイトル下の広告は外しました。クリックされやすい広告だったので今後は広告収入が減りますが、そのぶんスッキリしたのでいいでしょう。
最新版のchromeのスマホで、しかも特定のメーカーか機種またはアンドロイドバージョンのスマホで、さらにヘッダファイルの〈body〉部に広告を入れているというナローな条件でのみ発生する隠れたバグです。あまり多くの人のお役に立つ情報とは思えませんが、最後まで読んでいただきありがとうございました。
ごきげんよう。
【関連性の高い記事】
【かぶとたいぞう有料ノート】
この記事があなたのお役に立った場合、下の「いいね！」をクリックして頂けると、たいへんはげみになります。
【あわせて読みたい】
同じカテゴリーの最新記事５件
-
【お知らせ】スマホが水没したため復旧するまでしばらくお待ちください -
「今後のドル/円相場はどうなるか」Googleの創作型AI「Bard」に聞いてみた -
【パタヤ生活】私にとって、毎日ブログを書くのは良いこと。生活の張り合いになっている -
今でも時々読者のかたから、会って欲しいという内容のメールをいただくが -
【かぶとたいぞう人気記事ベスト5】私のブログで一番読まれている記事、2023年2月
「カブとタイ」をいつもお読みいただき、まことにありがとうございます。
著者かぶとたいぞう拝。
記事のカテゴリー/タグ情報