iPhone/ カメラ/ 自転車/ ブログ/ 食べ物 についてプログラマーやらしてもらっているtakoashiがぐちぐち言う日記系ブログです。
電化製品は機能重視。takoashiはtoshiba:RDを応援してます。
プログラマ系ブログ「takoashiの開発記録」も、よろしくお願いします。

ミニカスタマイズ 22twitterでつぶやく

課題:
自分のコメントの見た目を変更する

=特定投稿者のスタイルを変更できる
=自分のコメントの色が変更できる
=アイコンを付けることもできる
=文字を強調もできる

修正 - 2005/02/20(日) 02:41:43
追記 - 2005/07/04(月) 14:45:18

とっておきの秘技 ライブドアブログを120%使いこなす秘伝書 (とっておきの秘技)
ライブドアブログで稼ぐ!儲ける!

動作環境:
Windows、IE6以上、Firefox、Opera(一部問題のあるバージョンあり)。(その他は未確認)

実装方法:
HTMLテンプレートを編集します。
JavaScript+CSS

コードの追加位置は、コメントの後ならどこでも構いません。


コード:
/////////////////////////////////////////
// 我のコメントよ、光輝け!
/////////////////////////////////////////
function comment_style_change(id,cn)
{
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++)
{
if( divs[i].getAttribute("className") == "comments-post" ||
divs[i].getAttribute("class") == "comments-post" )
{
var name = "";
if( divs[i].getElementsByTagName("a").length != 0 )
name = divs[i].getElementsByTagName("a")[0].innerHTML;
else
name = divs[i].innerHTML;

if( name.indexOf( id ) == 0 )
{
// comments-body が comments-post より前にある場合(通常)
var target = i-1;

// comments-post が comments-body より前にある場合
// ※ うちのサイトなどカスタマイズ済み
//var target = i + 1; // つぎのタグがcomments-bodyだから

divs[target].setAttribute("className", cn );
divs[target].setAttribute("class", cn );
}
}
}
}

// ここに自分の名前を設定する
comment_style_change( "takoashi", "comments-body-admin" );


です。

外部ファイルとして読み込んでも良いし、HTMLテンプレート編集でスクリプトタグに貼り付けても構いません。comment_style_change でスタイルと変更したい名前と、適用したいスタイルを指定します。
簡単に再構築できるように、cssにスタイルは設定します。この場合、「comments-body-admin」というのがtakoashi用のスタイルとなります。

このブログでは、結構前からコメントの色が変わっていました。気づいていた方もいると思いますが、ネタ切れなので発表しました。どうぞ、使ってやってください。

なんで、おいらのも変わってるんだ?と思った方。
それは、こんな方法であなたのスタイルもこそっと変更していたんです。

// 訪問者のコメントもこそっと色を変える
var author = getCookie("author")
if( author != null )
{
if( author.length != 0 && author != "takoashi" )
comment_style_change( author, "comments-body-author" );
}


今回のカスタマイズは、結構いいんじゃない!?


[ポイント]
けっこう、このあたりのカスタマイズで、divタグでボーダー(枠)を書く方法を覚えて、なんにでも枠をつけてしまう人が多い感じがします。枠で囲みすぎたら目立たせたいところが目立たなくなるので注意が必要。

自分、コメントの見た目を変更するにときに、通常の人のコメントにも枠を付けてしまい、どちらが、管理人のコメントかわからなかったりする。それはちょっともったいないかな。。。管理者だということだけがわかるようにしてそれ以外は、目だ立たないようにした方がいいんじゃないかな?

戯言でした。


---
ミニカスタマイズメニュー
カスタマイズの注意点

参考になりました?応援だと思って お願いします。

