コメント欄の背景(色・画像)を名前によって変える

09072701.jpgテンプレートのカスタマイズでおもしろいもの(?)を見つけました\(^O^)/

コメントを入れるとそのコメントを入れた人に応じて背景色や背景画像が変えられるというもの。

たとえば…コメントのName欄に「れん」と入れると「れん」が送信したコメントの背景には愛犬レンのイラストが出るようにしてみました。
(サンプルは過去記事のコメント欄をご覧ください。)

ブログ管理者だけでなく、常連さんにもそのようにすることができます。

09072702.gifまず、テンプレートの管理画面-HTML編集で←画像の青色で塗った部分「<!--comment-->」と「<!--/comment-->」を見つけます。

その直下と直前にそれぞれ「<div class="<%comment_name>">」と「</div>」を入れます。

続いて「CSS編集」に移ります。
「CSS編集」の一番最後の部分に次のように記入します。

↓は背景色を変えたい場合です。

.名前{ background-color:#ffcccc; }

名前の前には「. 」がついていますので、忘れずに「. 」も記入してください。
「ffcccc」は背景色です。
例えば記事の編集画面でのcolor.gifマークからカラーコードを調べることもできます。

.れん{ background-color:#ffcccc; }
↑これだと「れん」という名前でコメントが入れられた場合、背景色をこんな色で表示させることができます。

また、背景に画像を持ってくる場合は、先に背景にしたい画像をアップロードし、そのURLを書きます。

.名前{
background-image: url(http://blog-imgs-32.fc2.com/x/y/z/xxxxxxx/12345.jpg); ←赤字部分が背景画像のURL
background-repeat: no-repeat; ←画像を繰り返さない
background-position: right bottom; ←画像を右下に表示
}



背景色の場合も、背景画像の場合も、名前のところはブログ管理人の名前だけでなく、常連さんたちの名前にしてあげると、その人たちがコメントを入れてもらった時に表示されるようになります。
(複数名の設定をする時は名前の部分だけを変更して、続けて記入してください。)

背景画像の場合
background-repeat: repeat-x;  ←画像を(繰り返して)横1列に表示
background-repeat: repeat-y;  ←画像を(繰り返して)縦1列に表示
background-repeat: no-repeat;  ←画像を(繰り返さず)1つだけ表示

background-position: right (left) bottom; ←画像を右(左)下に表示
background-position: left (right) top; ←画像を左(右)上に表示
と指定することもできます。

関連記事

6 Comments

ぷぅちゃん☆  

えええーっ!そんなすてきなことができるんですかっっっ!!
やりたーい!ぜひぜひやりたーーい!!
いまちょっとバタバタだからなぁ~、
夏休みの課題、にしよっと♪

2009/07/28 (Tue) 20:48 | EDIT | REPLY |   

トイ・プー軍団のボス  

れんさん、すご~い!

もう、ますます尊敬しちゃいます e-460
面白いこと、たくさん出来ちゃうんですね。
カスタムレンプレートだったら、
ほんと、いろいろと楽しめちゃいますね~
でも、かなり頭悩ませそうで・・・
もう少し余裕ができたら絶対にやってみようっと。
その時は、れんさんのブログ復讐しま~す!

あっ、コメント送ったら例のイラストが出るんですね~
ちょっと楽しみだったりして・・・

2009/07/28 (Tue) 23:12 | REPLY |   

れん  

ぷぅちゃん☆様

アハ♪
「夏休みの課題」って言うと子供の宿題みたいですね(#^.^#)

私のところはコメント数もそんなにないのでこんなことしなくても自分のコメントはすぐに見つけられますが、コメントの多いブログなんかだと、管理人さんのコメントの背景色を変えておくとわかりやすくてよさそうですよね♪

ぜひ挑戦してみてくださいね~。

2009/07/29 (Wed) 07:08 | EDIT | REPLY |   

れん  

ボス様

そうなんです。
こうやって登録さえしておくと、あとは普段通りコメントを送信するだけ。
でも「Name」欄の名前を判断して背景を出してくれるので、同名のHNの方がいらっしゃった場合は同じ背景になってしまいますね…(^^ゞ
「れん」と「レン」では違うので出ませんけど…。

テンプレートを触っているといろんなことができておもしろいです♪
それに、自分だけのテンプレート…って感じもして愛着も出てくるし!
昨日の夜中もテンプレートをひまわりに変更して遊んでました~。

いつも応援ポチもありがとうございますm(__)m

2009/07/29 (Wed) 07:15 | EDIT | REPLY |   

清依  

れんさん、おはようございます。

夏らしい素敵なテンプレにビックリしていたら、
記事を読んで、またまたビックリ!!

これスゴイですね!!
コメントを入れるのも楽しくなりますね。

お邪魔する度に、れんさんの素晴らしい知識に敬服です。

2009/07/29 (Wed) 07:56 | REPLY |   

れん  

清依様

おはようございます♪
テンプレート夏らしくなったでしょ?
前回のはちょっと手抜きだったので、早く買えてみたかったの( *^艸^)

テンプレート…っていうか…HTMLっていうか…
おもしろいです!
いろんなことができるんですもの♪

昨日アップした記事のスライドショーも、アップする前のソースだけを見た娘…「何これ?」って一言。
「これがこんなスライドショーになるんやで」と言うと驚いていました。
ホント…ソースだけ見てると文字ばかりだから、画像が出てくるなんて考えられませんよね。

ネット徘徊していると興味深いものがたくさんあります♪
こんな紹介が最近多くなっていますが、呆れずにお付き合いくださいねm(__)m

2009/07/30 (Thu) 07:17 | EDIT | REPLY |   

Post a comment