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

<p>タグのチェッカー / エキサイトブログ

2017年 09月 05日
文章の表示の状態に関して、ブログというのは「おおまか」です。 ネット経由での参照は、フォントやフォントサイズが異なったり、レンダリングの違いや、今ではレスポンシブで文書作成時と違う構成で表示される事もあります。

そんな現状で、適度に見易ければ良しと言うのがトレンドですが、先日の自分の投稿を見返して「あれっ」という問題を発見。 画面の上の方だけ、画像と行の間隔が広いのです。

<p>タグのチェッカー / エキサイトブログ_a0349576_10592313.png

下の方に行くと設定の通りで、この間隔はブログスキンと原稿の行空けで決まります。

<p>タグのチェッカー / エキサイトブログ_a0349576_11005260.png

投稿文書を調べて、ずいぶんして原因が判りました。 編集時の何処かで<p>タグが紛れ込んでいたのです。 <p>タグは再編集時などに入り易く、「通常編集」で割込みの書き込みをすると「段落」が自動的に作られる様で、これは以前にも考察した問題です。

<p>タグは、こちらの意図とは関係なく入り、一番困るのは「段落は上下に1行の余裕を作る」という規則です。 下は問題の場所をDevToolsで見た所です。

<p>タグのチェッカー / エキサイトブログ_a0349576_11182542.png

Chromeはこの規則通り、段落「<p> </p>」の上下に1emの間隔を採り、ここだけ画像と行の間隔が広くなってしまったのです。



注意はしても見落としがちなので、本気のツールを作りました。 この簡単なツールは、Chromeの拡張機能「Stylist」で動作します。 Chromeで自分のブログを参照している時に、本文中に<p>タグを見つけたらマークして表示します。 私の場合は投稿に<p>タグを使う事はないので、どぎつく教えてくれる形にしました。 投稿本文以外に関係のない事なので、セレクタは「.POST_BODY」(=投稿本文)に限って働く様にしています。

.POST_BODY p {
background: #4DD0E0; }

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

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

これを「Stylist」に登録して、常時働かせておけば見落としはなくなるという算段です。
実際に、今回の場所をChromeで見ると、下の様にグリーンバックとなり「◀P▶」が点滅します。

<p>タグのチェッカー / エキサイトブログ_a0349576_11321862.png

私は、「Stylist」になんやかやの仕事をさせていますが、Chromeの参照場面に応じて働き、同時に幾つもの仕事をしているのではありません。 現在の所は全く負荷を感じる事はなく、「Stylist」は必須アイテムになっています。



〔代案〕
①この様なチェッカーを使用せずに、ブログスキンに上記コードを追加すれば、同様にチェッカーとして働くはずです。 但し、その場合は、他の人にもチェックの結果が表示される事になります。

➁もっとラフな手段で、ブログスキンにリセットCSSを入れる事も考えられます。 投稿本文以外の場所への影響を避けて、

.POST_BODY p { margin: 0; } 

などの指定が良いでしょう。 ただ、原稿に<p>タグが残ったままとなり、クリーンなHTMLを好む向きには嬉しくありません。

以上の代案は、本文中に意図的に<p>タグを使用する事がある(私はこれに該当)場合には、使えません。 ネット上のシステムを使わず、オフラインのHTMLエディターで書いて投稿すれば、クリーンなHTMLを維持し易いと思いますが。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-09-05 12:03 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。