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

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; ←画像を左(右)上に表示
と指定することもできます。

関連記事

コメントの投稿

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

れんさん、すご~い!

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

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

ぷぅちゃん☆様

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

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

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

ボス様

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

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

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

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

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

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

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

清依様

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

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

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

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

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