過去記事更新

2011年9月22日木曜日

忍者ブログ:ボックスタグの不具合を直すよ!

 何度か書きましたが、現在、私は公式テンプレート「Simple -black-」を使っています。
 これまでにも自分好みの設定に編集していたのですが、どうもおかしいと気づきました。
 それは、記事の中で「PRE」タグを使用すると、以降の文字まで表示が変わる点です。
 見た目としてはタグを閉じ忘れたような感じで、たいへんカッコ悪いです。
  ※しばらく何が起きているのかわからなかったよ!

 ちなみに「PRE」は、プログラム等のタブや半角空白などをHTML上でそのまま表示させるタグです。
 これを使えば、ソースへの全角スペース混入や、  だらけになるのを回避できます。
 使い方も何も <pre> で始まり </pre> で閉じるだけだよなあ……と悩んでしまいました。
 まあ、原因としては単純なことでした。
  ※長いので続きに書くよ!

 とりあえずまとめます。
◇問題点
・記事のなかで <PRE>、<DIV>、<TABLE> のようなボックス要素を使うと、タグを閉じた後まで文章のフォントが変わってしまう。
→たとえば簡易エディタで「Q」ボタン(BLOCKQUOTEタグ)をクリックしただけで表示が乱れる。
◇原因
・文字の見た目が CSS の「p.entry_text」に指定されている。
・「Simple -black-」の本文部分が「P」タグになっている。
→「P」は段落タグ(インライン要素)なので、「PRE」のようなボックスタグが入ると領域が終了してしまう。
 ※特に <P> は、</P> で閉じるのが必須ではないせいもあると思うよ!
◇対策
・ボックスタグを使った後に毎回以下のタグを入れる。
        <p class="entry_text">

 →対症療法ですが簡単です。テンプレートを編集したくない場合に。
・テンプレートを編集する。
 →と言っても P SPAN DIV にするだけ。
 ただ SPAN も段落タグっぽいので、DIV のほうがいいかなと思います。
 まあ、今回のテンプレートに限らず、そういう事もあるよ!(あるよ!)ということですかね。
 編集部分は次回書きます。
 断っておきますが、「Simple -black-」のデザインは気に入っているのでまだまだ使うつもりです。
  ※でなければとっくに別のテンプレに変えてるよ!

0 件のコメント:

コメントを投稿