ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - 自分のコメントに背景色をつけたい!

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

自分のコメントに背景色をつけたい!とはどういう事かというと、管理人である自分と他の人とのコメント欄での背景色を変える事によって、一目瞭然にわかりやすくする事ができます。
大体のブログのコメントは、見てくれている人がコメントを入れてくれたら自分が返事をする会話の様な形式になっていると思います。なので背景色を変える事で会話の流れがわかりやすくなります。
自分のコメントに背景色をつける方法

最初に管理画面のテンプレートの設定から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;
}

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


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
コメント蘭に画像を載せる
大変参考になりました
やっとうまく行きました
ありがとうございました
Re;コメント蘭に画像を載せる
猫ちゃんがいっぱいでカワイイブログですね!
うちのブログが参考になった様でうれしく思います。
上手くいかなくて・・・
るんばばさん、今日も格闘しています。
自分のコメントの背景に色をつけるというヤツですが、頑張っているんですがなかなか上手くいきません(/_;)

もうちょっと時間を置いてから頑張ってみようかと思います。
奥が深いですね。
またいろんなこと吸収させていただきます。
よろしくお願いします。
カスタマイズ
カスタマイズは難しいですからね。あせずらゆっくりやってみて下さい。
時間が経つと出来なかったことも何故かすんなり出来てしまうこともありますよ!
できました!
なんと、2日かかってようやく謎が解けましたよ!
終わってみれば単純なことでした。^^;

スタイルシートの編集の仕方も、徐々に分かりかけてきたので、これからですね。
他のカスタマイズ方法もがんばってやってみます。

何事もあれこれ悩んでやってみるべきですね!
あれ?
できてよかってですね!と思って黒ゴマアイスさんのブログを見てみて疑問に思ったのですが、コメントの背景色ではなくて画像と文字の間隔の方ですか??
「自力解決の意義」を読まさせてもらったのですが、僕も本当にそう思います。
徐々に分かりかけてきたとの事なので今が一番楽しい時期だと思います。
色々やってみてくださいね!!

なかなか
コメントの背景色、なかなか上手くいきません。

少しずつhtmlとcssの勉強しているんですが、何でですかね^^;
あれこれみててもなんだかよく分からなくて、頭がこんがらがってます(-_-;)
コメントの背景色
うまくいかなくてお困りのようですね。
どの様に上手くいかないのでしょうか?少しはヒントを出せるかもしれません。
ちなみに今の黒ゴマアイスさんのブログの状態は手を加えていない状態ですよね?
いつもとってもお世話になっています<m(_ _)m>

コメントに背景色を付けたのですが、枠線も消えてしまいました。
どこかコピペを間違えてしまったのでしょうか?
りえっくまさんへ
.こんにちは。コピペは間違っていないと思います。ただりえっくまさんのお使いのテンプレではこのままではちょっとだけあわないので線にカブってしまっているんだと思います。なのでスタイルシートに付け加えた
.りえっくま { background-color:#99CCFF; margin: 20px;}
こちらに赤字で書いたmargin: 20px;を付け足してみてください。
ありがとうございました!!
おはようございます。
回答いただきありがとうございました。
きちんと直すことができました。
本当にありがとうございました。

これからもお世話になると思いますが・・・よろしくお願いします。
りえっくまさんへ
上手くいってよかったです。テンプレを変えるとちょっとウキウキしますよね!!
なぜでしょう。
いつも、お世話になってます。
コメントに背景つけたいのですがHTMLの編集で
<div class="<%comment_name>"> と</div>で囲ったところ
わたしのコメントが表示されないのですが
どうしたらいいのでしょうか?
とりあえず、今は外してますがさっぱりわかりません。
るんばばさん、よろしくお願いします。
るんばばさん、こんにちは。

背景に色をつけるタグを入れたのですが、
何も変わりません;;

入れる場所は何度も見直したので
おそらく合っていると思うのですが、間違っているのでしょうか・・?

それとも、テンプレートがもしかして
特殊だからなのかな??とも思っていますm(__)m

テンプレートはFC2共有テンプレートの
lightframe_white
というものを使わせていただいています。

お返事いただけるとうれしいです。
どうぞよろしくお願いいたします。
利奈さんへ
こんにちは。lightframe_whiteのテンプートは「FC2ブログのテンプレート工房」さんのテンプレートですね。この方のテンプレートのコメント欄は利奈さんがおっしゃるように少し特殊なのでできないですね。お役に立てずに申し訳ないです。
YUKAさんへ
YUKAさんはコメントに敬称をつけるカスタマイズも使っていますよね?
その場合はこの紹介したまま使うと自分のコメントが消えてしまいます。
なのでHTMLの方を <div class="<%comment_name>3"> などにして
スタイルシートの方を .YUKA3 { background-color:#FFE4B5; } として下さい。
でも上手くいってもお使いのテンプレートは背景に画像を使っているので、ちょっと変な感じになってしまうかもしれないなと思いました。
ありがとうございました。
お返事ありがとうございます。
さっそくやってみたところ、ちゃんと表示されました。
また、わからないことがあったらよろしくお願いします。
YUKAさん
ちゃんと表示されていましたね!しかも背景の画像とかぶらないように綺麗にできていてよかったです!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/185-3ae62a12   

自分のコメントに背景色をつける
自分のコメントに、他の方とは違う背景色をつけるカスタマイズを紹介します。 【参考サイト】 自分のコメントに背景色をつけたい! - 初心...

Template Designed by DW99