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

By




スポンサードリンク


こんにちは。Mです。


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


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


  • ①ブログテンプレートでHTMLなどのエラーチェック
  • ②ブログの読み込み速度の改善


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


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


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


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


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


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


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


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


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


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



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


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



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


「エッ?嘘でしょ!?」


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


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


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


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


「おかしいなぁ…。」


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


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


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


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


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


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


HTMLのエラーチェックをはじめる


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


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


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


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



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



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



自動でタグチェック出来る「Chrome拡張機能」を発見!


帰宅して。泥酔状態のままHTMLを覗いてみました。リンクで使われる「aタグ」でちょっとした記述ミスを発見。すぐに直しましたが、友人に確認したところ不具合は解消されないとのこと。


こうなるとやっぱり大がかりなHTMLチェックが必要なようです。しかし、自力で正確なチェックを行うのは難しいし効率も悪い。


そこで、何か便利なツールがないものかといろいろ調べてみることにしました。延々と探した結果、とても便利なツールを発見しました。


それは、Googleが無償提供しているChrome拡張機能でした。


何だ、こんな便利なツールがあったのか!!今までまったく知らなかった自分て…(汗)


今回は、初心者でも簡単にタグなどのHTMLが自動でチェック出来る「Chrome拡張機能」を発見したのでこれをご紹介していきますね。


この記事は限定公開にしたいので有料(ブロマガ)にしていて申し訳ないのですが。



noteでも公開しています。


購読料は、ブログ執筆のための商品購入などになります。

続きはブロマガを購入して楽しもう!
このコンテンツはブロマガ(有料)です。
購入すると続きをお楽しみいただけます。
ブロマガって何?


Share

スポンサードリンク