ブロガー必須！自動でHTMLタグチェック出来るChrome拡張機能

こんにちは。Ｍです。

ここしばらくの間、このブログの変な動きに「？？」と思った読者の方が多かったのではないでしょうか。

実はずっと次の作業に明け暮れていたんです。

①ブログテンプレートでHTMLなどのエラーチェック

②ブログの読み込み速度の改善

いやあ。これが思ったよりも大変な作業で四苦八苦しましたよ（汗）

しかし、GoogleのChrome拡張機能で便利なツールを発見。おかげで何とか終わらせることが出来ましたよ！ほんと、Google様々でした。

WebサイトやブログのHTML。エラーチェックしてる？

ブログやWebサイトで使われるHTMLやCSSっていうものは、日々カスタマイズすることでタグなどを追加していくことになります。

ブロガーの皆さんは追加したタグなどに間違った記述がないかチェックしたことがありますか？

HTMLを眺めてると無数に「div」が書かれていたりしますが、ちゃんと同じ数の「/div」で閉じられているか？

これをチェックしようとするだけでも気が遠くなってしまいますよね。上から下までHTMLとにらめっこしてみても、正確に数えるのはたぶん自力では無理かも知れません。

ボク自身、このブログをいろいろカスタマイズしている関係で最初に提供されたテンプレートはほぼ原型を留めないほどになっているのだけれど、大がかりな構文チェックはほとんどやらず疎かにしてきました。

しかし、あることがキッカケとなり、ブログのエラーチェックを緊急で行なうことになったのです。

ブログのHTMLエラーチェック、きっかけはiPhoneの読み込みエラーだった！！

カフェアートをしてもらえるお洒落なカフェで友人とお茶をしていた時のこと。

突然、ボクのブログの話しになりました。友人はいつもブログを読んでくれているようです。しかし、友人からはボクの想像を超える一言が飛んできました。

「Ｍさんのブログ。リンクを押しても記事が開かないんだけど。そもそも、ブログの読み込みが異常に遅くてイライラする。」

「エッ？嘘でしょ！？」

ボクはいつも自分のiPhoneでブログをチェックしてますが、そんな不具合はありませんでした。

友人が使っているiPhoneは6S。ボクのiPhoneよりも画面サイズが少し小さい機種になります。実際にボクのブログを開いてもらいました。

すると、その友人の言う通りで、ずっとブログの読み込みが続いたままだし、リンクをタップしても記事が開きません（汗）友人はいつも長押しして新しい画面を開いて見ているそうです。

ブログをレスポンシブ対応にしていても気付かない不具合とは？

「おかしいなぁ…。」

自分のiPhoneではちゃんと快適にブログを見ることが出来るのに、友人の少し画面幅が狭いタイプではちゃんと見ることが出来ないという不具合。

当然ながら、ブログをカスタマイズする際にはスマホのさまざまな画面サイズを想定し、レスポンシブに対応したデザインを意識しながらやっている。

しかし、現実に生じる不具合というものは、それぞれの機種を実際に手に取って使ってみないと分からないものなのだという事に気付かされたのです。

画面幅だけ意識してレスポンシブ対応にWebデザインするだけでは駄目なんですね…。

iPhoneの新機種は毎年ラインナップされるので、巷では現在いろんな人がさまざまな機種を使っています。

機種ごとにスペックも違ってきますので、このような不具合が生じてしまうのかも知れませんね。

このように考えると、本当にWebデザインというものは難しい世の中になったなぁと痛感させられました。

それと同時に「リンクが機能しないのは、どこかHTMLに記述ミスがあるのか？」とも思いました。

そんな訳で、冒頭に書いた気の遠くなるようなブログのエラーチェックをはじめる事になったのです。

とても厄介で面倒な重労働になりそう…（汗）

カフェの店でその後、ヤケ酒に変更したのは言うまでもありません。

ひたすら食べて、徹夜作業に備えることにしました。