JavaScriptの古い書き方をしているページに要注意!コメントアウトがレイアウトを崩しているかも!?

今日(2019/12/19)、記事内に<javascript>を記述しているページ、『日付を自動更新で表示させる! 簡単コピペ!!』で表示がおかしくなっていることに、たまったま気づきました。

レイアウト崩れ

本来は左のような表示になってないとダメなのですが、右のように中身がすっぽりなくなり、レイアウトが崩れてなんのページがさっぱりわからなくなっていました。。

原因の究明

Google Adsenseの『広告掲載の自動化』が原因?

最初は最近勝手に変更されたGoogle Adsenseの『広告掲載の自動化』が悪さをしてるのかな?と思ったんですよね。何もいじった記憶はないのに、管理しているページのほとんどで、Google Adsenseの広告が意図しないところにやたらと表示されてて、正直少々うざく感じていたんです。あまり記事中に広告をいっぱい出したくない&デザインもマージンとかきちんと設定されてないから崩れたりもしたので。
ただこれからはこれが主流になるようなので、時代の流れに身を任せて、広告のマージンを少し調整できるようにcssを追加してそのまま表示させるようにしてたんです。

そんな訳で、原因は8割りがたこれだろう。と決めつけ、まずはGoogle Adsenseの『広告掲載の自動化』をこのページだけ除外してみたのですが、、、いくら待ってもレイアウトの崩れが直らない。。

残念ながらGoogle Adsenseの『広告掲載の自動化』が原因ではありませんでした。。

「Saerch Regex」で一括置換したから?

ってことで、次は『「Saerch Regex」で何かを一括置換した時に、閉じタグ等がなくなったのかな?』と思い、とりあえず要素検証してみました。

すると、どうやら<javascript>の閉じタグが文字化けしていて、それが原因で</javascript>がなくなり、ページの下の方まで見当たらずにレイアウト崩れが起きていたようです。

要素検証

ってことはやっぱり『「Saerch Regex」で何かを一括置換した時に、何かがおかしくなったってことね』と思い、編集画面をみてみたのですが、おかしいところは何もない。

文字がバグったのかとも思い、</javascript>の前後を打ち直したのですが、問題は解消さえず。。

原因は古い記述

ってことで辿り着いたのが、このjavascriptの古い記述のコメントアウトでした。

javascriptの古い記述

このコメントアウトをとると、簡単に元に戻ってくれました。ホッ。。

まとめ

実はこのコメントアウト、昔から気にはなっていたのですが、この記述が普通だった時にこの書き方を覚えた方と仕事をしていた時、その方がなぜかこれをずっと使い続けていたので『そっちの方がいいのかも』という錯覚に陥り、この『日付を自動更新で表示させる! 簡単コピペ!!』でもこのコメントアウトを使っていたんですよね。

ちなみにこのページ、約5年前の2014年10月に作った記事だったのですが、PVもそこそこあるので結構『なんやねん。このページ。。』って思われてたのかもですね。いつからこのような表示だったのかわかりませんが、そう思われてた方、ごめんなさい。。

ってことで、ページのレイアウトが崩れて変なページになっていても、みんな離脱するだけで教えてくれないので、wordpressで作ってる記事にjavascriptの昔の記述のコメントアウトを使ってる記憶がある方、一度チェックした方がよいかも。ですね。

Google AdS



関連記事

『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その2


前回書いた『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1の続きです! 今…

記事を読む▷


公開日を最終更新日にする!サムネイル

検索結果に最終更新日を表示させてクリック率をアップする方法!新規投稿時には公開日を表示させる!


以前は検索結果で1ページ目上位3番目以内に半年以上表示されていた記事が、いきなり圏外となってしまいました。Googleの…

記事を読む▷


☆100達成!PageSpeed Insightsのスコアアップ方法 その2:GoogleAdSenseの読込みを遅延させる(Youtubeも)


Google「PageSpeed Insights」のスコア(点数)をアップさせる方法 その『2』です! 今回はGoo…

記事を読む▷


『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1


最近お問い合わせページにちょくちょく迷惑メールがくるようになりました。『Akismet Anti-Spam』も有効にした…

記事を読む▷


[http] から [https] へ。常時SSL化対応:ワードプレス、エックスサーバー環境にて


今更ですが、、、SSL化対応することにしました。 Googleが『SSL化されたWebサイトはランキング評…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP