FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

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

自分のコメントに、他の方とは違う背景色をつけるカスタマイズを紹介します。

【参考サイト】
自分のコメントに背景色をつけたい！ - 初心者でもできる簡単FC2ブログの作り方様

HTMLを編集します。赤い箇所を加えてください。
テンプレートにより挿入箇所が異なります。

【standardシリーズの場合】

<a name="comment_list"></a><br />
<div class="article">

<div class="cmbk_<%comment_name>">

～

</div>

【lightframeシリーズの場合】

<a name="comment_list"></a>

<div class="comment_outline">
<div class="cmbk_<%comment_name>">

～

</div>
</div>

次にスタイルシートの末尾に以下を加えてください。
これは各テンプレート共通です。

.cmbk_自分の名前 { background-color:#cccccc; }

自分の名前は、普段あなたがコメントに入力する自分の名前に置き換えてください。
私を例にするとこうなります。

.cmbk_いたお { background-color:#cccccc; }

これで自分のコメントに背景色をつけることができます。

【2009/10/19 追記】名前の中に@が含まれると機能しないようです。

関連記事

[ 2009/05/11 22:44 ] カスタマイズ共通カスタマイズ | TB(2) | CM(27)

[ 4571 ] 初めまして。

初めまして。
とはいえ。こちらのサイト様には以前からとってもとってもお世話になっておりました。
改めまして。いつもありがとうございます。

さて。今回書き込ませて頂いたのは。
上記記事通りに自コメント欄のカスタマイズを施しましたら。
名前の表示からコメント欄全体の表示がおかしくなってしまったからなのです。
コメントを書く時に。自分の名前を太字にしているのが原因だと思うのですが。
名前の表示位置がおかしくなり。太字の命令が名前だけではなく。
本文にまで。適用されているようです。
これは回避できないのでしょうか？
つたない説明ではご理解頂けないかもと思い。
表示がおかしいままにしておきます。
お手数おかけしますが。一度確認して頂けますでしょうか？

当方は。IE8です。
よろしくお願い致します。

[ 2009/06/03 22:40 ] [ 編集 ]

[ 4576 ]

コメントの名前入力時に

<span class="fc2_owner_comment" style="font-weight:bold;">びぃ</span>

と、タグを含めて入力しているようですね。

これでは
<div class="cmbk_<%comment_name>">
の部分が
<div class="cmbk_<span class="fc2_owner_comment" style="font-weight:bold;">びぃ</span>">
と、タグ違反になってしまいます。

お手数ですがコメントの名前を全て修正するか、このカスタマイズを諦めてもらう他ないです。

あまりお役に立てず申しわけありません。

[ 2009/06/03 23:49 ] [ 編集 ]

[ 4579 ] ありがとうございました。

超特急でのご解答ありがとうございます。

やはり。太字が原因ということなのでしょうか。
今回このカスタマイズをやってみて気づいたのですが。
コメント記入時に。名前を太字装飾すると。
名前自体が反映されなくなっちゃうみたいですね。
さっき気づきました。おマヌケです(^_^;)。

名前を修正すればよいのでしょうが。
その修正の仕方が・・・(-_-;)。
こっちの方を調べてみます。

お手数おかけしてすいませんでした。
役に立たないなんてトンでもないです。
ありがとうございました。

[ 2009/06/04 01:05 ] [ 編集 ]

[ 4583 ] > びぃさん

太字のためのタグが原因です。
コメントの名前の横にある[編集]で修正できますよ。

[ 2009/06/05 01:02 ] [ 編集 ]

[ 4587 ] 何度もありがとうございます。

編集しようと思ったのですが・・・・
私。自コメントを書くときに。バスワード設定してなかったんですよ。
自分のブログなので。パス書かなくても。編集できると思い込んでました・・・
このカスタマイズもすごく素敵なので。自コメントの修正くらいやってやる～。
と思っていたんですが・・・(-_-;)。
太字装飾を選ぶと。今でも名前が表示されないようですし。
こらからはぜーったい太字にはしません！

何度も丁寧に教えて下さり。ありがとうございました。

[ 2009/06/05 17:49 ] [ 編集 ]

[ 6563 ]

少し前に教えて頂いたばかりですが
ここを見てると改造してみたくなります・・・

今回自分のコメントに背景色をつけるを挑戦してみたところ
なぜか何も変化がないのです・・・
もしかしてこれはいたおさんオリジナルテンプレートのみの設定ですかね？

それかテンプレートがこの方法と相性が悪いのでしょうかね？

[ 2009/10/19 15:59 ] [ 編集 ]

[ 6570 ] > 海斗さん

ちょっと試してみたのですが、どうやら名前の中に@が含まれていると機能しないようです。

[ 2009/10/19 23:56 ] [ 編集 ]

[ 6573 ]

な・ん・で・す・と
わかりました。
いろいろ試行錯誤をして、やってみます
お騒がせしてすみませんでした。

[ 2009/10/20 00:12 ] [ 編集 ]

[ 6580 ] > 海斗さん

自分の名前ではなく、トリップをクラス名に利用する方法の記事を見つけました。この記事を参考にしてみてください。

BeigeHeart_べーじゅのこころ：管理人コメントを区別する方法
http://beigeheart.blog9.fc2.com/blog-entry-527.html

[ 2009/10/21 00:25 ] [ 編集 ]

[ 8037 ] トラバさせていただきました

いつもお世話になっています。
記事にトラバさせていただきましたので宜しくお願いいたします。

[ 2010/01/26 11:00 ] [ 編集 ]

[ 8053 ] > やっすぃぃぃーさん

いつもトラバありがとうございます＾＾

[ 2010/01/27 00:11 ] [ 編集 ]

[ 8058 ]

背景色を変えるのではなく、背景画像に変えられませんか？

[ 2010/01/27 03:15 ] [ 編集 ]

[ 8062 ] Geckoさん

background-color: ～を

background-image: url(画像のURL);

に変更すれば背景が画像になります。どういう画像を利用するかによりますが背景画像を１回しか表示しないで繰り返さないようにするには(画像のURL)no-repeatとします。横方向繰り返しはrepeat-x、縦方向繰り返しはrepeat-yです。

ご参考に

[ 2010/01/27 15:15 ] [ 編集 ]

[ 8069 ]

変えてみたのですが適応されません。
どうしてでしょう？

[ 2010/01/27 22:05 ] [ 編集 ]

[ 8070 ]

すみません、解決しました。
しかし、一番下に白い線が入ってしまいます。
これって消せませんか？

[ 2010/01/27 22:28 ] [ 編集 ]

[ 8071 ] Geckoさん

CSSをちょろっと見た限りですが、

** ▼ コメント ▼ */の
.comment_outline {
border:#000000 2px solid; の2pxを 0pxか、

.comment_navi {
margin:0px 10px 3px; の3pxを 0px で

うまくいかないでしょうか？

※ウチはいたおさんのテンプレートでないのでココと明確に伝えられなくてごめんなさい

[ 2010/01/27 23:17 ] [ 編集 ]

[ 8076 ] > Geckoさん、やっすぃぃぃーさん

> Geckoさん
やっすぃぃぃーさんが教えてくれたようにマージンを０にしてみてください。

.comment_navi {
text-align:right;
margin:0px 10px 0px;
}

> やっすぃぃぃーさん
助けてくれてありがとうございます＾＾

[ 2010/01/27 23:50 ] [ 編集 ]

[ 8077 ]

う～ん...うまくいかないですね

[ 2010/01/28 05:34 ] [ 編集 ]

[ 8079 ] Geckoさん

手持ちのFirefox、GoogleChrome、IE7とIE8ではうまく表示されているようにみえます。タイトルと本文の下に線がありますが、

.comment_title {
border-bottom:#666666 0px solid;
で消せると思います。

IE5.5とIE6では背景画像は表示されませんがそのことをおっしゃってますか？

これはIE6のバグなので対処方法は
.cmbk_Gecko {
width: 510px;

っていれたらうまくいくかもしれません。調整は必要となりますが・・・

[ 2010/01/28 19:40 ] [ 編集 ]

[ 8081 ]

ありがとうございますm(_ _)m
ただ、タイトルの
下の線は少し残ってしまいます

[ 2010/01/28 21:50 ] [ 編集 ]

[ 8082 ] Geckoさん

.comment_body {
border-top:#cccccc 0px solid

でどうでしょう

[ 2010/01/28 23:46 ] [ 編集 ]

[ 8085 ] > Geckoさん、やっすぃぃぃーさん

> Geckoさん
やっすぃぃぃーさんが教えてくれたところを0にしてください。

> やっすぃぃぃーさん
いつもありがとうございます＾＾
IE5にまでケアしているなんて流石ですね。

[ 2010/01/29 00:15 ] [ 編集 ]

[ 8088 ] いたおさんへ

いやいや・・・、IE5.5はあくまでも必要最低限としてます。ユーザー数はごく限られていますからね。

ただIE6はまだまだユーザー数が多く見捨てられないので正直苦労が絶えません(泣)。

あ、そうそう。普段はFirefoxでこちらのブログにおじゃましてますが、IE6で見て見ましょうね。キャプチャーしたのを置いておきます。

http://blog-imgs-30.fc2.com/y/a/s/yassee/20100129.jpg

メインエリアが左に寄ってますね。ご参考に。

[ 2010/01/29 01:15 ] [ 編集 ]

[ 8089 ]

ありがとうございますm(_ _)m
解決しました

[ 2010/01/29 01:57 ] [ 編集 ]

[ 8091 ] Geckoさん

解決して良かったです。中学生でここまでやっているとは正直驚きです・・・。がんばってください。

[ 2010/01/29 02:40 ] [ 編集 ]

[ 8103 ] > Geckoさん、やっすぃぃぃーさん

> Geckoさん
やっすぃぃぃーさんのおかげで解決できましたね。良かったです＾＾

> やっすぃぃぃーさん
なんとIE6ではそのように見えていたとはお恥ずかしい。
教えてくれてありがとうございます。これは早急にIE環境を整えなければいけませんね＾＾；

[ 2010/01/30 00:08 ] [ 編集 ]

[ 8769 ] 承認待ちコメント

このコメントは管理者の承認待ちです