いろいろなダイアリーを見ていると、コメントで長文レスを応酬しているところがある。しかも、かなり有意義風味な論争だったりするんだけど、いかんせん「はてな」のコメント欄は本文より虐げられてるのでもう読んでらんないおまいら掲示板ってのはもっと殺伐と、もとい読みやすくなんねぇもんかと思い、試しに自分とこのスタイルシートをアレコレいじってみた。おういうのを人は現実逃避という……*1。
ということで、使ってるスタイルはこんな感じ*2。ポイントは太字部分。つまり、2つのdisplayプロパティってこと。まあよかったら議論白熱しがちなダイアリの方は試しに使ってみて感想いただけると嬉しいっす。文字級数／行送り、内余白／外余白／境界線は、自分の好みに合わせて変えてくだし。
/* comment */
div.comment {
font-size: 100%;
}
div.comment div.caption {
font-size: 90%;
padding: 0.5em 1em;
}
div.commentshort p {
line-height: 1.5em;
padding: 0.5em 1em;
}
div.commentshort span.canchor {
display: none;
}
div.commentshort span.commentator {
display: block;
line-height: 1em;
border-bottom: 1px solid #fff;
border-left: 1px solid #aaa;
padding: 0 0 0.2em 1em;
margin: 0 1em 0.5em 0;
}
追記
羊堂本舗(2004-06-19)さんによると
line-height には単位を付けない方がいいかも。勝手に将棋トピックスを参照。
とのことだったので、line-heightから単位を抜いてみた。あまり変わらないけど。というかリンク先を読んでみたのだが、たぶん、このスタイルの場合はdiv.commentshort pのline-heightを継承するspan.commentatorにも明示的にline-heightを指定してるから問題ないかも、と思った。でも理解し損ねてるかもしれない。それにしてもCSSの継承ってマジ面倒だと思った*3。
あと、このスタイルを採用してほしいのは、真っ先にid:hatenadiaryid:hatenadaiaryだと思ったが、そうすると却ってコメントが付けやすくなってid:hatenadiaryid:hatenadaiaryが要望と論争で埋まりまくったりすると嫌度倍増なのでこのまま読み辛いままのあなたでいてね（はあと）と思いなおした（速攻で）*4。
追追記 2005-03-10
いまだにここを参考にされてる方がいらっしゃるので追記しておきますが、この日記自体はいまはもうこの方法を使ってなくって、もう少し単純な表記になってます。こっちを参照
http://d.hatena.ne.jp/mohri/20040731#1113793655
あと、最近のテーマはハナッから↑のリンク先のCSSが仕込んであるのもけっこうあるみたいですYO！ そういうのを選んで使うのも一興かと。
追々々記 2006-03-22
最近はこんなんになってます。
span.canchorにアンカーが埋められるようになったので安易にdisplay: noneしちゃいかんということへの対応です。
/*== COMMENT ==*/
div.comment {
padding: 5px;
margin: 0px 5px 20px 5px;
}
div.comment div.caption {
padding: 3px;
margin-bottom: 3px;
border-bottom: 1px dotted #696;
color: black;
}
div.comment div.caption a {
color: black;
border: none;
text-decoration: none;
}
div.comment div.caption a:visited {
color: black;
}
div.comment div.caption a:hover {
color: black;
}
div.comment div.commentshort {
padding: 0;
margin: 0 2em;
}
div.comment div.commentshort p {
padding: 5px;
margin: 0;
margin-top: 5px;
border-bottom: 1px solid #696;
border-left: 1px solid #696;
}
div.comment div.commentshort p span.canchor {
display: block;
}
div.comment div.commentshort p span.canchor a {
color: red;
background-color: bisque;
border: none;
text-decoration: none;
}
div.comment div.commentshort p span.canchor a:visited {
color: red;
background-color: bisque;
}
div.comment div.commentshort p span.canchor a:hover {
color: red;
background-color: bisque;
border: 1px solid red;
}
div.comment div.commentshort p span.commentator {
display: block;
margin-bottom: 0.5em;
}
*1:てゆか原稿読んでたら触発されたんだよねえ。2xUPによるはてなのデザインの原稿はかなり読み甲斐あり
*2:エントリを書いた後でFirefoxを試したら期待と少し違ったので少し修正しますた
*3:GeckoとIE Componentで解釈が違ったりしません？てゆか今年念頭のMozilla 1.6のREADMEに何かそれっぽい関連ありげなことが書いてある風味→ http://jt.mozilla.gr.jp/releases/mozilla1.6/README.html 勘違いかもだが
*4:スペルの間違いを指摘されたので直してみた