トラックバックURL
この記事へのトラックバック
1. Blogカスタマイズ再び!(コメントの色を変える) - ゴチソウサマデシタ♪ [2005年02月20日 14:45]
2. コメントのカスタマイズ - 怪獣日記 [2005年02月25日 14:32]
4. 管理人のコメントに背景色を付ける - Natural Interior [2005年11月15日 10:01]
5. 自分のコメントを目立たせる - 菊姫's生態観察記録 [2006年01月25日 11:57]
6. カスタマイズ12〜管理人のコメントに色を付ける〜 - Addicted to the Movie and Reading! [2006年05月27日 20:15]
この記事へのコメント
1. Posted by ユヅキママ [2005年02月20日 01:46]
初めまして。勇気を出して書き込んでみました(笑)

昨日から挑戦しているのですがなかなかうまくいきません。

名前をカタカナで登録したのがいけなかったのか?
名前がIDと違うからなのか?

一度だけ成功したのですが
なぜか私ではなくてカキコしてくださった
ゲストの文字がcomments-body-adminのデザインに
変わってしまいました。
カウンターや他のJavaを入れているせいでしょうか?

ちなみにプラグイン(外部ファイルとして)で呼び出しています。

まだ試していないのですがIDとハンドルネームを違うものに変えるスクリプトも入れてみました。
まだ新規投稿していないので結果がわからないのですが…。
もし良かったらアドバイスをお願いします。
2. Posted by takoashi [2005年02月20日 02:33]
こんばんわ。
いま確認してみました。

申し訳ありません。
こちらの説明不足・・・というかダメダメです・・・

comments-body
comments-post
がここでは、通常のブログと違って順番が入れ替えてあるんですよ・・・
#忘れてた・・・


i++; // つぎのタグがcomments-bodyだから



var target = i-1;
divs[target].setAttribute("className",cn );
divs[target].setAttribute("class",cn );

なんてすると動くと思います。
すみません。これはテストしてないです・・・。
3. Posted by ユヅキママ [2005年02月20日 14:35]
こんにちわ。
直してやってみました!
大成功です!!
『comments-body が comments-post より前にある場合(通常)』でOKでした。

ただ Cookieに記憶をチェックしているのに
次のときには消えてしまうのですが…。
なぜでしょう??難しいです(>_<)

とにかく大成功!です。
これから自分のBlogのほうで報告します。
TBさせてくださいね。

ご丁寧にサポートありがとうございました。
4. Posted by takoashi [2005年02月21日 09:08]
こちらこそ。
問題点を洗い出すことができてよかったです。

> ただ Cookieに記憶をチェックしているのに
> 次のときには消えてしまうのですが…。
これは、このスクリプトとは関係ないですね。。
時間があったら調べてみますね〜〜
5. Posted by ユヅキママ [2005年02月25日 13:31]
たびたびスミマセン。
やはりCookieが消えてしまい
せっかくこのスクリプトを入れたのに
毎回入力の状態でした…。

調べてみたのですがFireFoxとネスケだと問題なく
きちんとコメントを変えたまま、Cookieも記憶されていたのですがIEだとダメみたいです。

他の方のコピー?になってしまうのですが
チョキチョキ日記さん
http://blog.livedoor.jp/modacyoki/archives/6797195.html
のところで紹介されていたのですが
私もカスタマイズ22をサイドバーからファイルを
読み込んでいたのですが 一度外してみたら
Cookieが復活してコメントの色も変わったままでした。
「何と何が共存できない」というのが私にはわからないので 素人判断で申し訳なく思います。

コメントの色を変えるスクリプトはホントに
欲しいものなので 今回はカスタマイズ22の投稿者の名前を変えるの方を外してみました。

失礼かと思いましたがご報告まで…。
6. Posted by takoashi [2005年02月25日 13:53]
報告ありがとうございます。
関連性がまったくわからないのでとりあえず放置です。
すみません。。。
7. Posted by takoashi [2005年02月25日 14:02]
これはテストです。
8. Posted by 青々 [2005年03月11日 16:32]
度々おじゃまさせていただいております。

