Movable Type 備忘録
コメント欄にアバター表示
- Prev Page: ログイン画面カスタマイズ
- Next Page: Templets プラグイン
おはよございます^^
早起きしちゃったので、ちょとアバター作って遊んでました (●´∀`●)
以下はわたしの『Team.Nekomimi』です。猫みみ忍者軍団女子十二忍坊( 友人にケチつけられたのでチーム名変更 )です (>∀< )
メンバー募集( 作成 )中です。てか、わたしも暇人だねぇ (; ̄∇ ̄A

今回はこのアバターをコメント欄に表示するようカスタマイズしてみました。
アバター作成
アバターは以下のサイトで作ることができます。
- 似顔絵アバターメーカー
- ちょこゆに
- Baby Dress Up
- Candybar Doll Maker 3
- プーペガール
- メイプルストーリーアバターメーカー
- ガイアオンラインアバターメーカー
- WhuddleWorldアバターメーカー
- livedoor アバター
- Ragnarok Maker
- South Park Studio version2
- Paper Doll Madonna
- avatars
- 萌える!アバターメーカー
- Portrait Maker
- ハリーポッターアバターメーカー こんなのもあるんだぁ。知らなかった。
カスタマイズ
以下の手順でコメント欄に任意のアバターを表示させます。
アバターを用意する
上記アバターの作成でお好みのアバターを作成します。
コメント欄を変更する
わたしのサイトのコメント欄を抜粋して以下にコードを記します。
アバター表示 1
<mt:SetVar name="userpic_size" value="80"><mt:SetVar name="avator[0]" value="/●●●/avator00.png"><mt:SetVar name="avator[1]" value="/●●●/avator01.png"><mt:SetVar name="avator[2]" value="/●●●/avator02.png"><mt:SetVar name="avator[3]" value="/●●●/avator03.png"><mt:SetVar name="avator[4]" value="/●●●/avator04.png"><mt:SetVarBlock name="avators"><mt:GetVar name="avator" function="count"></mt:SetVarBlock><MTComments><mt:SetVarBlock name="userpic"><$MTCommentDate format="%S" setvar="userpic"$><mt:GetVar name="userpic" value="$avators" op="%"></mt:SetVarBlock><dl id="comment-<$MTCommentID$>" class="comments_content"><dt class="comments_header"></dt><dd class="user-pic"><img src="<mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$><mt:Else><$mt:GetVar name="avator[$userpic]"$></mt:If>" width="<$mt:GetVar name="userpic_size"$>" height="<$mt:GetVar name="userpic_size"$>" alt="user-pic" /></dd><dd><$MTCommentBody$></dd></dl></MTComments>
青字の部分にはアバターの縦横イメージサイズを指定します。
赤字の部分にはアバターファイルのパス( or URL )を格納する配列になります。avator[0] から順に記述します。
緑字の部分では、コメント投稿された日時( 秒 )を取得して配列のインデックス番号を取得してます。
そして黄色字の部分で配列( avator )からインデックス( user_pic )に該当するアバターファイルを表示します。ブログ記事アーカイブを再構築する
最後にブログ記事アーカイブのみ再構築します。 再構築が完了したら正しくアバターが表示されるか確認してください。
上記例では配列を使用してますが、以下のコードでも OK です。
アバター表示 2
<mt:SetVar name="userpic_size" value="80"><MTComments><mt:SetVarBlock name="userpic"><$MTCommentDate format="%S" setvar="userpic"$><mt:GetVar name="userpic" value="5" op="%"></mt:SetVarBlock><dl id="comment-<$MTCommentID$>" class="comments_content"><dt class="comments_header"></dt><dd class="user-pic"><img src="<mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$><mt:Else><$mt:GetVar name="userpic" sprintf="/●●●/avator%02d.png"$></mt:If>" width="<$mt:GetVar name="userpic_size"$>" height="<$mt:GetVar name="userpic_size"$>" alt="user-pic" /></dd><dd><MTConvertIconMacro><$MTCommentBody$></dd></dl></MTComments>
アバター表示 1 の赤字の部分がなくなってます。
また、緑字の部分でアバターファイルの個数を指定します。そして、黄色字の部分では /●●●/avator▲▲.png というフォーマットの固定ファイル名称に変更されました。
要するに avator01.png、avator02.png・・・avator05.png というように、予めファイル名を決めておく方法がアバター表示 2 になります。
アバター表示 1 の方はファイル名が統一されてないくても問題ありませんが、配列を理解してアバターファイルの追加を行う必要があります。
アバター表示 2 の方はファイル名を統一しておく必要があるのと、ファイル数を指定する必要があります。
以上です。
サンプルは、わたしのサイトのエントリページのコメント欄を参考にしてください。
Trackback Pings(1)
- from
まったり(。・・。)
mixiアプリのサンシャイン牧場にハマッテいるKeiです 何が楽しいの?とか言われると答えようが。。。 mixiやってる方は、一緒にしませんか(マイミク必...




こんにちは~
なんだか楽しそうですね
私も少し設置してみます!(時間かかりそうだけどOrz
話かわってiPhoneのエントリに書くべきなのでしょうが。。。こちらへ
な事になってました
旦那がiPhoneを使用してまして、私のブログもテンプレートを設置してみました
それで確認していて、bzbellさんのhttp://bizcaz.com/archives/i/ をiPhoneから見てみたのですが
インデックスはアクセスできましたが
個別記事ページがページがありません
PCでも見てみたら「ご指定のアドレスのページは見つかりませんでした。」となってます
以上ご報告でした
>>1 Kei さん
こんにちわ^^
Kei さんとこのテンプレートではアバター表示が既に組み込まれてるので、比較的カンタンに設置可能ですよ
気が向いたら TRY してみてください
> ・・・PCでも見てみたら「ご指定のアドレスのページは見つかりませんでした。」となってます
あちゃぁ
個別記事ページの拡張子が .php になってました

どうやら iPhone では拡張子が .html じゃなきゃダメみたいですね。なるほど
ありがとうございます
>>2 bzbell さん
>どうやら iPhone では拡張子が .html じゃなきゃダメみたいですね。
いえいえphpでできましたYO
index,mtmlとindividual.mtml両方の
1行目のXML宣言をPHP化した物に変更と
中頃にある <$MTBlogArchiveURL$>i/ ~中略~ <$MTEntryBasename$>.html" ~後略 の
.html (各2箇所)を .php に変更しまして
i/index.html の保存を i/index.php で 後は書かれてるままでいけました~^^
間違ってるかもしれませんが
>>2 bzbell さん
て、忘れてた、、このアイコンでの質問
管理人に専用のアイコンで表示には難しいですかね・・・?
以前の記事で管理人のコメント背景色をCSSで設定できていたような、あんな感じでアイコンも・・・
>>3 Kei さん
> いえいえphpでできましたYO
えっ!? ホントですか!?
わたしもやってみます
今ね、iPhone 用のテンプレートセット作ってるんです。
厳密にはテンプレートセットじゃなくって、テンプレットというものです。
http://as-is.net/blog/archives/001353.html
Templets プラグインというものを入れると、既存のテンプレートセットに依存せず追加することができます。
超ーーー便利だから試してみて
>>4 Kei さん
> 管理人に専用のアイコンで表示には難しいですかね・・・?
> 以前の記事で管理人のコメント背景色をCSSで設定できていたような、あんな感じでアイコンも・・・
それはですね、「コメント」テンプレートモジュールの 8 行目を以下のように変更してください。
で、スタイルシートは以下のようになります。
dl.Kei { color: #00f; background-color: #fff; }管理人に専用のアイコンてのは、Kei さんがコメント投稿した時にアイコン表示…という理解でよいですか
それなら、MT のユーザプロフィール編集画面から Kei さんのプロフィール画像を設定してブログ記事アーカイブのみ再構築すれば管理人( Kei さん )のアイコンが表示されるようになります
>>6 bzbell さん
ギブアップ
管理人(Kei)がコメントした場合は、アイコン表示になったのですが
プロフィールの画像を設定のみで表示されました
他の方のが表示になりません><
赤文字、緑文字、黄色文字の部分で自分のテンプレートでどこに入れれば良いのか・・・
色々タグを挿入する場所を変えてみたりしたのですが
ブログ個別記事ページのソースを見ると
<dd class="user-pic"><img src="" width="80" height="80" alt="user-pic" /></dd>
アイコンのURLが入ってない状態です
>>7 Kei さん
以下の「コメント」テンプレートモジュールと差し替えてください。
http://bizcaz.com/archives/shoco/themes/comments_for_kei.zip
Kei さん専用の「コメント」テンプレートモジュールになります。
今後、Kei さんが訪問者さんようのアバターを用意された場合には、11 ~ 13 行目を随時追加してください。
たとえば、/mt/mt-static/support/avator/avator01.png と avator02.png を追加したい場合には以下のように変更します。
上記 avator[0]、avator[1] というところを追加のたびに avator[2]・・・avator[9] というかんじで変更することを忘れずに
Kei さん用「コメント」テンプレートモジュールにミスがありました。
32 行目の </mt:Else> を <mt:Else> に変更してください。
>>9 bzbell さん
ありがとうございます><
無事表示されました
忍者ではないですが・・黒猫耳にしてみました(アイコン
先日はMTCumulusの件でお世話になりましたm( __ __ )m
テンプレートもかなり気に入っております
たぶんKeiさんと同じ道をたどっていると思うのですが、
私も今回アバターの設置で、上記>>7のKeiさんと同じ状態です(;・∀・)
色々と試してみましたが、結果はorz
毎度申し訳ございませんがご指導お願いします( TДT)
>>11 waiwai さん
こんばんわ^^
以下の「コメント」テンプレートモジュールをお使いください。
http://bizcaz.com/archives/shoco/themes/comments_avator.zip
一応ウチで使ってるものと同じものです。
デザインはお好みで変更してください。
お陰様で表示する事ができました
毎度ありがとうございますm( __ __ )m
もっと勉強します
いつもお世話になってます。うにです。
着々と公開への道を進んでます^^
今回コメント欄にアバター表示を実装しようと思ったんですが、こちらの記事のプラグインはMT5.01でも使用可能なんでしょうか?
最終コメントが去年の4/9ということで、たしかまだ4.29?(MT5ではない)ですよね?
とりあえず管理者画像はプロフィールから設定するだけだったので問題なかったんですが、他の人の画像を表示させるには・・・
既にbzbellさんのサイトでは実装済みみたいですが、一応確認させてください。
宜しくお願いいたします。
>>14 うに さん
こんばんわ^^
大丈夫ですよ。
上記テンプレートの内容を見ると、PandoraBox というタグがあるか否かのチェック( mt:IfNonEmpty )を行ってるかと思いますが、そのチェックを削除して頂いて うに さん好みのアバターの URL に差し替えて頂ければそのまま使えるかと思いますといいますか、お渡ししたテンプレートセットでは既にわたしのサイト用に実装済みです。「コメント」、「コメントプレビュー」の各テンプレート内に記述されてます。
基本的にわたしが使ってるテンプレートセットをそのままお渡ししてますので、ウチで表示されてる機能はほぼ うに さんも使えます。
>>15 bzbell さん
早速の返信ありがとうございます^^
>上記テンプレートの内容を見ると、PandoraBox というタグがあるか否かのチェック( mt:IfNonEmpty )を行ってるかと思いますが、そのチェックを削除
これはつまり、<mt:IfNonEmpty tag="PandoraBox">このタグを削除するっていうことですよね?
タグの囲いを外して(削除して)再構築してみましたが、何も変化ありません。
(まだURL部分は変更していないですが、画像がなければそれなりの変化が見込めると思っので・・・)
画像URLはmt/mt-static/images/になるんでしょうか?
もうひとつ、質問ばかりで申し訳ないのですが(質問というかお願い?)現状の管理者画像はコメントする際に名前欄には特に何も入力せずに書けば管理者扱いになり画像が特定のものになるんですが、今後携帯版、iPhone版も導入する予定で、そちらからコメントを書く際はやはり管理者アバターは使えないのでは・・・と思いまして。
無理なら無理で諦めますのでこちらはかまいません。
>>16 うに さん
この記事で説明されてる内容を理解されてるものかと思って詳しい説明は省いたのですが
すいません。
では、さきほどの修正は完了した…ということで、今度はアバターを表示する部分を修正します。
「コメント詳細」モジュールは、投稿されたコメントを表示するテンプレートになります。
さきほどと同様に PandoraBox を検索すると 3 箇所見つかるのですが、1 番目と 3 番目を先ほどと同様に削除します。
ですが、ミスる可能性があるので以下のコードをお使いください。
<$mt:SetVar name="userpic_size" value="100"$> <mt:SetVarBlock name="userpic"><$mt:CommentDate format="%S" setvar="userpic"$><$mt:GetVar name="userpic" value="$avators" op="%"$></mt:SetVarBlock> <$mt:CommentAuthor setvar="author"$> <mt:IfNonEmpty tag="PandoraBox"> <dl id="comment-<$MTCommentID$>" class="comments_content<mt:If name="author" eq="bzbell"> bzbell</mt:If><mt:IfCommentParent> comment-reply</mt:IfCommentParent>"> <mt:Else> <dl id="comment-<$mt:CommentID$>" class="comments_content<mt:IfCommentParent> comment-reply</mt:IfCommentParent>"> </mt:IfNonEmpty> <dt class="comments_header"> <span id="reply<$mt:CommentOrderNumber$>">#<$mt:CommentOrderNumber$>: Posted by <$mt:CommentAuthorIdentity$> <mt:IfCommentParent> <span class="vcard author"><$mt:CommentAuthorLink$></span>から<a href="#comment-<mt:CommentParent><$mt:CommentID$></mt:CommentParent>"><mt:CommentParent><$mt:CommentAuthor$></mt:CommentParent></a>への返信 <mt:Else> <$mt:CommentAuthorLink default_name="Anonymous" spam_protect="1" show_email="0"$> </mt:IfCommentParent> @ <$mt:CommentDate language="en" format="%B %e, %Y"$> <a class="comments_reply" href="javascript:void(0)" onkeypress="javascript:void(0);" onclick="j$('#comment-text').CommentReply({parent_id:<$mt:CommentID$>, order_no:<$mt:CommentOrderNumber$>, author:'<$mt:CommentAuthor default_name="Anonymous"$>'})" title="返信する">[REPLY]</a></span> </dt> <dd class="user-pic"><img src="<mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$><mt:Else><$mt:GetVar name="avator[$userpic]"$></mt:If>" width="<$mt:GetVar name="userpic_size"$>" height="<$mt:GetVar name="userpic_size"$>" alt="user-pic" /></dd> <dt class="comments_footer"> </dt> </dl>以上です。
>>17 bzbell さん
なぜでしょう・・・
bzbellさんに教えてもらったコードでそのままコメント詳細モジュールを書き換えたところ、コメントの内容がなくなってしまいました(管理画面からみると存在します)
そしてテンプレートを初期化して、1番目と3番目を削除してみたところ、今度はコメントが2重に表示されてしまい。。。
(しかもアバター画像が片方デフォルトのものに?)
今は提示いただいたコードにしたのでコメント内容が空です。
すいません、何か間違っていたのでしょうか・・・
>>18 うに さん
やっつけで対応したのでコメント表示させるコードもいっしょに削除してました。すいません。
以下のコードをお使いください。
<$mt:SetVar name="userpic_size" value="100"$> <mt:SetVarBlock name="userpic"><$mt:CommentDate format="%S" setvar="userpic"$><$mt:GetVar name="userpic" value="$avators" op="%"$></mt:SetVarBlock> <$mt:CommentAuthor setvar="author"$> <mt:IfNonEmpty tag="PandoraBox"> <dl id="comment-<$MTCommentID$>" class="comments_content<mt:If name="author" eq="bzbell"> bzbell</mt:If><mt:IfCommentParent> comment-reply</mt:IfCommentParent>"> <mt:Else> <dl id="comment-<$mt:CommentID$>" class="comments_content<mt:IfCommentParent> comment-reply</mt:IfCommentParent>"> </mt:IfNonEmpty> <dt class="comments_header"> <span id="reply<$mt:CommentOrderNumber$>">#<$mt:CommentOrderNumber$>: Posted by <$mt:CommentAuthorIdentity$> <mt:IfCommentParent> <span class="vcard author"><$mt:CommentAuthorLink$></span>から<a href="#comment-<mt:CommentParent><$mt:CommentID$></mt:CommentParent>"><mt:CommentParent><$mt:CommentAuthor$></mt:CommentParent></a>への返信 <mt:Else> <$mt:CommentAuthorLink default_name="Anonymous" spam_protect="1" show_email="0"$> </mt:IfCommentParent> @ <$mt:CommentDate language="en" format="%B %e, %Y"$> <a class="comments_reply" href="javascript:void(0)" onkeypress="javascript:void(0);" onclick="j$('#comment-text').CommentReply({parent_id:<$mt:CommentID$>, order_no:<$mt:CommentOrderNumber$>, author:'<$mt:CommentAuthor default_name="Anonymous"$>'})" title="返信する">[REPLY]</a></span> </dt> <dd class="user-pic"><img src="<mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$><mt:Else><$mt:GetVar name="avator[$userpic]"$></mt:If>" width="<$mt:GetVar name="userpic_size"$>" height="<$mt:GetVar name="userpic_size"$>" alt="user-pic" /></dd> <dd class="user-txt"><$mt:CommentBody link_number="1"$></dd> <dt class="comments_footer"> </dt> </dl>念のためオリジナルのコードとの差分を取って変更点を確認して頂けますか
>>16 うに さん
ご質問の件ですが、ログインしてコメントしない限り管理者のアバターは使えません。
ですが、あるキーワードにマッチしたユーザ名の場合には…という条件で表示させれば管理者のアバターを表示させることができます。
例えば、bzbell というユーザ名の場合には固定のアバターを表示…といった具合になります。
ただし、難点がありまして同名の HN の場合には識別することはできませんので、当然管理者アバターが表示されることになります。
ご参考まで
>>19 bzbell さん
ありがとうございます。
>念のためオリジナルのコードとの差分を取って変更点を確認して頂けますか ↑↑↑この部分が不足していたようです。無事正常表示できました^^
>>20 bzbell さん
これは、コメント詳細モジュールの以下の部分を自分のHNにすれば可能でしょうか? >ただし、難点がありまして同名の HN の場合には識別することはできませんので、当然管理者アバターが表示されることになります。>あるキーワードにマッチしたユーザ名の場合には…という条件で表示させれば管理者のアバターを表示させることができます。
>例えば、bzbell というユーザ名の場合には固定のアバターを表示…といった具合になります。
他の誰かが自分を名乗らない限りは問題ないってことですよね^^
>>21 うに さん
こんばんわ^^
返事が遅くなりすいません。
ご質問の件ですが、うに さんが言われてる箇所は違います。
既存のテンプレート中にはそのような条件式はありませんので、ご自身で追加して頂く必要があります。
> 他の誰かが自分を名乗らない限りは問題ないってことですよね^^
はい。そのとおりですね。
>>22 bzbell さん
> ご自身で追加して頂く必要があります。
なるほど・・・
まぁ気長に探していきます。
ありがとうございました~^^