2008/02 はてブにて

ソーシャルブックマークサービスのはてなブックマークが、大幅に仕様変更されると同時にデザインも一新されました。
まあそれはいいんですけど、今まであったデザインのカスタマイズ機能はなくなり、CSSによるオリジナルデザインができなくなりました。

それにともない、「やる夫のブックマーク」スキンは一夜にして消滅してしまいました…。
（参照：やる夫がはてなブックマークを始めたようです。-朱雀式）

おれのやる夫ブックマークがあああああ！

お、おれのやる夫ブックマークがきえちまったああああ！！

ばかーーーーーー！
（おれのやる夫ブックマークがあああああ！）

hirose504 なんという俺ｗｗｗ 2008/11/26
tragedy 俺のも消えたｗｗｗｗ 2008/11/26
kozai 私のやる夫も消えてしまった。 2008/11/26
fffighter はてな (´・ω・`)にょろーん 2008/11/25
isikaribetu07 あたりまえだけど俺のも消えたんだぜ(’A`) 2008/11/25
HolyGrail はてブ 2008/11/25
Valueless わかります(´・ω・｀) 2008/11/25
（はてなブックマーク – おれのやる夫ブックマークがあああああ！）

ログとか取ってなかったから分かりませんけど、このブックマーク数とか見る限り、意外とこの『やる夫スキン』って使ってもらってたみたいなんですよね。（やる夫がはてなブックマークを始めたようです。 ）
もちろん僕も愛用していたわけで。

仕様変更して便利になったり機能が増えたりするのはいいと思うけど、こういう既存ユーザーの作ったものを消滅させる変更は、もうちょっとこう…事前のアナウンスとか…。

『やらない夫Ver』で使ったこの画像も、今となっては妙に切ないメモリーに。

2008/02 はてブにて

一応HTMLをサルベージして再現してみました。はてなが画像フォルダごと消しちゃったので画像切れになってますが、こんな感じのスキンだったんです。

やる夫ブックマーク
やらない夫ブックマーク

新しくなったはてブ。
朱雀式ブックマーク

お気に入りユーザーのコメントが一緒に表示されるのとかは良いと思いますが。

関連記事:

1. HTMLのみで作る国旗 『日の丸』
2. やらない夫もはてなブックマークを始めたようです。
3. やる夫がはてなブックマークを始めたようです。
4. カテゴリごとにデザインを変えるCSS指定
5. CSSの縦書きボックスで短冊

が、「やる夫ができたら次はやらない夫だろう常考…」という意見が山のように2件ほど寄せられまして、急遽作りました、やらない夫ブックマーク。

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

全てのコメントに「常識的に考えて…」が自動挿入されるので、このスキンを使えば誰でも常識人に見られ、説得力が生じるという魔法のライフハック！

しかもやる夫と同様、コメントなしの場合は「……。」が自動挿入されるので便利です。

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

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

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

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

