僕は、はてなブックマークというソーシャルブックマークサービスを、単なる自分向けのブックマークメモとしてだけではなく、プチニュースサイト的な、このサイトのコンテンツのひとつとして捉えています。
となると、それなりにオリジナルなデザインにしたいかな。でもあんまり大掛かりなのとかオシャレなのとか作れないお…。と悩んでいたら、ピコーンとひらめきました。
「本当はかっこいいデザインにしたいお…」
「でもあんま凝ったのは難しいお…」
「だからやる夫にするお!」
というわけで、やる夫スキンができました。
はてなブックマーク – 朱雀式ブックマーク
これにすれば、どんなに適当なタグや失礼なコメントをつけても、「~とやる夫が言っているようです」でごまかすことができるという、魔法のライフハック!
(ただし、自分のアカウント以外のところでは関係ないので注意が必要です。素人にはオススメしません)
自分も使いたい、という奇特な人のために、一応ここに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;
}
(櫻木)
これは良いものだ。
やる夫のはてブスキンだお / ふきだし周りを修正したお!
やる夫のはてブスキン / コメント&タグを必死に考えることになるライフハック
こっちが元だったのね。2ちゃんねるスキンも欲しくなる。
はてなブックマークの「やる夫」スキン。『どんなに適当なことや失礼なコメントをつけても、「~とやる夫が言っています」でごまかすことができる』
これは面白い。
早速これに替えた
俺の場合はつかわないなぁ。/でもこれはよい仕組みではないかと。やる夫に代弁させることで印象が軽くなるというのは何かとよさげなのでは。
ネガティブコメントが気にならない!ふしぎ!
ありだな。ただしページ幅が増えるので使わない。
やるおだと思うとかわいく見えてくる!ふしぎ!
こんなの採用に決まってるじゃないですか
これはいいwww
やる夫すげぇ
やる夫スキンができたみたいだお!
画像変えれば、色んなキャラでいけるな。
早速使ってみたお
[!GTD::資料(いつか読む)] やる夫がはてなブックマークを始めたようです。 – 朱雀式
さっそくいれてみたお・・・ これは・・・ スゴイ・・・
画像と設定変えれば他のも使えていいな
スタイルシートでやる夫AAを描いて代弁させる!これはナイスな発想だ!イカス!
逆に火に油を注ぐような…。使ってる人だけやる夫化するならまぁいいか。
面白いお
被favが増えるだろうか/現在13人
やるおスキン
すげえなあ。
面白いので使ってみた
こうなったらやらない夫も必要だろう常識的に考えて…
この発想はなかったお
これはいい
どうでもいいがはてなーとねらーってどれくらい被ってるんだろうか。
このままだけでなく、色々アレンジして使えそう。
[B!] ???????????????????(12:46) http://tinyurl.com/yuqwqo ??????.
ハハハ、こりゃ愉快 / どうやって「……。」出してるのかと思ったらこれ含めて画像だったのかw
コメント欄の吹き出しCSS。持ち帰り可能
おもしろい
これの自分アレンジバージョンがこれさ!
やる夫関連は、そろそろまとめてムックか単行本にしてほしい。今一番紙で欲しい。
あほすぎ
使わないかもしれないけど、いちお。
かわいすぎる、いい発想。これは色々派生物が出てくる予感・・・!
実際にやってみた
設定したが、おもしろすぎて戻した
新しい作品が始まったのかと思ったw
この発想はなかったw
この発想はなかった。使ってみる/使ってみた。すごくうざいwww/辞めましたwww
第2版ではdiv.bodyを削除しないと右上は消えない。
じぃつに面白い
大笑いしたお
画像読み込みでパンクしないのかな、gifのアクセスログが伸びればいいのかな。
おおー
これいいおー!
拙作の b:id:nitoyon もよろしく。技術的には同じようなことやってるよ。
面白いけど、ネガコメの本質的な部分は残ったまま。 とは言え、facade(表面)にダマされる人は多いだろうから大半はこのスキンで解決するのかもしれない。 これまで以上に酷いネガコメが増えないことを祈る。
早速使ってみるお!朱雀さんありがとうだお!
GJすぐるwwwww あんた最高wwww
さっそくやってみるお!
これはウザいwwww(いい意味で)
はてブとやる夫の劇的コラボw
素敵過ぎるので即採用!!
さっそく取り入れてみたお。画像の色変えちゃったけどまずかったら言ってください
こ れ か ! やらない夫verもリリース→http://www.suzaku-s.net/2008/02/yaranaio-hateb-css.html
はてなブックマークがCSS対応していたことを初めて知りました。
これか
わろた。
ニュースサイト的デザインにするという発想はあるが、「やる夫」は思いつかない。確かにはてブの毒が吸収される感がある。
「これにすれば、どんなに適当なことや失礼なコメントをつけても、「~とやる夫が言っています」でごまかすことができるという、魔法のライフハック!」この発想はなかったわ。
一気に見栄えが良くなるなぁ
[system:unfiled]