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(0)

No trackbacks found.

 Comments(10)

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

こんにちは～
なんだか楽しそうですねサングラス
私も少し設置してみます！（時間かかりそうだけどＯｒｚ

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

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

>>1 Kei さん

こんにちわ^^

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

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

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

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

>>2 bzbell さん
＞どうやら iPhone では拡張子が .html じゃなきゃダメみたいですね。

いえいえphpでできましたＹＯ
index,mtmlとindividual.mtml両方の
１行目のXML宣言をPHP化した物に変更と
中頃にある　<$MTBlogArchiveURL$>i/　～中略～　<$MTEntryBasename$>.html" ～後略　の
.html （各２箇所）を　.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でできましたＹＯ

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

今ね、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 さん
ありがとうございます＞＜
無事表示されましたうぅ～ん
忍者ではないですが・・黒猫耳にしてみました（アイコン

 

 Post a Comment

 

コメント用フィード