人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

<p>タグのチェッカー / ブログの全文チェック方法とチェッカーの改善

2017年 09月 06日
<p>タグチェッカーを実際に使ってみて、色々と判って来た事があります。

1文書をチェックする発想でチェッカーを作ったが、今まで投稿した文書をひとつずつ開いて行くと、時間がかかって仕方がありません。 全文に関してチェックするには、ブログの全文検索が必要になりました。

当然、これに使用できるのはメニューの「検索」ですが、HTMLのコードとして記述した<p>タグを検索できるのかという問題がありました。 で、試してみると素晴らしい、この「検索」は完全にこれに使えました。

例えば、「<p>」で検索した場合は、

●投稿文内のHTML記述としての「<p>タグ」を検出します。
●投稿文内のテキスト記述としての文字「<p>」を検出します。
●メニューの「記事ランキング」等に使われる「<p>タグ」を検出しません。

この「検索」は、投稿原稿のチェックに実に適した仕様になっている事が判りました。

今回の場合「<p>」で検索しても良いが、「<p style="~">」という記述を見落とすので、「</p>」で検索するのが賢明と判りました。

下は、私のSubsite内を全文チェックした結果です。

<p>タグのチェッカー / ブログの全文チェック方法とチェッカーの改善_a0349576_23153736.png

意図的に記述した<p>タグや、文字の「</p>」等も検出されますが、効率良くチェック出来ます。



ただ、サンプルで気付いたのは、「<p></p>」という中身の無いタグがある事です。 これも、入力援助機能が勝手に入れてしまうものです。 これは、最初のチェッカーでは、どこにタグがあるのか判断し難い事が判りました。 下はサンプルで作った文書です。

<p>タグのチェッカー / ブログの全文チェック方法とチェッカーの改善_a0349576_23262295.png

3ヵ所の最初の<p>タグは、中身があるので段落がグリーンに着色され、これは意図通りです。 しかし、後の2ヵ所は段落の着色がなくて見落としかねません。

この文書のHTMLコードを見ると、下の様なものです。

<p>タグのチェッカー / ブログの全文チェック方法とチェッカーの改善_a0349576_23303310.png

この中身の無い「<p></p>」は、けっこう良く出来ます。 特に、サンプルの様な文書内に「<pre>」でコード記述をした場所に多く、割り込み修正をするからでしょうか。

この様な状態も気付き易くするために「::after」を使い、問題行の高さでウインドウ左端に赤マークを追加表示する事にしました。

.POST_BODY p {
background: #4DD0E0; }

.POST_BODY p::before {
content: " ◀P▶";
color:#fff;
font-size: 16px;
font-weight: bold;
position:absolute;
animation:blink 0.5s ease-in-out infinite alternate; }

#_entryContent p::after , #_moreEntryContent p::after ,
.POST_BODY p::after {
content: "◀P▶";
color: red;
font-size: 16px;
font-weight: bold;
position: absolute;
left: 0;
animation:blink 0.5s ease-in-out infinite alternate; }

@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;} }

上記は、文書編集中にもチェッカーが働く様に、「::after」の適応場面として以下のセレクタを追加しています。
「 #_entryContent p::after 」「 #_moreEntryContent p::after 」

これは、編集画面の通常編集枠内の「<p>タグ」を選択するものです。 このコードは「Stylist」上で働くので、そのURL設定は「自分のブログURL」に加えて「//userconf.exblog.jp」も動作範囲に含めて指定しました。

別案として、私は編集画面のアレンジを「Stylist」で行っているので、そのアレンジCSS内に、このコードを含める事も出来ます。 つまり、編集段階で「<p>タグ追放」する編集画面となりますが、そこまで<p>タグを嫌う人は少ないかも知れないので、ここは別案に留めました。

下は改善したチェッカーで、サンプル文書を表示した状態です。

<p>タグのチェッカー / ブログの全文チェック方法とチェッカーの改善_a0349576_23511262.png

また、「通常編集」枠は、以下の様なチェックが表示されます。

<p>タグのチェッカー / ブログの全文チェック方法とチェッカーの改善_a0349576_23525617.png

「HTML編集」枠でチェック表示出来れば便利ですが、これは無理でした。「HTML編集」画面上では「タグ」の意味はなく「文字」として存在するので、セレクタ指定が出来ないのです。



メインサイトは文書数が多く、チェックする文書が増えました。 これらを調べて行くと、チェックは確かですが、HTML内で開始タブが見つかり難いケースがありました。 開始タグ側のチェッカー色が「白」で文書内の表示は、少し控え目過ぎでした。

改良点は、
◎開始側を「赤」終了側を「青」でチェック表示し、両方ともウインドウ左端にチェッカーを出す形にした。
◎文字背景の白を指定して、チェック表示が文章上に表示されても見え易くした。
◎アレンジした編集枠は左余白が少ないので、「FontAwesome」を使いチェック表示の幅を狭くした。
◎共通コードの繰り返しを減らした。
◎IE11版の編集画面アレンジのユーザースタイルシートに追加出来る、オプションのコードを編集。

Chrome版

.POST_BODY p {
background: #4DD0E0; }

p::before , p::after {
font: bold 1em FontAwesome;
background: #fff;
position: absolute;
animation: blink 0.5s cubic-bezier(0.2, 0.1, 0, 1) infinite alternate; }

@keyframes blink{
0% {opacity:0.1;}
100% {opacity:1;} }

#_entryContent p::before, #_moreEntryContent p::before,
.POST_BODY p::before {
content: "\f0d9\2005P ";
color: red;
left: 0; }

#_entryContent p::after, #_moreEntryContent p::after,
.POST_BODY p::after {
content: "P\2005\f0da";
color: blue;
left: 0.6em; }

<p>タグのチェッカー / ブログの全文チェック方法とチェッカーの改善_a0349576_17090034.png

IE11版(IE11 - More拡張にオプション追加できます。 これは点滅表示しません)

/* <p>チェッカー オプション */

.POST_BODY p {
background: #4DD0E0; }

p::before , p::after {
font: bold 1.15em/1.2em FontAwesome;
background: #fff;
position: absolute; }

#_entryContent p::before, #_moreEntryContent p::before,
.POST_BODY p::before {
content: "\f0d9\2005P ";
color: red;
left: 0; }

#_entryContent p::after, #_moreEntryContent p::after,
.POST_BODY p::after {
content: "P\2005\f0da";
color: blue;
left: 0.6em; }


以上、かなり効率的に投稿文全文で<p>タグ退治が出来る様になりました。



by Ataron2 | 2017-09-06 00:07 | ブログスキンのアレンジ