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

2019/12/19
2019/12/19
トラブル

今日（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の古い記述のコメントアウトでした。

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

まとめ

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

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

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