【 HTML終了タグチェッカー 】改訂版の再配布を致します
弊ブログのこの記事 ↓ を発端にして、FC2ブログを「HTMLタグのみ」の改行設定で記事を書くブロガーさん達が増えつつあります。
最近の筆者の趣味は皆さんのブログ記事のHTMLソースを読むことです(笑) - 初級パソコン術
最近の筆者の趣味は、皆さんのブログ記事のHTMLソースを読む(覗く)ことなんですよね~(笑) 悪趣味ですよね~ (〃^▽^〃)oあはははっ♪ そうそう、HTMLソースって ↓ こんなのですよね。 ブラウザのGoogleChromeをお使いでしたら...
筆者としては嬉しい限りなんです、弊ブログ記事から刺激を受けてそれにチャレンジしてくださってるブロガーさん達がいらっしゃるんだぁ♪ なんてね(爆)
でも、実はHTMLタグを駆使して記事を書くには終了タグ(閉じタグ)忘れには気をつけなければいけません!
HTMLタグで記事を書くときには「段落タグ」として <p></p> タグで文字列を挟んで囲みますよね。
■ 終了タグ忘れの例
<p>今日は良いお天気ですね~♪</p> ← 終了タグあり
<p>今日は良いお天気ですね~♪ ← 終了タグ忘れ
この <p></p> の場合の「終了タグ </p>」は、HTML4.01以降からは「省略出来る」ようになり、今時のHTML5になって、更にその省略出来る終了タグの種類が増えました。
でも勘違いしてはなりません! 省略できるには要件がありまして、なんでもかんでも「省略してしまえ」とは行かない危なさもあるんですよ。
「省略出来る」ようになったのは、今時の新しいバージョンの「各ブラウザがそれらの終了タグを補完して終了タグがあるかのように表示してくれるように進化している」と言うことなんですが、場面によっては </p> の終了タグ抜けのみならず、他の省略できる終了タグ抜けでもとんでもない表示崩れを引き起こす要因にもなってしまうんです。
一度 『省略できる終了タグ』 のキーワードで検索してどんな種類のものがあるか見て下さいね。
つまり、もっと身近に言いますと、あなたが保存してあるいつもの定型の要素(アイコンや画像等)のHTMLコードをコピペでペタペタと各記事に貼り付ける場合には「終了タグ忘れ」がないかを気をつける必要があり、そのようにいつも記事に貼り付ける定型のHTMLコードは正しいものになっているかキチンと確認しておかないと、毎回気がつかないままに「表示崩れ」を起こしているかもしれないですし、他のHTMLタグと「入れ子(互い違い)」で貼り付けてしまっていないかも注意が必要です。
例えば、、、

