Movable Type 備忘録

 コメント欄にアバター表示

おはよございます^^

早起きしちゃったので、ちょとアバター作って遊んでました (●´∀`●)
以下はわたしの『Team.Nekomimi』です。猫みみ忍者軍団女子十二忍坊( 友人にケチつけられたのでチーム名変更 )です (>∀< )
メンバー募集( 作成 )中です。てか、わたしも暇人だねぇ (; ̄∇ ̄A

猫ミミ忍者00 猫ミミ忍者01 猫ミミ忍者02 猫ミミ忍者03 猫ミミ忍者04 猫ミミ忍者05 猫ミミ忍者06 猫ミミ忍者07 猫ミミ忍者08 猫ミミ忍者09 猫ミミ忍者10 猫ミミ忍者11

今回はこのアバターをコメント欄に表示するようカスタマイズしてみました。

アバター作成

アバターは以下のサイトで作ることができます。

カスタマイズ

以下の手順でコメント欄に任意のアバターを表示させます。

  1. アバターを用意する

    上記アバターの作成でお好みのアバターを作成します。

  2. コメント欄を変更する

    わたしのサイトのコメント欄を抜粋して以下にコードを記します。

    アバター表示 1

    1. <mt:SetVar name="userpic_size" value="80">
    2. <mt:SetVar name="avator[0]" value="/●●●/avator00.png">
    3. <mt:SetVar name="avator[1]" value="/●●●/avator01.png">
    4. <mt:SetVar name="avator[2]" value="/●●●/avator02.png">
    5. <mt:SetVar name="avator[3]" value="/●●●/avator03.png">
    6. <mt:SetVar name="avator[4]" value="/●●●/avator04.png">
    7. <mt:SetVarBlock name="avators"><mt:GetVar name="avator" function="count"></mt:SetVarBlock>
    8.  
    9. <MTComments>
    10.     <mt:SetVarBlock name="userpic">
    11.         <$MTCommentDate format="%S" setvar="userpic"$>
    12.         <mt:GetVar name="userpic" value="$avators" op="%">
    13.     </mt:SetVarBlock>
    14.  
    15.     <dl id="comment-<$MTCommentID$>" class="comments_content">
    16.     <dt class="comments_header"></dt>
    17.     <dd class="user-pic"><img src="
    18.         <mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$>
    19.         <mt:Else><$mt:GetVar name="avator[$userpic]"$>
    20.         </mt:If>" width="<$mt:GetVar name="userpic_size"$>" height="<$mt:GetVar name="userpic_size"$>" alt="user-pic" /></dd>
    21.     <dd><$MTCommentBody$></dd>
    22.     </dl>
    23. </MTComments>

    青字の部分にはアバターの縦横イメージサイズを指定します。
    赤字の部分にはアバターファイルのパス( or URL )を格納する配列になります。avator[0] から順に記述します。
    緑字の部分では、コメント投稿された日時( 秒 )を取得して配列のインデックス番号を取得してます。
    そして黄色字の部分で配列( avator )からインデックス( user_pic )に該当するアバターファイルを表示します。

  3. ブログ記事アーカイブを再構築する

    最後にブログ記事アーカイブのみ再構築します。 再構築が完了したら正しくアバターが表示されるか確認してください。

上記例では配列を使用してますが、以下のコードでも OK です。

アバター表示 2

  1. <mt:SetVar name="userpic_size" value="80">
  2. <MTComments>
  3.     <mt:SetVarBlock name="userpic">
  4.         <$MTCommentDate format="%S" setvar="userpic"$>
  5.         <mt:GetVar name="userpic" value="5" op="%">
  6.     </mt:SetVarBlock>
  7.  
  8.     <dl id="comment-<$MTCommentID$>" class="comments_content">
  9.     <dt class="comments_header"></dt>
  10.     <dd class="user-pic"><img src="
  11.         <mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$>
  12.         <mt:Else><$mt:GetVar name="userpic" sprintf="/●●●/avator%02d.png"$>
  13.         </mt:If>" width="<$mt:GetVar name="userpic_size"$>" height="<$mt:GetVar name="userpic_size"$>" alt="user-pic" /></dd>
  14.     <dd><MTConvertIconMacro><$MTCommentBody$></dd>
  15.     </dl>
  16. </MTComments>

アバター表示 1 の赤字の部分がなくなってます。
また、緑字の部分でアバターファイルの個数を指定します。そして、黄色字の部分では /●●●/avator▲▲.png というフォーマットの固定ファイル名称に変更されました。
要するに avator01.png、avator02.png・・・avator05.png というように、予めファイル名を決めておく方法がアバター表示 2 になります。

アバター表示 1 の方はファイル名が統一されてないくても問題ありませんが、配列を理解してアバターファイルの追加を行う必要があります。
アバター表示 2 の方はファイル名を統一しておく必要があるのと、ファイル数を指定する必要があります。

以上です。
サンプルは、わたしのサイトのエントリページのコメント欄を参考にしてください。

 Trackback Pings(1)

from まったり(。・・。)

mixiアプリのサンシャイン牧場にハマッテいるKeiです 何が楽しいの?とか言われると答えようが。。。 mixiやってる方は、一緒にしませんか(マイミク必...

 Comments(23)

#1: Posted by Author Profile Page Kei @ August 17, 2008 [REPLY]
user-pic

こんにちは~
なんだか楽しそうですねサングラス
私も少し設置してみます!(時間かかりそうだけどOrz

話かわってiPhoneのエントリに書くべきなのでしょうが。。。こちらへあせあせ
旦那がiPhoneを使用してまして、私のブログもテンプレートを設置してみました
それで確認していて、bzbellさんのhttp://bizcaz.com/archives/i/ をiPhoneから見てみたのですが
インデックスはアクセスできましたが
個別記事ページがページがありませんはて?な事になってました
PCでも見てみたら「ご指定のアドレスのページは見つかりませんでした。」となってます
以上ご報告でしたブイブイ

#2: Posted by Author Profile Page bzbellからKeiへの返信 @ August 17, 2008 [REPLY]
user-pic

>>1 Kei さん

こんにちわ^^

Kei さんとこのテンプレートではアバター表示が既に組み込まれてるので、比較的カンタンに設置可能ですようぅ~ん
気が向いたら TRY してみてくださいうぅ~ん

> ・・・PCでも見てみたら「ご指定のアドレスのページは見つかりませんでした。」となってます

あちゃぁキャハハ個別記事ページの拡張子が .php になってましたあせあせ
どうやら iPhone では拡張子が .html じゃなきゃダメみたいですね。なるほどガーン
ありがとうございますもじもじ

#3: Posted by Author Profile Page Keiからbzbellへの返信 @ August 17, 2008 [REPLY]
user-pic

>>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 で 後は書かれてるままでいけました~^^
間違ってるかもしれませんがあせあせ

#4: Posted by Author Profile Page Keiからbzbellへの返信 @ August 17, 2008 [REPLY]
user-pic

>>2 bzbell さん
て、忘れてた、、このアイコンでの質問あせあせ
管理人に専用のアイコンで表示には難しいですかね・・・?
以前の記事で管理人のコメント背景色をCSSで設定できていたような、あんな感じでアイコンも・・・

#5: Posted by Author Profile Page bzbellからKeiへの返信 @ August 17, 2008 [REPLY]
user-pic

>>3 Kei さん

> いえいえphpでできましたYO

えっ!? ホントですか!?
わたしもやってみますキャハハ

今ね、iPhone 用のテンプレートセット作ってるんです。
厳密にはテンプレートセットじゃなくって、テンプレットというものです。
http://as-is.net/blog/archives/001353.html

Templets プラグインというものを入れると、既存のテンプレートセットに依存せず追加することができます。
超ーーー便利だから試してみてうぅ~ん

#6: Posted by Author Profile Page bzbellからKeiへの返信 @ August 17, 2008 [REPLY]
user-pic

>>4 Kei さん

> 管理人に専用のアイコンで表示には難しいですかね・・・?
> 以前の記事で管理人のコメント背景色をCSSで設定できていたような、あんな感じでアイコンも・・・

それはですね、「コメント」テンプレートモジュールの 8 行目を以下のように変更してください。

<dl id="comment-<$MTCommentID$>" class="comments_content<mt:If name="author" eq="Kei"> Kei</mt:If><mt:IfCommentParent> comment-reply</mt:IfCommentParent>">

で、スタイルシートは以下のようになります。

dl.Kei { color: #00f; background-color: #fff; }

管理人に専用のアイコンてのは、Kei さんがコメント投稿した時にアイコン表示…という理解でよいですかキャハハ
それなら、MT のユーザプロフィール編集画面から Kei さんのプロフィール画像を設定してブログ記事アーカイブのみ再構築すれば管理人( Kei さん )のアイコンが表示されるようになりますうぅ~ん

#7: Posted by Author Profile Page Keiからbzbellへの返信 @ August 17, 2008 [REPLY]
user-pic

>>6 bzbell さん
ギブアップんっ!?
管理人(Kei)がコメントした場合は、アイコン表示になったのですが
プロフィールの画像を設定のみで表示されました
他の方のが表示になりません><
赤文字、緑文字、黄色文字の部分で自分のテンプレートでどこに入れれば良いのか・・・
色々タグを挿入する場所を変えてみたりしたのですが
ブログ個別記事ページのソースを見ると
<dd class="user-pic"><img src="" width="80" height="80" alt="user-pic" /></dd>
アイコンのURLが入ってない状態です

#8: Posted by Author Profile Page bzbellからKeiへの返信 @ August 17, 2008 [REPLY]
user-pic

>>7 Kei さん

以下の「コメント」テンプレートモジュールと差し替えてください。
http://bizcaz.com/archives/shoco/themes/comments_for_kei.zip
Kei さん専用の「コメント」テンプレートモジュールになります。
今後、Kei さんが訪問者さんようのアバターを用意された場合には、11 ~ 13 行目を随時追加してください。

<mt:Ignore>▼訪問者用アバターイメージを指定します▼</mt:Ignore>
<mt:SetVarBlock name="avator[0]" value=""><$mt:StaticWebPath$>images/default-userpic-90.jpg</mt:SetVarBlock>
<mt:Ignore>▲訪問者用アバターイメージを指定します▲</mt:Ignore>

たとえば、/mt/mt-static/support/avator/avator01.png と avator02.png を追加したい場合には以下のように変更します。

<mt:Ignore>▼訪問者用アバターイメージを指定します▼</mt:Ignore>
<mt:SetVarBlock name="avator[0]" value=""><$mt:StaticWebPath$>support/avator/avator01.png</mt:SetVarBlock>
<mt:SetVarBlock name="avator[1]" value=""><$mt:StaticWebPath$>support/avator/avator02.png</mt:SetVarBlock>
<mt:Ignore>▲訪問者用アバターイメージを指定します▲</mt:Ignore>

上記 avator[0]、avator[1] というところを追加のたびに avator[2]・・・avator[9] というかんじで変更することを忘れずにうぅ~ん

#9: Posted by Author Profile Page bzbell @ August 17, 2008 [REPLY]
user-pic

Kei さん用「コメント」テンプレートモジュールにミスがありました。

32 行目の </mt:Else> を <mt:Else> に変更してください。

#10: Posted by Author Profile Page Keiからbzbellへの返信 @ August 17, 2008 [REPLY]
user-pic

>>9 bzbell さん
ありがとうございます><
無事表示されましたうぅ~ん
忍者ではないですが・・黒猫耳にしてみました(アイコン

#11: Posted by waiwai @ April 7, 2009 [REPLY]
user-pic

先日はMTCumulusの件でお世話になりましたm( __ __ )m

テンプレートもかなり気に入っておりますにこっ!

たぶんKeiさんと同じ道をたどっていると思うのですが、
私も今回アバターの設置で、上記>>7のKeiさんと同じ状態です(;・∀・)

色々と試してみましたが、結果はorz

毎度申し訳ございませんがご指導お願いします( TДT)

#12: Posted by Author Profile Page bzbellからwaiwaiへの返信 @ April 7, 2009 [REPLY]
user-pic

>>11 waiwai さん

こんばんわ^^

以下の「コメント」テンプレートモジュールをお使いください。
http://bizcaz.com/archives/shoco/themes/comments_avator.zip

一応ウチで使ってるものと同じものです。
デザインはお好みで変更してください。

#13: Posted by waiwai @ April 7, 2009 [REPLY]
user-pic

お陰様で表示する事ができましたあせあせ

毎度ありがとうございますm( __ __ )m

もっと勉強しますあせあせ

#14: Posted by うに @ March 20, 2010 [REPLY]
user-pic

いつもお世話になってます。うにです。

着々と公開への道を進んでます^^

今回コメント欄にアバター表示を実装しようと思ったんですが、こちらの記事のプラグインはMT5.01でも使用可能なんでしょうか?
最終コメントが去年の4/9ということで、たしかまだ4.29?(MT5ではない)ですよね?

とりあえず管理者画像はプロフィールから設定するだけだったので問題なかったんですが、他の人の画像を表示させるには・・・
既にbzbellさんのサイトでは実装済みみたいですが、一応確認させてください。

宜しくお願いいたします。

#15: Posted by Author Profile Page bzbellからうにへの返信 @ March 20, 2010 [REPLY]
user-pic

>>14 うに さん

こんばんわ^^

大丈夫ですよ。
といいますか、お渡ししたテンプレートセットでは既にわたしのサイト用に実装済みです。「コメント」、「コメントプレビュー」の各テンプレート内に記述されてます。

上記テンプレートの内容を見ると、PandoraBox というタグがあるか否かのチェック( mt:IfNonEmpty )を行ってるかと思いますが、そのチェックを削除して頂いて うに さん好みのアバターの URL に差し替えて頂ければそのまま使えるかと思いますやあ! ただし、アバターサイズは 100x100 になってます。 サイズを変更したい場合には以下の行の 100 を 80 などのように変更してください。
<$mt:SetVar name="userpic_size" value="100"$>

基本的にわたしが使ってるテンプレートセットをそのままお渡ししてますので、ウチで表示されてる機能はほぼ うに さんも使えます。

#16: Posted by うにからbzbellへの返信 @ March 20, 2010 [REPLY]
user-pic

>>15 bzbell さん

早速の返信ありがとうございます^^

>上記テンプレートの内容を見ると、PandoraBox というタグがあるか否かのチェック( mt:IfNonEmpty )を行ってるかと思いますが、そのチェックを削除

これはつまり、<mt:IfNonEmpty tag="PandoraBox">このタグを削除するっていうことですよね?
タグの囲いを外して(削除して)再構築してみましたが、何も変化ありません。
(まだURL部分は変更していないですが、画像がなければそれなりの変化が見込めると思っので・・・)
画像URLはmt/mt-static/images/になるんでしょうか?

もうひとつ、質問ばかりで申し訳ないのですが(質問というかお願い?)現状の管理者画像はコメントする際に名前欄には特に何も入力せずに書けば管理者扱いになり画像が特定のものになるんですが、今後携帯版、iPhone版も導入する予定で、そちらからコメントを書く際はやはり管理者アバターは使えないのでは・・・と思いまして。
無理なら無理で諦めますのでこちらはかまいません。

#17: Posted by Author Profile Page bzbell @ March 20, 2010 [REPLY]
user-pic

>>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">&nbsp;</dt>
</dl>

以上です。

#18: Posted by うにからbzbellへの返信 @ March 21, 2010 [REPLY]
user-pic

>>17 bzbell さん

なぜでしょう・・・
bzbellさんに教えてもらったコードでそのままコメント詳細モジュールを書き換えたところ、コメントの内容がなくなってしまいました(管理画面からみると存在します)
そしてテンプレートを初期化して、1番目と3番目を削除してみたところ、今度はコメントが2重に表示されてしまい。。。
(しかもアバター画像が片方デフォルトのものに?)

今は提示いただいたコードにしたのでコメント内容が空です。

すいません、何か間違っていたのでしょうか・・・

#19: Posted by Author Profile Page bzbellからうにへの返信 @ March 21, 2010 [REPLY]
user-pic

>>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">&nbsp;</dt>
</dl>

念のためオリジナルのコードとの差分を取って変更点を確認して頂けますかあせあせ

#20: Posted by Author Profile Page bzbell @ March 21, 2010 [REPLY]
user-pic

>>16 うに さん

ご質問の件ですが、ログインしてコメントしない限り管理者のアバターは使えません。
ですが、あるキーワードにマッチしたユーザ名の場合には…という条件で表示させれば管理者のアバターを表示させることができます。
例えば、bzbell というユーザ名の場合には固定のアバターを表示…といった具合になります。
ただし、難点がありまして同名の HN の場合には識別することはできませんので、当然管理者アバターが表示されることになります。
ご参考までにこっ!

#21: Posted by うに @ March 21, 2010 [REPLY]
user-pic

>>19 bzbell さん

ありがとうございます。
無事正常表示できました^^

>念のためオリジナルのコードとの差分を取って変更点を確認して頂けますか
<dd class="user-txt"><$mt:CommentBody link_number="1"$></dd>
↑↑↑この部分が不足していたようです。

>>20 bzbell さん
>あるキーワードにマッチしたユーザ名の場合には…という条件で表示させれば管理者のアバターを表示させることができます。
>例えば、bzbell というユーザ名の場合には固定のアバターを表示…といった具合になります。

これは、コメント詳細モジュールの以下の部分を自分のHNにすれば可能でしょうか?
<dl id="comment-<$MTCommentID$>" class="comments_content<mt:If name="author" eq="bzbell"> bzbell</mt:If><mt:IfCommentParent> comment-reply</mt:IfCommentParent>">
>ただし、難点がありまして同名の HN の場合には識別することはできませんので、当然管理者アバターが表示されることになります。

他の誰かが自分を名乗らない限りは問題ないってことですよね^^

#22: Posted by Author Profile Page bzbellからうにへの返信 @ March 24, 2010 [REPLY]
user-pic

>>21 うに さん

こんばんわ^^

返事が遅くなりすいません。
ご質問の件ですが、うに さんが言われてる箇所は違います。
既存のテンプレート中にはそのような条件式はありませんので、ご自身で追加して頂く必要があります。

> 他の誰かが自分を名乗らない限りは問題ないってことですよね^^

はい。そのとおりですね。

#23: Posted by うにからbzbellへの返信 @ March 24, 2010 [REPLY]
user-pic

>>22 bzbell さん
> ご自身で追加して頂く必要があります。

なるほど・・・
まぁ気長に探していきます。

ありがとうございました~^^

 Post a Comment

 

コメント用フィード