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(0)
No trackbacks found.
Comments(10)
-
#2: Posted by
からKeiへの返信
@ August 17, 2008
[REPLY]

>>1 Kei さん
こんにちわ^^
Kei さんとこのテンプレートではアバター表示が既に組み込まれてるので、比較的カンタンに設置可能ですよ

気が向いたら TRY してみてください
> ・・・PCでも見てみたら「ご指定のアドレスのページは見つかりませんでした。」となってます
あちゃぁ
個別記事ページの拡張子が .php になってました
どうやら iPhone では拡張子が .html じゃなきゃダメみたいですね。なるほど
ありがとうございます
-
#3: Posted by
からbzbellへの返信
@ August 17, 2008
[REPLY]

>>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
からbzbellへの返信
@ August 17, 2008
[REPLY]

>>2 bzbell さん
て、忘れてた、、このアイコンでの質問
管理人に専用のアイコンで表示には難しいですかね・・・?
以前の記事で管理人のコメント背景色をCSSで設定できていたような、あんな感じでアイコンも・・・
-
#5: Posted by
からKeiへの返信
@ August 17, 2008
[REPLY]

>>3 Kei さん
> いえいえphpでできましたYO
えっ!? ホントですか!?
わたしもやってみます
今ね、iPhone 用のテンプレートセット作ってるんです。
厳密にはテンプレートセットじゃなくって、テンプレットというものです。
http://as-is.net/blog/archives/001353.htmlTemplets プラグインというものを入れると、既存のテンプレートセットに依存せず追加することができます。
超ーーー便利だから試してみて
-
#6: Posted by
からKeiへの返信
@ August 17, 2008
[REPLY]

>>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
からbzbellへの返信
@ August 17, 2008
[REPLY]

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

>>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
bzbell
@ August 17, 2008
[REPLY]

Kei さん用「コメント」テンプレートモジュールにミスがありました。
32 行目の </mt:Else> を <mt:Else> に変更してください。
-
#10: Posted by
からbzbellへの返信
@ August 17, 2008
[REPLY]

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



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