過去記事更新

2011年9月22日木曜日

忍者ブログ:ボックスタグを設定するよ!

 前回の続きです。
 編集するのは二箇所+α。
 長いので続きで。

 まずHTML。
<p class="entry_text">
<!--$entry_text-->
</p>
<!--if_entry-->
<!--if_ps_text-->
<p class="entry_text"><!--$entry_ps_text--></p>
<!--/if_ps_text-->
<!--/if_entry-->

 $entry_text、$entry_ps_text が本文(と続き)となる独自タグです。
 場所がわかったので P DIV に変えます。
  ※微調整で <br> を入れたよ!
<div class="entry_text">
<!--$entry_text-->
</div>
<br />
<!--if_entry-->
<!--if_ps_text-->
<div class="entry_text"><!--$entry_ps_text--></div>
<!--/if_ps_text-->
<!--/if_entry-->

 タグを変えたので、CSS のクラスも書き換えます。
div#main_column div.entry p.entry_text {
padding-left: 10px;

 ↑前 後↓
div#main_column div.entry div.entry_text {
padding-left: 10px;

 変えた直後は変な感じに表示されましたが、ページを更新したら直りました。
 これでボックス要素を使っても文字が乱れなくなりました。
 ただ、PRE なんかの表示がイマイチだったのでついでにクラスを作ります。
 たぶん後で微調整すると思いますが、とりあえず書いたものです。
/* ■PRE定義 */
div#main_column pre {
line-height:1.1em;
color: #ccdd99;
margin :0.5em 0 0 0;
padding:0;
}
/* ■BLOCKQUOTE定義 */
div#main_column blockquote {
line-height:1.1em;
color: #ccdd99;
margin : 1em 0 0 1em;
padding:0;
}

 行間を詰め、色を変え、微妙に余白調整、といった感じです。
 PRE は、ほんの少し文字を小さくして border を付けるとかしようかな……。
 とりあえず、よく使いそうな二つだけクラスにしておきました。
  ※あんまりやりすぎると収集がつかなくなりそうだよ!
 他には、まあ TABLE くらいはあってもいいもしれません。

0 件のコメント:

コメントを投稿