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

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

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

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

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

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

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

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

自分も使いたい、という奇特な人のために、一応ここに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;
}

（櫻木）