この機能、とてもすばらしいです。
ぜひぜひ、私のblogでも・・・と思ってやってみたのですが、
ダメでした・・・。
「Posted by」のところと、時間表示のところを分けているからでしょうか・・・。
(ちなみに外部ファイルとして読み込む方法で試してみました。)

お時間ある時にでも、どうかアドバイスをお願いしたいと思います。
よろしくお願いいたします。
9. Posted by takoashi [2005年03月11日 16:53]
青々さんへ

うちもカスタマイズしてあり、青々さんもカスタマイズをしてますね・。・

すこ〜し、歩み寄りを・・・

comments-post 投稿者の名前
comments-body コメントの内容

というdivタグはそのままにしておいて、う・・・それでもまだいいっぱい修正しなきゃだめですね。そんなむずかしくはないんで気長に・・・。


動作としては、comments-post となってるdivタグを探して、それが指定された名前かどうかチェックしてるだけです。
そして、セットとなるcomments-body のスタイルを変更してるんです。

現状では、名前の特定がむずかしいです。
そのあたりをうまくするとよいんじゃないかと。。。

すみません。人様のことをあまり考えて作ってなかったです m(_ _)m
10. Posted by 青々 [2005年03月12日 12:10]
takoashiさん、ありがとうございます。

やっぱり勝手にカスタマイズが原因だったのですね(;´▽`A``
では元の形に近づけつつ、頑張ってみようと思います。

ありがとうございました(o_ _)o))
11. Posted by masashi [2005年03月13日 12:09]
いつも参考にさせていただいています。

ぜひ、この機能僕のBlogにも欲しいのですが
どこにコードを書き込めばいいのかわかりま
せん。

個別記事のHTMLテンプレートに書き込んで
試してみたりはしているんですがダメです。

CSSは最後の方に.comments-body-admin{省略}と
追加しています。

初歩的な質問ですみません

12. Posted by takoashi [2005年03月13日 23:35]
こんばんは、masashiさん。

> どこにコードを書き込めばいいのかわかりま
せん。
HTMLテンプレート編集で最後のほうに書いてください。

できない場合は、もっとくわしく説明をお願いしま〜す。

function comment_style_change(id,cn)〜〜
の記述はどこにも見当たらないのでもう一度全部見直してみてくださいね〜〜
13. Posted by masashi [2005年03月14日 08:08]
ダメでした…

とりあえずHTMLテンプレート編集の個別記事
の</body>の前に

<script type="text/javascript" language="javascript"></script>

を追加してその間にコードを書き込んでいます。

適用したいCSSは、デザインの設定からCUSTOM
を選んで、その最後の方に

.comments-body-admin{省略}

を追加しています。

よろしくお願いします。
14. Posted by takoashi [2005年03月14日 10:48]
masashi さんへ

すみません。このスクリプトはデフォルトのHTMLテンプレートを利用している方には、あまりよろしくないカスタマイズにカスタマイズになっているようです。

comments-postが Posted by から始まることが原因です。うちのブログでは、Posted by が削除されているので問題なく動いてますが、デフォルトを利用すると、その部分が問題になっていました。

いままで、このことにまったく気づいてませんでした。

ただ、名前にURLを設定すれば問題なく利用できます。

対処方法としては、

1.
Posted by を消す
問題点:デフォルトでは動かないということを決め付けてしまう。

2.
URLを必ず入力する
問題点:いままでのコメントが反映されない

3.
comment_style_change( "masashi", "comments-body-admin" );

comment_style_change( "Posted by masashi", "comments-body-admin" );
問題点:URLを入力するとダメ

4.
if( name.indexOf( id ) == 0 )

if( name.indexOf( id ) >= 0 )
問題点:部分一致で反映されるために、短い名前だといろいろ問題になるかも

5.
使わない・・・・
問題点:コメントのスタイルが変えられない


で、おすすめは「4」です。
問題のあるコードを載せてしまってすみません。


※このカスタマイズは、いずれなくなるかもしれません
15. Posted by masashi [2005年03月14日 18:06]
takoashiさん

成功しました!!

わざわざ調べていただき
ありがとうございました。

16. Posted by さまない [2005年03月26日 22:06]
takoashiさん、こんばんわ。

このカスタマイズを使わせて頂いています。個別記事HTMLテンプレートに追加して書いているのですが、自分のコメントについては出来たのですが、訪問者のコメントが変わらないのです。設置方法は自分のコメントを変える方法と同じように<script type="text/javascript" language="javascript"></script>
の中にコードを入れたら良いんですよね?

もし間違っていたらご教授願います。
17. Posted by takoashi [2005年03月28日 09:47]
さまない さんへ

コードを記述する位置はいいのですが、使い方があってません。
訪問者のスタイルを変更するといのは、特定の人を変更するということではありません。
名前、URLなどの記憶している情報で見ている人のコメントのスタイルを変更するということです。

特定の人のコメントを変更したいなら、管理者と同じような設定をすればよいです。

comment_style_change( "takoashi", "comments-body-admin" );
この記述をいっぱい書けばいいだけ。
名前は適当に、スタイルも適当に。
18. Posted by さまない [2005年03月28日 21:27]
こんばんわ。

根本的に捉え方を間違えていたようです。
コメント変更は無事出来ました。お手数をお掛けして申し訳ないです。

ありがとうございました!
19. Posted by モダチョキ [2005年05月10日 02:39]
いつもタメになる情報をありがとうございます!
今回はこちらの記事を参考にさせて頂きました。
5つの対処法方を記載して頂いて、とても助かりました。
(私のところは「4」で設定可能になりました!)
20. Posted by かんな [2005年05月19日 17:00]
自分の書いたコメントが直ぐにわかって便利ですね!
早速、カスタマイズさせていただきました。
他の訪問者も替えられるということなので
徐々に色々と変えていきたいと思います。
どうもありがとうございました!
21. Posted by まゆとーちゃん [2005年06月05日 01:17]
こんばんは(^^)
カスタマイズ参考にさせていただきました。
1つのブログを2人でやっていることもあり
それぞれのコメントがわかるようにしたかったので
非常に助かりました。
勝手にJavaScriptを一部変更して使わせていただいている
のですが問題ありませんか?
22. Posted by kamachi [2005年07月04日 13:14]
こんにちは。
私のブログ内コメントで質問があり、
私も日々奮闘しておりますので
こちらを紹介させていただきました。

“勇気を出して書き込んじゃいます”。
23. Posted by takoashi [2005年07月04日 13:48]
どうぞどうぞ。どんどん紹介してくださいませ。
24. Posted by なほ [2005年08月06日 17:10]
こんにちは☆
いつも参考にさせて頂いてます。

私の場合「comments-post」を変更したかったので、ソースの一部を削除してみました。
おかげさまで思い通りに表示されましたが、手を加えてもよろしいでしょうか?
事後報告でごめんなさい(;´∀`)
25. Posted by takoashi [2005年08月08日 16:35]
どうぞ。ご自由に改変してください。
コードを公表するならこのページへののリンクがあるとうれしいです。なくてもかませいませんけどね。
26. Posted by なほ [2005年08月08日 17:35]
ありがとうございます☆
リンクはもちろんさせて頂いてます♪