！注：タグ必須です。ないとふきだしが上にずれます。

 
dl.bookmarklist dd.comment {
background: url(http://sub.suzaku-s.net/css/yaranaio/yaranaio.gif) no-repeat;
display: block;
height: 97px;
width: 462px;
margin: 0px;
padding: 10px 0px 0px;
}
.comment .tag {
font-size: 80%;
color: #666666;
margin-bottom: 10px;
position: relative;
top: 85px;
left: -10px;
}
.comment .tag a:link {
color: #666666;
}
.comment span.comment {
background: url(http://sub.suzaku-s.net/css/yaranaio/comment.gif) no-repeat left bottom;
margin: -15px 0px 0px 70px;
padding: 0px 5px 22px 21px;
font-size: 12px;
color: #333333;
line-height: 120%;
font-family: "ＭＳ ゴシック", "Osaka－等幅";
display: block;
width: 387px;
}
span.hatena-star-comment-container {
padding-left: 100px;
}
div.body {
background: url("http://sub.suzaku-s.net/css/yaranaio/yaranaiohead.gif") no-repeat right top;
}
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 {
padding-bottom:145px;
background: url("http://sub.suzaku-s.net/css/yaranaio/side.gif") no-repeat right bottom;
}
 
.comment .comment_img {
position: relative;
left: 50px;
}

関連記事:

1. やる夫がはてなブックマークを始めたようです。
2. CSSの縦書きボックスで短冊
3. HTMLのみで作る国旗 『日の丸』
4. カテゴリごとにデザインを変えるCSS指定
5. やる夫のはてなブックマークは消えました。

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

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

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

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

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

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

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

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

関連記事:

1. やらない夫もはてなブックマークを始めたようです。
2. CSSの縦書きボックスで短冊
3. HTMLのみで作る国旗 『日の丸』
4. やる夫のはてなブックマークは消えました。
5. カテゴリごとにデザインを変えるCSS指定

カテゴリごとに記事を変えたい！と常々思っていました。こうしてグローバルメニューを配置して、通常のWEBよりの構成で運営している場合はなおさらです。

いや、実はリニューアル時に、後々カテゴリデザインをカスタマイズできるようにHTMLを組んでいたんですが、画像やデザインを作成するのが面倒なのでそのままになっていました。

Mobableype専用の方法

MovableTypeに限って言うと、例えば次のような方法があります。

<MTIfIsDescendant parent="カテゴリ名１">
カテゴリ名１で表示したい内容
</MTIfIsDescendant>
<MTIfIsDescendant parent="カテゴリ名２">
カテゴリ名２で表示したい内容
</MTIfIsDescendant>
カテゴリー毎にデザインを変える:Movable Type入門

カテゴリごとに、物理的に出力する内容を変える方法です。ただしこの方法はMovableTypeにしか使えません。他のブログでこうした出力分けができるかどうかは不明です。

汎用的な方法

そこでここでは、CSSによってデザインを「上書き」する方法をご紹介します。

変更したいカテゴリーのBODYタグに、次のようにid指定を挿入します。

<body class="任意" id="categ<$MTCategoryID$>">

これによって、MobableTypeの場合”categ25″など、カテゴリーIDに応じた数値が挿入されることになります。（CSSの指定では、数字から始まるクラス・IDは使用できないので、idの前に文字が必要なことに注意。）

あとは、通常の指定がこうなっているとしたら、

div#header{ background….}

次のようにすれば、指定を上書きしてカテゴリ固有のものにすることが可能です。

#categ25 #header{ background….}

今回、朱雀式では、次の2カテゴリーに独立ヘッダーを作成しました。
・捕鯨問題
・パチンコ撲滅運動

関連記事:

1. やる夫がはてなブックマークを始めたようです。
2. やらない夫もはてなブックマークを始めたようです。
3. CSSの縦書きボックスで短冊
4. HTMLのみで作る国旗 『日の丸』
5. Wordpressの404ステータスに注意

そんな面倒くさがりな愛国キッズのために、HTML（＋CSS）のみで作る日の丸を作りました。一見画像に見えますが、CSSを切ると「●」一文字になります。このサイトの1月1日にあるのも実はこれでした。

●

<div style="border:solid 1px #000000;background-color:#FFFFFF;color:#DC143C;width:150px;height:100px;font-size:72px;line-height:100px;text-align:center;">
●</div>

関連記事:

1. CSSの縦書きボックスで短冊
2. やらない夫もはてなブックマークを始めたようです。
3. やる夫がはてなブックマークを始めたようです。
4. カテゴリごとにデザインを変えるCSS指定
5. やる夫のはてなブックマークは消えました。

仕事中に自分のサイトを閲覧する機会は結構あります。（すみません！）
「そういえばあそこ、どう書いたっけな」とか「昼休みにちょっと書き直そう」とか「スター付いてないかな」とか。

しかしそういったときに、このデザインをあまり人目にさらしすぎるのは考え物です。「あいつ、サボってやがるな」くらいならまだしも、燦然と輝く「朱雀式」のロゴを手がかりにサイトばれ…など（再び）した日には、目も当てられません。

といわけで、こちらのCSS切替スクリプトを使って、あたかもＧｏｏｇｌｅの検索結果を眺めているかのような、Ｇｏｏｇｌｅ迷彩スタイルシートを用意しました！　（ここです）

まあ相当読みにくいんですが、右上にあるプルダウンのセレクターでスタイルを切り替えられるので、通常は「朱雀式」で見ていただければと思います。

お使いになりたい方は、適当に使っていただいて結構です！（いるのか？）

CSS
画像
ダミーテキスト
フッター
ヘッダー
段落部分

関連記事:

1. CSSの縦書きボックスで短冊
2. HTMLのみで作る国旗 『日の丸』
3. カテゴリごとにデザインを変えるCSS指定
4. やる夫がはてなブックマークを始めたようです。
5. やらない夫もはてなブックマークを始めたようです。

短冊ＣＳＳの作り方

（外部ＣＳＳの場合）
.tanzaku {
background-color: #E0FFC1;
width: 15px;
border: 1px solid #CCCCCC;
font-size: 12px;
padding: 10px;
}

（直接スタイル指定の場合）
<p style="background-color: #E0FFC1;
width: 15px;
border: 1px solid #CCCCCC;
font-size: 12px;
padding: 10px;">日本が平和でありますように </p>

・ポイント（というほどのものでもない）
・両側からパディングではさまれるので、自動的に縦書きになる。
・ＩＥとＦｉｒｅＦｏｘでパディングの解釈が違う（内側と外側）ので、ＩＥ用に幅を小さめに取る。

関連記事:

1. やらない夫もはてなブックマークを始めたようです。
2. やる夫がはてなブックマークを始めたようです。
3. HTMLのみで作る国旗 『日の丸』
4. カテゴリごとにデザインを変えるCSS指定
5. やる夫のはてなブックマークは消えました。