TOP > カスタマイズをしよう! > title - 自分のコメントに背景色をつけたい!
自分のコメントに背景色をつけたい!
自分のコメントに背景色をつけたい!とはどういう事かというと、管理人である自分と他の人とのコメント欄での背景色を変える事によって、一目瞭然にわかりやすくする事ができます。
大体のブログのコメントは、見てくれている人がコメントを入れてくれたら自分が返事をする会話の様な形式になっていると思います。なので背景色を変える事で会話の流れがわかりやすくなります。
最初に管理画面のテンプレートの設定からHTMLの編集を開きます。そして<!--/comment-->と<!--/comment-->で囲われている所を探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。
このブログの場合は、
ここの中のタグを<div class="<%comment_name>"> と</div>で囲います。
このブログを例にすると、
次はスタイルシートの編集を見ます。スクロールを一番下まで持っていって、一番下に書かれているタグから1行空けて、
あなたの名前の所には、コメントに名前をつける時の自分の名前を書いて下さい。僕の場合にはるんばばと名前を入れます。
「.」は小さいけどつけるのを忘れないで下さい。
色の値は自分の背景色にしたい好きな色の値に変えて下さい。
また自分以外のとても仲のよい友達など、特定の人も背景色をつけたければその人の名前も指定して、続けてスタイルシートに記入して下さい。
.るんばば{ background-color:#FFE4B5; }
.rgrg{ background-color:#ffff99; }
この様になります。人の名前は好きなだけ追加できます。
今度は色ではなくて背景に画像をつける方法です。HTMLの編集は背景色の時と全く同じなので省きます。
スタイルシートの編集で画像の場合は、
画像の並べ方のタグも紹介しておきます。
数字と単位で指定する事もできます。横方向は左からの距離で、縦方向は上からの距離で指定します。(単位はpx・%など)
使い方は、
.るんばば {
background-image: url(http://blog-imgs-41.fc2.com/r/g/r/rgrg/haikei.gif);
background-repeat: repeat-y;
background-position: left;
}
などの様に追加していくだけなので、簡単だと思います。
大体のブログのコメントは、見てくれている人がコメントを入れてくれたら自分が返事をする会話の様な形式になっていると思います。なので背景色を変える事で会話の流れがわかりやすくなります。
自分のコメントに背景色をつける方法
最初に管理画面のテンプレートの設定から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> |</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-->
この様になっていました。<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> |</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> |</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--> ">
この様に囲います。<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> |</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;
}
などの様に追加していくだけなので、簡単だと思います。
コメント
- コメント蘭に画像を載せる
- 大変参考になりました
やっとうまく行きました
ありがとうございました
- 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
自分のコメントに背景色をつける
- 自分のコメントに、他の方とは違う背景色をつけるカスタマイズを紹介します。 【参考サイト】 自分のコメントに背景色をつけたい! - 初心...