del.icio.usのdaily blog postingもcssで飾ってみる

巡回しているblogの中にはチラホラと del.icio.usのdaily blog postingを利用して毎日決まった時間にその日のブックマーク一覧をblogにあげているのを見かけます。
自分もやってるからそう思うのかもしれないけれどこれが結構興味深いんですよねぇ
「あーーここの人はこういう事に興味があるんだなーー」とか
「あれ??最近この手の話題がブームなのかしら??」とか
なにげにチェックしています。

でもですねぇ～ほとんどがデフォのまんまの味も素っ気もないリストが並んでるだけなんでその辺はちょいと面白くないかもです。
エントリー自体は自動であがってくるんで別に小細工する必要もないんですけどdel.icio.usのブックマーク一覧には自動でクラスが割り振られてるんでこれを利用しない手はありません。
せっかくですものcssでおめかししてあげてもいいんじゃないかと。
クラスを図解してみるとこんな感じになっております。

単純至極なんでcssをいじるのもそんなに大変じゃないと思いますです。

まず全体がdeliciousというクラスに囲まれてます。
タイトルがdelicious-link
概要がdelicious-extended
タグがdelicious-tags

これらを踏まえて実際いじってみたcssのソースをサンプルとしてあげてみます。
たいした事はやっておりませんがこれだけでも結構満足しておりますです。
(つっ込みドコロ満載とは思いますが許してくださいw)
たたき台にしてお好きなように装飾してあげてみてください。
実際にご自分で使われるリストマークのサイズによってpaddingの値は変えてくださいねー

/* del.icio.us daily blog posting */ .delicious ul { margin-left:0; padding-left:0; list-style:none } .delicious li { padding-left:23px; background:url(リストマークのURL) no-repeat 5px 5%; border-bottom:solid 1px #ccc } .delicious li,.delicious-tags { padding-bottom:5px } .delicious-extended { padding-left:15px; font-size:x-small; color:#333 } .delicious-tags { font-weight:bold }

リンクの設定はなにもしていないのでページ全体のcssと同じものが適用されます。
もしもdel.icio.usだけ違うリンクの設定にしたいって場合は

.delicious a:link { }

などと個別にいじってみてください。
(当たり前の事言ってしまってスイマセン…)