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



関連記事

URLwwwありなし

URLの正規化:wwwあり、なしのドメインを統一する記述方法(エックスサーバー(XSERVER) にて)


前回のブログ で.htaccessに301リダイレクトをするための記述方法について書きましたが、ついでにwwwあり、なし…

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


☆100達成!PageSpeed Insightsのスコアアップ方法 その1:画像の圧縮&読込みを遅延させる


平均PVが約30,000/1月(1,000/1日)あったサイトが、この1年で徐々に下降していき、去年の1月と今年の1月を…

記事を読む▷


Google Analyticsに設定する『グローバルIPアドレス』を確認&取得する方法


で「自分のアクセスを除外」するフィルタを設定し、自分のアクセスはカウントしないようにしていたのですが、ある修正作業をして…

記事を読む▷


Message

メールアドレスが公開されることはありません。

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

PAGE TOP