【 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化されたブログページのチェックが出来ないんです (^^;; アセアセ

2018-02-22-2.png

(~ヘ~;)ウーン こうなったらこのブックマークレットをSSL化も含めて改造させてもらおうかぁ (^^ゞポリポリ 』 って気持ちになり、早速改造!(改造よりも改訂ですかね~(笑))

ぼっちん風 「HTML終了タグチェッカー」 改訂版の場合

おかげさまでやっとAkiraさんのレスポンシブテンプレートでも </li>の終了タグがないよ!って怒られなくなりました (^。^;)ホッ

このブックマークレットの作者さん ”とっくりばー”さんのJavaScript内コメントによりますと

/*
 * tagcheck.js
 * タグの対応エラーをチェックし、結果ウィンドウに表示する
 * @author tockri
 * 改変、再配布、諸々自由にやってください
 */

このように「改変、再配布」を許可する明示をしてくださっておりますので、筆者の改訂版を弊ブログで再配布させて戴くことに致します。 著作権者の”とっくりばー”さんに感謝と御礼を申し上げます m(_ _)m

【 HTML終了タグチェッカー 】 改訂版の設置のしかた

ではここからは改訂版の【 HTML終了タグチェッカー 】の設置やそのブックマークレット利用について説明致します。

ブックマークレットを直接利用する方法

とにかく面倒なことはイイから一番簡単な方法でパパっと利用出来るようにしたい(笑)方は下記のブックマークレットを利用して下さい(笑)

ブラウザのChromeを利用でしたら 【 HTML終了タグチェッカー 】 ← この文字列部分をマウスボタンを押さえたままで、あなたのブラウザの「ブックマーク欄」までス~っと引っ張って行って、ペチョっと貼り付けて下さい(マウスボタンから指を離すだけ(笑)) それでブックマークレットの登録が完了します。

その操作例を下図のGIFアニメーションでご参照下さい ↓ このまんまですから(笑)

[ 画像クリックで GO & STOP ] [ 画像クリックで 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 ] [ 画像クリックで GO & STOP ]

これによって、もし弊「Webテク倉庫」が消えてしまっても(笑)ずっとあなた用の【 HTML終了タグチェッカー 】は存在し続けると言うことなんです(笑)

ただ、上記GIFアニメーションのようにブックマークレット編集欄でのURL修正って、編集欄そのものが狭いですし編集しにくい場合には、その欄の全てを一旦メモ帳にでもコピペしてから、メモ帳上で編集して、その全てをもう一度ブックマークレット編集欄に戻してあげてもいいでしょう。 もっと他の方法もあるでしょうから、その辺りは皆さん良きに計らって下さい(笑)

【 HTML終了タグチェッカー 】 改訂版の使い方

使い方は至って簡単でして(笑)チェックしたいブログページで、ブックマークレットを単にクリックするだけなんです。

エラーがあると下のGIFアニメーションサンプルのような表示になりますから、そのエラー部分をクリックすると、パッとそのエラー記述箇所に遷移しますから、記事ページのその部分を修正すれば良いんです、簡単ですね~(笑)

[ 画像クリックで GO & STOP ] [ 画像クリックで GO & STOP ]

【 HTML終了タグチェッカー 】改訂版 あなたのブログ執筆のお供にご活用くださいね~ ^^


検索からの方は
トップページへもどうぞ
関連記事

Comments 6

There are no comments yet.

mochi  

すごい便利です!!

こんにちは。ぼっちんさん。

 早速ブックマークレットに入れて試してみました。
 HTMLコードで書くようにしたほとんどの記事でタグの閉じ忘れが検出されてました。 ^^;

 そんなこんなで20記事ほど修正しましたが、不具合箇所も分かりやすく表示してくれるので、ちょちょいと修正できました。

 コレすごい便利です。
 ブラウザ上はちゃんと表示されているように見えていたので大丈夫だと思っていたんですが、結構抜けている所って多くあったりするもんですね。

 念の為JSファイルもいただいて自分のブログスペースから起動するようにしました。

 ホントに良いツールを紹介してくださってありがとうございます。
 僕にとっては、ブログ記事作成に欠かせない一品です。( v^-゚)Thanks♪

2018/02/25 (Sun) 16:07 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To mochiさん

mochiさん、こんにちは~ ^^

HTMLコードで書くようにしたほとんどの記事でタグの閉じ忘れが検出されてました。 ^^;
おやおや、なんとまぁ (^_^; アハハ…
なんて言ってますけど、実は何を隠そう、私の記事もタグ抜けがドバドバ検出されて笑ってしまいました(爆)
酷いのなんて

<pre><code>
</pre></code>

こんな入れ子で書いちゃってる記事もありまして、これには \(><)/ギョ~~~ッ って焦っちゃいましたよ (^_^; アハハ…

コレすごい便利です。
良いでしょ~(笑) もう手放せませんってば(笑)

念の為JSファイルもいただいて自分のブログスペースから起動するようにしました。
ハーイ(^O^")/ 丁度アクセス解析を覗いたらmochiさんがZIPファイルにアクセスしておられたから分かっておりましたよ~(笑)

 ホントに良いツールを紹介してくださってありがとうございます。
 僕にとっては、ブログ記事作成に欠かせない一品です。( v^-゚)Thanks♪

そう言って戴けて実に嬉しいです、どうもありがとうございます m(_ _)m
是非是非ご活用くださいね~ うんうん(^-^)

2018/02/25 (Sun) 16:29 | EDIT | REPLY |   

よつば  

オオーw(*゚o゚*)w すごーい!

ぼっちん先生~♪ ヾ(^∇^)おはよーございまーす♪

流石!ぼっちん先生! 素晴らしいアイテムですね!
早速 使わせて頂きましたところ なんと27個のエラー!ぉお!!(゚ロ゚屮)屮
タグ自体も良く理解しないで使ってるから、当然の結果ですよね~
また勉強しなくちゃ!google先生に学びに行きまーす(^▽^)/
素晴らしいアイテム配布して下さってありがとうございます♡

2018/02/26 (Mon) 09:23 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To よつばちゃん

よつばちゃん、おはよ~です(笑)

早速 使わせて頂きましたところ なんと27個のエラー!ぉお!!(゚ロ゚屮)屮
うん、知ってる知ってる(爆)
こっそり、よつばちゃんの記事のあっちこっちをこれでチェックしちゃってたもん (≧ω≦。)プププ
気になる「表示崩れ」してる記事ページがあったもんだからチェックしたんだけど、そのうちによつばちゃん自身で気がつくと思って伝えてなかったのよ (^^ゞポリポリ

【 HTML終了タグチェッカー 】を操って、不具合部分を修正してね~ ヽ(^^ ) ヨシヨシ

2018/02/26 (Mon) 09:39 | EDIT | REPLY |   

うにトラ  

こんにちは

私もブックマークしてさっそくやってみました!
まだHTMLタグ使い始めで使ってるタグもごくわずかだからってこともあるのは承知の上ですが、それでも「素晴らしい!」って褒められるってすごく嬉しい(*^^*) 大人になると褒められることなんてそうないですから・・。
毎回この褒め言葉で次なる進化を目指したいと思います。ありがとうございます♪

2018/02/26 (Mon) 14:32 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To うにトラさん

うにトラさん、こんにちは~ ^^
おっ【 HTML終了タグチェッカー 】手に入れてくれたんですね~ ヽ(^^ ) ヨシヨシ

それでも「素晴らしい!」って褒められるってすごく嬉しい(*^^*) 大人になると褒められることなんてそうないですから・・。
そうそう(笑) 大人だって褒められたら嬉しいですよ (〃^▽^〃)oあはははっ♪
平昌でメダル取った選手のみなさんだって、素直にあんなに笑顔でしたしね~ (^-^)//""パチパチパチ~♪

【 HTML終了タグチェッカー 】フル活用して、自信持って執筆活動を楽しんで下さ~い♪

2018/02/26 (Mon) 15:17 | EDIT | REPLY |   

Leave a reply