名前とコメントを二段にわけて見やすくする方法

/***** コメント二段追加部分 *****/

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;
}
/*****ここまで *****/

上記を　管理→デザイン→詳細　とすすんで、スタイルシートの一番下に追加してあげるだけです。

dange1192
#『こんな感じにコメントがつきます』 (2007/02/07 00:00)）

　パッディング簡単に言うと間隔です。　1em=1行です。　pxとかでも指定できます。
順番は　padding: 1.5em(上) 0.2em(右) 0em(下) 0.2em;(左)です。
間隔が気になる人は、この数値をいじってみてください。

この部分はテーマ別によるスタイルシートサンプルのWidowを参考というか、ほぼそのままパクリました。
自分は特にCSSに詳しいわけではないので、間違っている可能性もあります。これ見た詳しい方にエントリーを書いていただけると、とてもうれしいです。

問題があるようなら、スタイルシートにコピーした部分を消してあげれば解決します。

↓
に改訂版があります

コメント欄を二段にして見やすくする 改定版 CSS 2007/08/17

ずっと気になってたので、休みに入ったから直しました。
酔拳の王　だんげの方 - 名前とコメントを二段にわけて見やすくする方法
これだと

　コメントした人の名前
画像『コメント本文』となっていたので
↓
画像　コメントの
『コメント本文』

になるようにしました。　文字色、色、幅等は適当に調節してください。表示はされますがCSS的には変に力技だと思うのでもうちょっとスマートなやり方がわかる方がいましたら、是非教えてください。

div.commentshort p {
	padding: 1.5em 2em 0.2em 2em;
	background-color: #E9E9E8;
	border: #B9B8B4 1px solid;
         margin: 0.5em 2em 2em 1em;
	text-indent: 0em;
	position: relative;
	top: 0px;
	left: 0px;
}


span.commentator {
	padding-left: 1em;
	padding-right: 1em;
	text-decoration: none;         
         font-size: 100%;
         font-weight: bold; 
	background-color: #D8D8D5;
	position: absolute;
	display: block;
	top: 1px;
	left: 2em;
}

div.commentshort span.canchor a {
	display: block;
	position: absolute;
	top: 1px;
	left: 0.5em;
}