このような、そのブログのマスコット的画像を毎回同じ場所に貼ったりする時、HTMLの終了タグがキチンと書かれているか、また他のタグと入れ子になってしまう位置にHTMLコードをペタリと貼り付けてしまっていないか! と言うことなんです。
こんなことを書くと『え゛~ ずいぶん面倒なのね~、もうHTMLタグで記事を書く自信がなくなったから止めようかなぁ (・・.)グスン』なんて言い出すブロガーさんが出ちゃうかもしれませんから、もうこの辺でおしまいにしておきます(笑)
でも大丈夫! そんな悩ましい「終了タグ抜け」を簡単にチェックしてエラー原因箇所を表示してくれるツールがあるんです。
ブロガーでしたら【 HTML終了タグチェッカー 】 を活用しましょう
筆者がずっと以前に『終了タグチェッカー』のキーワードで検索した時にブラウザChromeの拡張機能である「 HTMLエラーチェッカー 」がヒットして、それからは必要な時にこれでチェックして来ていたんですが、下図のような感じでちょっと使い勝手に違和感を感じていたんです。
Chromeの拡張機能 HTMLエラーチェッカー の場合
ご覧のようにリストタグの </li> の終了タグがないよ!って言うエラーが出まくってますが、実はこの </li> の終了タグも今の時代は「省略できる」タグでして、ですからエラーではないんです (^^ゞポリポリ
弊ブログで使わせて戴いておりますFC2ブログ共有テンプレートのクリエーターさんの Akiraさんのレスポンシブテンプレート では、リストを表すこのタグの </li> 終了タグは積極的にテンプレートレベルで省略してあるんです。
ですから、このチェッカーを使う度にこのようにエラーとして表示されてしまうので、不快感を感じつつも使っていた時期があったんです (^_^; アハハ…
その後に「もっと使い勝手の良いチェッカーはないものか」と探してみました。
とっくりばーさんの HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] の場合
ある日、 とっくりばー さんの HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] を知り、早速この記事(2008/11/29)のブックマークレットを利用させて戴いたんですが、やはり </li> の終了タグがないよ! と怒られる(笑)ことには変わりはありませんでした。
それに、実はとっくりばーさんご提供のブックマークレットはまだSSL化がされておりませんから、SSL化されたブログページのチェックが出来ないんです (^^;; アセ
『 (~ヘ~;)ウーン こうなったらこのブックマークレットをSSL化も含めて改造させてもらおうかぁ 』 って気持ちになり、早速改造!(改造よりも改訂ですかね~(笑))
ぼっちん風 「HTML終了タグチェッカー」 改訂版の場合

おかげさまでやっとAkiraさんのレスポンシブテンプレートでも </li> の終了タグがないよ!って怒られなくなりました (^。^;)ホッ
このブックマークレットの作者さん とっくりばー さんのJS内コメントによりますと、、、
/*
* tagcheck.js
* タグの対応エラーをチェックし、結果ウィンドウに表示する
* @author tockri
* 改変、再配布、諸々自由にやってください
*/
このように「改変、再配布」を許可する明示をしてくださっておりますので、筆者の改訂版を弊ブログで再配布させて戴くことに致します。
著作権者の とっくりばー さんに感謝と御礼を申し上げます m(_ _)m
【 HTML終了タグチェッカー 】 改訂版の設置のしかた
ではここからは改訂版の【 HTML終了タグチェッカー 】の設置やそのブックマークレット利用について説明致します。
ブックマークレットを直接利用する方法
とにかく面倒なことはイイから一番簡単な方法でパパっと利用出来るようにしたい(笑)方は下記のブックマークレットを利用して下さい(笑)
ブラウザのChromeを利用でしたら HTML終了タグチェッカー このボタン部分をマウスボタンを押さえたままで、あなたのブラウザの「ブックマーク欄」までス~っと引っ張って行って、ペチョっと貼り付けて下さい(マウスボタンから指を離すだけ(笑)) それでブックマークレットの登録が完了します。
その操作例を下図のGIFアニメーションでご参照下さい ↓ このまんまですから(笑)
[ 画像クリックで GO & STOP ]
上記ブックマークレットを登録出来ましたか? (^_^)ニコ
但しですね、この方法で簡単登録したブックマークレットは、筆者がもしこのブログ「Webテク倉庫」を辞めて削除してしまったら、皆さんの登録した【 HTML終了タグチェッカー 】も機能しなくなってしまうから、それでは案配が悪いんですよ(爆)
それを避ける為の方法は下記になります。
Jsファイルを自身のブログのスペースに設置する
上記ブックマークレットでは改訂版JavaScript「tagcheck2-kaimin.js」ファイルを動作させて【 HTML終了タグチェッカー 】として機能するようにしている訳でして、このファイルをあなたの利用しているブログスペースにアップロードして使えば、弊「Webテク倉庫」がなくなってしまっても(笑)問題なくなる次第です。

上図フォルダアイコンをクリックすると「tagcheck2-kai2min.zip」という圧縮フォルダがダウンロードされますから、それを解凍すると中に「tagcheck2-kai2min.js」というファイルがありますから、そのJavaScriptファイルをあなたのブログスペース(FC2ブログでしたら管理ページのファイルアップロード)へアップロードして、そのファイルURLをメモ帳にでもコピペしておいて下さい。
ブックマークレットの中身のtagcheck2-kai2min.jsファイルURLを差し替える
そしたら、先ほど設置したブックマークレット部分をマウスの「右クリック」して現れるメニューの「編集」をクリックして、上記でコピーしたあなた用のtagcheck2-kai2min.jsファイルURLを下のGIFアニメーションの要領で差し替えて下さい。
[ 画像クリックで GO & STOP ]
これによって、もし弊「Webテク倉庫」が消えてしまっても(笑)ずっとあなた用の【 HTML終了タグチェッカー 】は存在し続けると言うことなんです(笑)
ただ、上記GIFアニメーションのようにブックマークレット編集欄でのURL修正って、編集欄そのものが狭いですし編集しにくい場合には、その欄の全てを一旦メモ帳にでもコピペしてから、メモ帳上で編集して、その全てをもう一度ブックマークレット編集欄に戻してあげてもいいでしょう。 もっと他の方法もあるでしょうから、その辺りは皆さん良きに計らって下さい(笑)
【 HTML終了タグチェッカー 】 改訂版の使い方
使い方は至って簡単でして(笑)チェックしたいブログページで、ブックマークレットを単にクリックするだけなんです。
エラーがあると下のGIFアニメーションサンプルのような表示になりますから、そのエラー部分をクリックすると、パッとそのエラー記述箇所に遷移しますから、記事ページのその部分を修正すれば良いんです、簡単ですね~(笑)
[ 画像クリックで GO & STOP ]
【 HTML終了タグチェッカー 】改訂版 あなたのブログ執筆のお供にご活用くださいね~ ^^
自身のブログを各種ツールで分析しましょう
スマホで正しく表示されるかテストする
モバイル フレンドリー テスト
スマホ表示速度分析は PSI が強力です
Google PageSpeed Insights
自身のブログのHTMLは最新かチェック
Nu Html Checker
-
これは凄いぞ! Googleのブラウザ画像圧縮WEBアプリ【Squoosh】
2018/11/24 -
画像の縮小とトリミングが同時に編集出来てしまう無料ソフト-pictcutter
2018/04/23 -
「CatMemoNote リンクが使えない?」いえ、使えますよ
2018/03/18 -
あれれ? カーソル どこ行ったの?(爆)
2018/03/07 -
FC2ブログでPrism.jsを使うにはここに注意が必要です
2017/12/02 -
Windowsのメモ帳の管理にはCatMemoNote(キャットメモノート)がとても便利なんですよ
2017/10/18 -
GIFアニメーションや画像を劇的に軽量化する無料サービス
2017/08/01 -
エクスプローラのタブ化ソフト-Clover最新版(Ver3.3.7) のセキュリティ考察と導入方法(日本語化)について
2017/07/16
すごい便利です!!
こんにちは。ぼっちんさん。
早速ブックマークレットに入れて試してみました。
HTMLコードで書くようにしたほとんどの記事でタグの閉じ忘れが検出されてました。 ^^;
そんなこんなで20記事ほど修正しましたが、不具合箇所も分かりやすく表示してくれるので、ちょちょいと修正できました。
コレすごい便利です。
ブラウザ上はちゃんと表示されているように見えていたので大丈夫だと思っていたんですが、結構抜けている所って多くあったりするもんですね。
念の為JSファイルもいただいて自分のブログスペースから起動するようにしました。
ホントに良いツールを紹介してくださってありがとうございます。
僕にとっては、ブログ記事作成に欠かせない一品です。( v^-゚)Thanks♪