他にも色々参考にさせて頂いてます。
ありがとうございました☆
27. Posted by アルプ [2005年09月12日 21:45]
こんばんは!またまたすみません。
うちはコメント欄が見にくいので
わたしだけでなく、みんなのコメントを白枠で囲みたいのですがどうしたらいいでしょうか?

それかコメントの区切りに線を引くのでもいいです。
とにかく区切りが見にくいので。

サイドバーはおかげさまでできました!
どうもありがとうございました。
28. Posted by takoashi [2005年09月14日 13:10]
>>> アルプさんへ
スタイルシートを勉強してください。
border のスタイルを設定すればいろいろできます。

参考:http://www.tohoho-web.com/css/reference.htm#border
29. Posted by パン吉 [2005年09月27日 16:24]
こんにちは。
以前からコメント部分のカスタマイズをちょこちょこしてたんですが、ナゼかコメントの一部がcssのスタイルを一切無視するようになってしまいました。

↓こんなカンジ
http://blog.livedoor.jp/pankichi1979/archives/28933140.html#comments

cssも個別記事のHTMLも何度も見直したんですが、さっぱり自分では分からなくなってしまいました。(T-T)な〜ぜ〜だ〜
場違いなコメントかとは存じますが、もしよろしければご助言下さいますようお願い致します。
30. Posted by パン吉 [2005年09月27日 16:32]
解決しました!と言いたいトコロなんですが、ナゼかゲストの方のコメントに管理者のスタイルが適用され、管理者のスタイルは無視されています。
31. Posted by パン吉 [2005年09月27日 16:35]
何度もすみません!
.comments-body-admin{省略}をキチンと設定し、その後再構築をする事により解決致しました。
コメント汚し大変申し訳ございません。
削除して頂いて結構です。m(__;)m
32. Posted by りお [2006年05月27日 20:14]
何度も見直して、色々追加部分を見ている内に混乱してきまして他の方の記事も見てやっと出来ました!
ありがとうございました
33. Posted by takoashi [2007年12月21日 19:56]
おもしろいですね!
34. Posted by そらまめ [2009年09月14日 04:31]
初めまして。seesaaでブログをしています。
管理人のコメントの区別がしたくて、ここにたどり着きました。
カスタマイズは始めたばかりで、あまり詳しくはないのですが
頑張っています。

