試験的にコメント欄のCSS変更
無駄に長いので「続きを読む」記法ににしました。
- 酔拳の王 だんげの方 - 名前とコメントを二段にわけて見やすくする方法
- http://d.hatena.ne.jp/dangerous1192/20070208/p2
上記エントリーを参考にコメント欄あたりのCSSを変更しました。コメント周りの表示は前から気になってたんだけど面倒で全然いじってなかったんですが（オイ）、昨日上記のステキエントリを発見したので、実装を試みましたよ。
元CSS
/***** コメント二段追加部分 *****/
div.commentshort p {
padding: 1.5em 0.2em 0em 0.2em;
text-indent: 0em;
position: relative;
top: 0px;
left: 0px;
}
span.commentator {
padding-right: 18px;
text-decoration: none;
font-weight: bold;
position: absolute;
top: 0px;
left: 0px;
}
/*****ここまで *****/
名前とコメントを二段にわけて見やすくする方法 - 酔拳の王 だんげの方
そうするとこんな感じの表示になるとのこと。
だんげ
名前とコメントを二段にわけて見やすくする方法 - 酔拳の王 だんげの方
#『こんな感じにコメントがつきます』 (2007/02/07 00:00)）
ぎゃぼ！これぞ私の求めていた表示方法！！
んでうちのデザインにあわせて、個人的にちょこっと改造させてもらいました…スミマセン。
何をしたかというと、「#」の位置をコメント投稿者の名前の前に戻して、「#」の文字をtext-indentとbackgroundでフキダシ画像に置き換えてみたりしました。
なんか無駄に長いな、うちのCSS…。
notieren版
div.commentshort p {
position: relative;
margin-top:1em;
margin-bottom:0.5em;
padding: 2.5em 1em 5px;
line-height:1.4;
background: #2D3132;
}
div.commentshort span.canchor a {
position: absolute;
top: 6px;
left: 0;
text-indent: -1000em;
background: transparent url("画像URL") no-repeat left center;
width: 31px;
height: 14px;
}
span.commentator {
font-weight:bold;
margin-right:0.25em;
padding: 5px;
position: absolute;
top: 0;
left: 28px;
}
IEでおかしな表示になってたので以下に修正。（2007/02/16）
div.commentshort p {
position: relative;
display: block;
margin:1em auto 0.5em;
padding: 2.5em 1em 5px;
line-height:1.4;
background: #6C5548 url("画像URL") no-repeat right bottom;
width: ●●px;
}
div.commentshort span.canchor a {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-indent: -1000em;
background: #6C5548 url("画像URL") no-repeat left top;
width: ●●px;
height: ●●px;
}
span.commentator {
font-weight:bold;
margin-right:0.25em;
padding: 5px;
position: absolute;
top: 0;
left: 1em;
}
んでこんなのになりますよ。
ちなみに Windows だと IE とFirefox で微妙に見え方が違うのだけど（div.commentshort p にかかってるpaddingがposition: abusoluteしてる div.commentshort span.canchor a にもかかってる）、そこまで厳密に見え方を同じにしようとは思わないので直す気ナシです（オイ）。
ただし、まだMacで見え方チェックをしていないので、あまりに崩れるようならばnotieren版の実装はやめる可能性大。
…と自分の技術力のなさの言い訳をしておきます（爆）
Windows IE の問題解決。div.commentshort p に width を指定するのがポイントみたい。
あと一つ前の記事のWin IE6 で見ると、ワクが広がってるの気になる…。
てのは、とりあえず IE6 でだけおかしい感じだったので、div.day に word-break : break-all; 入れてお茶を濁しました。
# meeeres 『なんちゃらかんちゃらほげほげふがふが
コメントコメント』