はてブのCSS書いた

 書いた! こちら、ダイアリーの方はなんかすごく赤々しいのでブックマークは落ち着いた配色にしてみました。

はてなブックマーク - _


 display プロパティを覚えた!参考: display プロパティ - CSS リファレンス

 普通に用意されたテーマを使っているなら表示されないので気にならないのですが、テーマ指定をしないと今まで見えなかった(隠されていた)文字列が表示されるのですよ。"キーワード"とか、"カテゴリ"とか、ブックマーク一覧の領域に来られても邪魔な文字列が。そんなおじゃまな文字列が沸いてる時のブックマークリストのうちひとつのエントリーのスクリーンショットがこちら。

f:id:lliorzill:20080911221015g:image

 たかだかエントリーひとつにどんだけ行使ってんだって話ですね。普段はてな側で用意されたCSSを使ってるブックマーカーから見たらそれはもうダサダサだと思います。超ダサダサ。

 そこでまたまたこいつらを隠してやろうということで display プロパティですよ奥さん!

dt.domain,

dt.category,

dd.category,

dt.keyword,

dd.keyword,

dt.users,

dt.timestamp {

display: none;

}

dd,

dd.domain,

.delete,

.comment {

display: inline;

}

dd{

margin: 0;

}

 ああ設定したらこうなった!

f:id:lliorzill:20080911221017g:image

 先のダサダサと同じくらいの縦幅で3つのエントリーを収容することに成功しました。はてブCSSを自分で一から書きたいと思ったら、まずはdtやddで囲まれてるダサダサ文字列をdisplayプロパティでなんとかすることから始めよう!