CSSいじり

15日の日記に書いたとおり、コメント欄のデザインを新しい「はてなの仕様」にあわせて以下のように微調整しました。(あえてここに書かなくても、ソースを見てもらえば良いんだけどね)

/* div.comment (コメント部分のブロック) */    
div.comment {
	background-color: #ffffff; 
	width: 100%;
	margin: 0;
	padding: 1em;
}
/* div.caption ( [コメントを書く] の部分) */    
div.caption{
	font-size: 80%;
	margin: 0;
	padding: 0 0 0.5em 0;
}
div.caption a {
	border: none;
}
/* div.commentshort (全てのコメントを纏めるブロック) */    
div.commentshort {
	margin: 0;
	padding: 0 0.5em;
}
/* div.commentshort p (それぞれのコメント) */    
div.commentshort p {
	position:relative;
	margin: 0;
	padding: 0 0 0 2em;
	font-size: 90%;
	letter-spacing: 0px;
	overflow: visible;
}
div.commentshort a {
	text-decoration: underline !important;
}
/* span.commentator (コメント投稿者) */    
span.commentator {
	font-weight: bold;
	z-index: 1;
}
span.commentator a {
	color: #000000;
	border: none;
	font-weight: bold;
	overflow: visible;
}
span.commentator img {
	vertical-align: middle;
}
/* span.timestamp (コメント投稿日時) */  
span.timestamp {
	position: absolute;
	right: 0;
	_right: 2em;
	*right: 2em;
	top: 0;
}
span.timestamp a {
	color: #cccccc !important;
	margin-left: 0.5em;
	font-weight: normal;
}
span.timestamp a:hover {
	color: #666666 !important;
	z-index: 2;
}
/* span.commentbody (コメント本文) */  
span.commentbody {
	display: block;
	padding: 0.2em 0 0.4em 0;
	margin-left: 2em;
}

あまり変わり映えはしてないですが……。(笑)
無駄が多いのは僕仕様(何？)です。あと、やっつけ仕事なので、コメント投稿者の名前がめちゃめちゃ長くて、ウインドウの幅がめちゃめちゃ狭かったらタイムスタンプと重なってしまうけど、まあその辺は気にしない方向で。一応、重なった時は投稿者名が上になるようにしていて、タイムスタンプにカーソルを乗せたら逆転します。
ただ、やろうと思ってどうしてもできないのが敬称を付けること。
公式発表では、HTML構造の変更点は以下のようになっています。

HTML構造の変更 (username の部分のみ抜粋)

<span class="commentator"><a class="hatena-id-icon"><img class="hatena-id-icon">username</a></span>

もし、このとおりだと、<a>要素の[href]属性で僕以外の投稿を判別できるので、以下のCSSで僕以外の投稿者に敬称を付けることができます。

span.commentator a:after {
	content: "さん";
}
span.commentator a[href="http://d.hatena.ne.jp/hyougushi/"]:after {
	content:"" !important;
}

ところが、実際は、はてなユーザーじゃない人の投稿は以下のようになってしまいます。

<span class="commentator"><img class="hatena-id-icon">username</span>

これだと、<a>要素自体が無いので、上記のCSSでは、はてなユーザー以外には「さん」が付けられません。

span.commentator:after {
	content: "さん";
}

ってやっちゃうと、僕にも「さん」が付いてしまって間抜けだし、上手くいかないんだよなぁ。JavaScript が使えたら簡単なんだけど……。うーん、うーん。