2012/08/01

CSSの追加をしてみた

ブログ投稿の
「タイトル」と
それに続く
「本文」に
あまり見た目の差がない

でも
これ以上スペースを空けるのも
変な感じだし
タイトル文字の大きさを
これ以上大きくするのも
今一つだ

こういう場合は
仕切りを1本入れる
これしかない

まあ
好みの範疇といえば
範疇なんだろう
しかし
男は黙って
1本入れる

前のブログでも
俺は独自にCSSをいじって
やっていた
それを踏襲する形だ

======

何も考えない君は
タイトルが入るブロックの下に
borderが入るように
すればいいと思うだろう
しかし
そう指定すると
タイトル自体が2行以上になった時
そのまま
タイトルに添って
線が2本3本と
入ってしまう危険がある
ちゃんちゃらおかしな仕切り線の誕生だよ

こういう場合は
本文が入るブロック
その上に
線が入るように
指定してやると
良い具合になるぞ

上から下に
じゃなく
下から上に
の精神だろ?

どこに指定してやればいいのか
Firefoxを立ち上げて
アドオン「Web Developer」で
丸裸にし
ねぶり上げるように眺める
この時ばかりは
ブラウザ二刀流だ

「div .post……? いっちょまえに……
 ん? ……へへ、こいつは……」
タイトルと本文の間に
独立したdiv class='post-header' を発見
「おあつらえ向きじゃねえか」
ここに指定することにすれば……

結局は
上から下でもなく
下から上でもなく
真ん中の奴にしてやったよ
タイトルとの間隔も取るため
paddingも指定
ちょうどええ
ちょうどええで

ついでに
本文終わりと
投稿者や投稿時刻との
間隔も
妙に詰まっているので
良い具合に空けるように指定
納得の形にした

======

そんな訳で
CSSをちょぽっと
追加してみたぜ
どうやら
1番最後の行に
追加されるみたいだぜ
上の方で
同じ箇所を指定してるところ
あるんだから
本当はまとめてしまいたい
てか
直接いじりたい

しかし
無理そうなんで
とりあえず
スーパードライ片手に
パンケーキでも食べようか

0 件のコメント :