CSSの方はcomments-bodyの下に入れられたのですが
他のやり方が書いてあるサイトも見たのですが、
どちらとも、書いてあるHTMLの記述と
私の使っているテンプレートのHTMLの記述が違うので
どこに入れたらいいのか困ってしまいました。

いまのテンプレートが気に入っているので
出来れば変えずになんとか出来ればと思っています。
もしわかりましたら、お助け頂きたいと思うのですが、
かなり前の記事ですよね。今更ですみませんm(_ _)m

HTMLをこちらに書いたほうがいいのでしょうか?

どうぞよろしくお願いします。
35. Posted by takoashi [2009年09月14日 15:09]
さらまめ さんへ

seesaaブログはライブドア系でしょうか?
そうでないならそのままの利用はできません。
たぶんちがうのではないかと。

基本的には同じような考え方で対応は可能だと思います。
36. Posted by そらまめ [2009年09月15日 01:17]
お返事ありがとうございます。
ライブドア系というのは
テンプレートの事でしょうか。

もしそうでしたら
たぶん普通にseesaaのテンプレートから
拾ってきたのでライブドア系ではないと思います。
だから記述が違うんですね。(^_^;)

もう少し色々調べて
頑張ってみます。

ありがとうございました。m(_ _)m
37. Posted by takoashi [2009年09月15日 21:53]
そらまめさんへ

ブログは基本的に、サービスごとにカスタマイズの方法が異なります。
そのため、JavaScriptのカスタマイズは特に汎用性がありません。

ライブドアブログ系というのは、ライブドアのブログのシステムをアライアンス?という感じで貸して運営されているブログのことを指してしました。
dionのラブログがライブドアと同じシステムで動いていたと思います。

seasaaも、いろいろカスタマイズされている方がいらっしゃるのでそちらを参考にしてください。
38. Posted by swiss watches [2012年08月21日 01:48]
って言えばいいじゃまいか
39. Posted by Paris escort service4 [2013年04月20日 05:26]
Hi I see what you’ve done here, and I love it! One of the finest posts online, keep it up!
40. Posted by Triple Shaft Mixer [2013年08月24日 15:11]
韓国は汚いロビー活動をやらせたら世界一だな
この記事にコメントする
名前:
URL:
  情報を記憶: 評価: 顔