Home

Album

Book

Football

Guitar

Link

Mobile

Music

PC

Tool

mics

moblog

« EXTREME ライブ | メイン | エントリ一覧のプルダウンメニュー追加 »

2005年1月19日

Recent関連の一覧変更

メインのサイドバーにある「Recent Comment」「Recent Trackback」と、カテゴリー別、月別、個別アーカイブにある「Recent Entry」の表示ですが、改行があると先頭からになって、すごく嫌だったので、下記の方法に変更しました。当初はULとILタグを使ったリストで表示していましたが、無駄に空間ができてさらに見づらくなったので、さらに↓の方法に見直しました。

リストにしたい部分をCLASSで指定します。(ここでは、recent_comment_entryとします。)
recent_comment_entryをCSSにて下記にて定義します。
ポイントは、リストマークをbackground-imageで指定して(no-repeatも忘れずに指定)、このimageの大きさをpadding-leftでずらして文章が始まるように指定します。

.recent_comment_entry{
 background: url("image/gtool/bluebtn.gif") no-repeat;
 margin-top: 0px;
 margin-bottom: 7px;
 padding-left: 12px;
}

これで、改行はbackground-imageより後ろになるため、リストのように表示できます。

#これって、常套手段なのでしょうか?(^^;)

投稿者 yoshi | 2005年1月19日00:27 | カテゴリ PC