自分のコメントに背景色をつけたい！

自分のコメントに背景色をつける方法

最初に管理画面のテンプレートの設定からHTMLの編集を開きます。そして<!--/comment-->と<!--/comment-->で囲われている所を探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログの場合は、

<!--comment-->
<dl class="section" id="cm<%comment_no>">
<dt class="cm_header"><%comment_title></dt>
<dd class="cm_body"><%comment_body></dd>
<dd class="cm_footer"><ul>
<li><%comment_year><%comment_month><%comment_day>&nbsp;|</li>
<li><%comment_mail+name> #<%comment_trip></li>
<li><%comment_url+str></li>
<li class="admin"><a href="<%comment_edit_link>" title="コメントの編集">[Edit]</a></li>
</ul></dd>
</dl>
<!--/comment-->

この様になっていました。

ここの中のタグを<div class="<%comment_name>"> と</div>で囲います。

このブログを例にすると、

<!--comment-->
<div class="<%comment_name>">
<dl class="section" id="cm<%comment_no>">
<dt class="cm_header"><%comment_title></dt>
<dd class="cm_body"><%comment_body></dd>
<dd class="cm_footer"><ul>
<li><%comment_year><%comment_month><%comment_day>&nbsp;|</li>
<li><%comment_mail+name> #<%comment_trip></li>
<li><%comment_url+str></li>
<li class="admin"><a href="<%comment_edit_link>" title="コメントの編集">[Edit]</a></li>
</ul></dd>
</dl>
</div>
<!--/comment--> ">

この様に囲います。

次はスタイルシートの編集を見ます。スクロールを一番下まで持っていって、一番下に書かれているタグから1行空けて、

.あなたの名前 { background-color:#FFE4B5; }

と入力して下さい。
あなたの名前の所には、コメントに名前をつける時の自分の名前を書いて下さい。僕の場合にはるんばばと名前を入れます。
「.」は小さいけどつけるのを忘れないで下さい。
色の値は自分の背景色にしたい好きな色の値に変えて下さい。

また自分以外のとても仲のよい友達など、特定の人も背景色をつけたければその人の名前も指定して、続けてスタイルシートに記入して下さい。

.るんばば{ background-color:#FFE4B5; }
.rgrg{ background-color:#ffff99; }

この様になります。人の名前は好きなだけ追加できます。

自分のコメントの背景に画像をつける方法

今度は色ではなくて背景に画像をつける方法です。HTMLの編集は背景色の時と全く同じなので省きます。

スタイルシートの編集で画像の場合は、

.あなたの名前 { background-image: url(http://blog～～～～.gif); }

と、この様に指定して下さい。あらかじめ画像はファイルアップロードからアップしておいてURLを覚えておいて、ここの仲に記入をして下さい。

画像の並べ方のタグも紹介しておきます。

画像の並び方

background-repeat: repeat-x;	横1列に並べる
background-repeat: repeat-y;	縦1列に並べる
background-repeat: no-repeat;	1つだけ表示する
background-repeat: repeat;	繰り返し表示して敷き詰める

画像の表示位置

基本形	background-position:横方向 縦方向;
横方向	left（左）	center（中央）	right（右）
縦方向	top（上）	center（中央）	bottom（下）
表示位置の例－background-position: left top; （左上に表示） 表示位置の例－background-position: right bottom; （右下に表示）

数字と単位で指定する事もできます。横方向は左からの距離で、縦方向は上からの距離で指定します。（単位はpx・%など）

表示位置の例－background-position: 50px 100px; （左から50px、上から100pxの位置） 表示位置の例－background-position: 150% 300%; （左から150%、上から300%の位置）

使い方は、

.るんばば {
background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/haikei.gif);
background-repeat: repeat-y;
background-position: left;
}

などの様に追加していくだけなので、簡単だと思います。