CSS

僕は、はてなブックマークというソーシャルブックマークサービスを、単なる自分向けのブックマークメモとしてだけではなく、プチニュースサイト的な、このサイトのコンテンツのひとつとして捉えています。

となると、それなりにオリジナルなデザインにしたいかな。でもあんまり大掛かりなのとかオシャレなのとか作れないお…。と悩んでいたら、ピコーンとひらめきました。

「本当はかっこいいデザインにしたいお…」

「でもあんま凝ったのは難しいお…」

「だからやる夫にするお!」

というわけで、やる夫スキンができました。

はてなブックマーク – 朱雀式ブックマーク
 朱雀式ブックマークを含むブックマーク

これにすれば、どんなに適当なタグや失礼なコメントをつけても、「~とやる夫が言っているようです」でごまかすことができるという、魔法のライフハック!

(ただし、自分のアカウント以外のところでは関係ないので注意が必要です。素人にはオススメしません)

自分も使いたい、という奇特な人のために、一応ここにCSS設定部分おいておきますね。

[設定→デザイン編集→スタイルシート欄]です。

テーマはだいたいどれでも大丈夫そうですが、[hatena-simple]などがうまくいくようです。メイン幅が466px以下だと崩れます。またベースとなるデザインによっては、右上のやる夫の顔がとても邪魔になると思いますが、そういう場合は “div.main { …” の部分“div.body { …” の部分を消してください。

第2版 (2008/02/06)

IE6、Opera等の場合、タグが必須だお!

ブラウザ対応状況
     IE6  IE7  FireFox Opera Safari
Win   △  ○    ○     △   △
Mac   –  –    △     –    △

△… タグがないとふきだしがずれます。


dl.bookmarklist dd.comment {
background: url(http://sub.suzaku-s.net/css/yaruo/yaruo.gif) no-repeat;
display: block;
height: 80px;
width: 466px;
margin: 0px;
padding: 10px 0px 0px;
}
.comment .tag {
font-size: 80%;
color: #666666;
margin-bottom: 10px;
position: relative;
top: 65px;
}
.comment .tag a:link {
color: #666666;
}
.comment span.comment {
display: block;
background: url(http://sub.suzaku-s.net/css/yaruo/comment.gif) no-repeat right bottom;
margin: -20px 0px 0px 90px;
padding: 0px 10px 6px 15px;
}
span.hatena-star-comment-container {
padding-left: 100px;
}
div.body {
background: url(http://sub.suzaku-s.net/css/yaruo/header.gif) no-repeat right -10px;
}
div.main {
margin-top: 5px;
padding-bottom: 100px;
background: url(http://sub.suzaku-s.net/css/yaruo/footer.gif) no-repeat left bottom;
}
div.taglist {
background: url(http://sub.suzaku-s.net/css/yaruo/sidemenu.gif) no-repeat right bottom;
}


第1版 (2008/02/05)
×コメントがないとふきだしが切れるお…
×タグがないとコメントの上半分が切れるお…
○タグはいくら長くても平気だお!


dl.bookmarklist dd.comment {
background: url(http://sub.suzaku-s.net/css/yaruo/yaruo.gif) no-repeat;
display: block;
height: 80px;
width: 466px;
margin: 0px;
padding: 0px;
}
.comment .tag {
font-size: 80%;
position: relative;
top: 70px;
left: -10px;
color: #666666;
}
.comment .tag a:link {
color: #666666;
}
.comment span.comment {
display: block;
background: url(http://sub.suzaku-s.net/css/yaruo/comment.gif) no-repeat right bottom;
margin: -10px 0px 0px 90px;
padding: 0px 10px 5px 15px;
}
span.hatena-star-comment-container {
padding-left: 100px;
}
div.body {
background: url(http://sub.suzaku-s.net/css/yaruo/header.gif) no-repeat right -10px;
}
div.main {
margin-top: 5px;
background: url(http://sub.suzaku-s.net/css/yaruo/footer.gif) no-repeat left bottom;
}
div.taglist {
background: url(http://sub.suzaku-s.net/css/yaruo/sidemenu.gif) no-repeat right bottom;
}

(櫻木)