Top > Movable Type > カスタマイズ > 最近のコメント [全て開く]
2007年6月 5日

コメント投稿者欄が無記名の時に代替名を表示する

June 5,2007 1:38 AM
Tag:[, , ]
Permalink

Movable Type でコメント投稿者名が空白の時、「最近のコメント」の投稿者名に[匿名]等の表示を行うカスタマイズです。
エントリー・アーカイブのコメント欄はこのような設定になっているのですが、「最近のコメント」でこの設定が欠落しておりました。

コメント投稿者欄が無記名の時に代替名を表示する

下は公開テンプレートの設定例です。青色の default 属性を追加してください。

<!-- 最近のコメント開始 -->
<dt class="sidetitle">
Recent Comments
</dt>
 
<MTIfNonZero tag="BlogCommentCount">
<dd class="side">
<ul>
<MTEntries lastn="5" recently_commented_on="5">
<li><a href="<$MTEntryLink$>"><MTEntryTitle></a><ul>
<MTComments lastn="5">
<li>└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor default="[匿名]"></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments>
</ul>
</li>
</MTEntries>
</ul>
</dd>
</MTIfNonZero>
<!-- 最近のコメント終了 -->
</dl>

属性値に記述された文字列が実際に表示される部分ですので、Anonymous 等、お好みの文字列を設定してください。

なお、MTCollate をご利用で、空の投稿者名の時に何も表示されない場合は、「MTCollate を使って「最近のコメント」を表示する」のを参照してください。

ちなみに、

<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1" default="Anonymous"$></MTCollateSetField>

という具合にします。

Comments [2] | Trackbacks [0]
2006年11月28日

サイドメニューの一部を折りたたむ

November 28,2006 2:36 AM
Tag:[, ]
Permalink

ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ(非表示にする)ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。

本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは Movable Type です。

下のスクリーンショットは「最近のエントリー」を折りたたんでみた完成イメージです。

折りたたみ用のリンクについては、リストのタイトル部分をリンクにする代わりに、リストの一番下に「続きを読む」のリンクを表示する方式にしています。この方がユーザビリティ上好ましいと思われるためです。

このカスタマイズは以前頂いたご質問のひとつで、実現困難ということでうやむやにしてしまってましたが、先日公開された Counter プラグインを用いることで可能になりました。

1.Counter プラグインの設定

Counter プラグインを Movable Type にインストールしてください。プラグインの詳細は配布サイトまたは Counter プラグインの記事をご覧ください。

2.スクリプトの追加

追記文章の折りたたみ」で利用しているリスト2.1 のスクリプトを <head> ? </head> の間(できれば </head> の直前)に設定します。または前後の script 要素を削除して、外部ファイル(showhide.js とか)にしても構いません。

お詫び:リスト 2.1 が正常に表示されておりませんでしたので、修正致しました。

すでに「追記文章の折りたたみ」のカスタマイズを行っている場合は本項をスキップしてください。

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>
リスト 2.1 追記文章の折りたたみ用スクリプト

3.部分折りたたみ用メニューを設定する

部分折りたたみ用メニューを表示したいテンプレートに、リスト 3.1 ?リスト 3.4 のお好きなリストを追加してください。表示するリスト数を変更する方法については5項をご覧ください。

3.1 最近のエントリー

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>
リスト 3.1 「最近のエントリー」用MTタグ

3.2 最近のコメント

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="30" recently_commented_on="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkComment">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Comment','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextComment" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Comment',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryLink$>"><MTEntryTitle></a><ul>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments></ul></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>
リスト 3.2 「最近のコメント」用MTタグ

3.3 最近のトラックバック

<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTPings lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkTrackback">
<a href="javascript:void(0)" name="<$MTPingID pad="1"$>" onclick="showHide('Trackback','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextTrackback" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Trackback',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>
リスト 3.3 「最近のトラックバック」用MTタグ

3.4 月別アーカイブリスト

月別アーカイブリストは表示月数を制御することができないため、サイト運営が長くなるにしたがってリストが長大になります。そのためリスト全体の折りたたみや、年毎の折りたたみ等を行う訳ですが、この技を使えば「最新×ヶ月分だけを表示」というコンパクトな表示が可能になります。
月が替わり、新しい月でエントリー投稿があった場合、表示月が更新されます。

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTArchiveList archive_type="Monthly">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkMonthly">
<a href="javascript:void(0)" onclick="showHide('Monthly','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextMonthly" style="display: none">
<div class="list_more"><a href="javascript:void(0)" onclick="showHide('Monthly',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
リスト 3.4 「月別アーカイブリスト」用MTタグ

4.CSS設定

「続きを読む ≫」および「≪ 続きを隠す」のリンクに class 属性 "list_more" を設定してますので、適宜お好みのプロパティを追加してください。ここではリスト 4.1 のように margin プロパティで上下のマージンのみを設定しています。

.list_more {
   margin:5px 0;
}
リスト 4.1 CSS

5.表示数を変更する

リスト 5.1 の下記の赤色部分を変更してください。

      :
<MTCounterIfEqual value="6">
      :
     (略)
      :
<MTCounterIfMore value="5"></div></MTCounterIfMore>
      :
リスト 5.1 表示数を変更する場合の変更箇所


「上方に表示されている数字 - 1」がデフォルトで表示される数になります。下方の数字は上の数字から -1 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。

Comments [12] | Trackbacks [1]
2006年6月22日

最近のコメントのツールチップにコメント内容を表示する(MTCollate版)

June 22,2006 12:58 AM
Tag:[, , ]
Permalink

以前公開した、「最近のコメントのツールチップにコメント内容を表示する」は、デフォルトのMTタグを使用した方法でしたが、本エントリーでは MTCollate プラグインで「最近のコメント」を表示している場合で、さらにコメントのツールチップにコメント内容を表示するカスタマイズを紹介します。

最近のコメントのツールチップにコメント内容を表示する

ここでは「MTCollate を使って「最近のコメント」を表示する」の3.1および3.2のリストを用いて、「最近のコメントのツールチップにコメント内容を表示する」との差分のみを掲載しています。

デフォルトのMTタグを用いたツールチップ表示は、a 要素に

title="<$MTCommentBody remove_html="1" encode_html="1" strip_linefeeds="1" trimj2_to="100">"

という title 属性を与えていますが、MTCollate の場合は

<MTCollateSetField name="comment_body"><$MTCommentBody remove_html="1" encode_html="1" strip_linefeeds="1" trimj2_to="100"$></MTCollateSetField>

という風に、コメント本文を取得する MTCollateSetField を追加し、

title="<$MTCollateField name="comment_body"$>"

をコメントリンクの a 要素に与えています。

以下、上記の内容を加えたリストを掲載しますので、そのままお使いになるか、現在使用されている「最近のコメント」に適宜修正を加えてください。

1.br 要素と "└" でツリー表示している場合

MTCollate を使って「最近のコメント」を表示するの3.1項からの追加部分を青色で示しています。
<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCollateSetField name="comment_body"><$MTCommentBody remove_html="1" encode_html="1" strip_linefeeds="1" trimj2_to="100"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" title="<$MTCollateField name="comment_body"$>"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$><br />
</MTCollateList>
</div>

2.リスト要素(ul -li)で表示している場合

MTCollate を使って「最近のコメント」を表示するの3.2項からの追加部分を青色で示しています。
<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCollateSetField name="comment_body"><$MTCommentBody remove_html="1" encode_html="1" strip_linefeeds="1" trimj2_to="100"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title"$>"><$MTCollateField name="entry_title"$></a><ul></MTCollateIfHeader>
<li><a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" title="<$MTCollateField name="comment_body"$>"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$></li>
<MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>
Comments [3] | Trackbacks [4]
2006年5月29日

エントリー・アーカイブで同一カテゴリーのコメントを表示する

May 29,2006 12:38 AM
Tag:[, , ]
Permalink

Movable Type のエントリー・アーカイブで同一カテゴリーのコメントだけを表示するカスタマイズです。ここでは MTTagInvoke プラグインを利用した方法を紹介します。

1.プラグインのインストール

下記のサイトより MTTagInvoke プラグインをダウンロードします。ダウンロードしたアーカイブを解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置(またはアップロード)、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置(またはアップロード) します。

MT ExtensionsMTTagInvoke

アップロード後、Movable Type 管理画面の

メイン・メニュー > システム・メニュー > プラグイン

でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。

MTTagInvoke の機能については、配布サイトや個別エントリーアーカイブに同一カテゴリーのエントリーを表示の後半にある説明を参照ください。

2.テンプレートの設定

エントリー・アーカイブのサイドバーの任意の位置に「最近のコメント」を表示する下記のタグを設定します。これまで表示していた「最近のコメント」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。

注:MTTagInvoke プラグインは2006年9月7日、Movable Type 3.3 対応のため、1.0 にバージョンアップされました。これによりプラグインで使用されているMTタグの名称が下記のように変更されています。サンプルリストは 1.0 に合わせた内容に変更しましたので、もし 0.9 を使っている場合は、記事のサンプルリストをご利用になる際、適宜読み替えてください。

MTTagInvoke プラグインMTタグ対応表
1.0(現在)0.9
MTTagInvokeNameMTTagName
MTTagInvokeAttributeMTTagAttribute
MTTagInvokeContentMTTagContent

2.1 デフォルトテンプレートの場合

<div class="module-archives module">
<h2 class="module-header">Entries of this Category</h2>
<div class="module-content">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
</div>
</div>

2.2 公開テンプレートの場合

<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2006.10.02 追記
MTTagInvoke 1.0 の記述を追加しました。

2006.11.23 追記
サンプルリストを MTTagInvoke 1.0 にあわせました。

Comments [2] | Trackbacks [2]
2006年4月 6日

最近のコメントのツールチップにコメント内容を表示する

April 6,2006 2:00 AM
Tag:[, ]
Permalink

当サイトではサイドバーの「Recent Comments(最近のコメント)」の各コメントにマウスをポイントすると、コメントの内容を表示するようにしています(下のスクリーンショット)。エントリー・アーカイブにジャンプせずに頂いたコメントの内容を確認したいためで、かなり重宝しています。

trimj2_to追加

ということで、以下カスタマイズ方法です。

1.アンカータグの title 属性に MTCommentBody を付与

公開テンプレートの「最近のコメント」を例に設定例を示します。

<!-- 最近のコメント開始 -->
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
</div>
<!-- 最近のコメント終了 -->

上記リストの赤色で示したアンカータグの title 属性を、下記のように青色の内容に変更します。

title="<$MTCommentBody remove_html="1" encode_html="1" strip_linefeeds="1" trimj2_to="100"$>"

MTCommentBody にはいくつかの属性を付与しています(その内のいくつかは必須です)。それらの属性がどのような効果があるかを、以下のコメントを例に順を追って説明します。

Movable Type 3.2のリリースに伴い、当サイトでも3.2対応のテンプレートを公開致します。
 
今回はこれまでに公開してきた<a href="http://www.koikikukan.com/template.php">テンプレート</a>を元に、3.2のデフォルトテンプレートの構造を一部取り入れて全面的に修正致しました。CSSも見直しを行い、これまでの経験(といっても1年)を活かして多少スッキリしたものになったと思います。
デザインはこれまでのものと変わりませんが、3.2のデフォルトテンプレートに合わせて全体の配色を濃くしました。

2.<$MTCommentBody$> だけの場合

MTCommentBody に属性を付与しない場合、再構築で生成される title 属性の内容は下記のようになります。

title="<p>Movable Type 3.2のリリースに伴い、当サイトでも3.2対応のテンプレートを公開致します。</p>
 
<p>今回はこれまでに公開してきた<a href="http://www.koikikukan.com/template.php" rel="nofollow">テンプレート</a>を元に、3.2のデフォルトテンプレートの構造を一部取り入れて全面的に修正致しました。CSSも見直しを行い、これまでの経験(といっても1年)を活かして多少スッキリしたものになったと思います。<br />
デザインはこれまでのものと変わりませんが、3.2のデフォルトテンプレートに合わせて全体の配色を濃くしました。<br />
</p>"
属性なしの場合これがHTMLとしてページに表示されると、スクリーンショットのように全く期待しない結果となります。コメントの内容がツールチップとして表示されないのは、コメント内に記述されたアンカータグが干渉してしまっているためです。

3.remove_html="1" を追加

ということで、まずコメントに記述された html タグを取り除く必要があります。これには remove_html="1" を使用します。この属性を用いることでHTMLタグは全て除去されます。
これで下のスクリーンショットのように改善され、ツールチップとして表示されるようになりました。

remove_html追加

4.strip_linefeeds="1" を追加

ツールチップには(私にとっては)不要な改行や空行が含まれています。これを除去するために strip_linefeeds="1" を追加します。この属性を用いることで、テキストから改行コード(キャリッジ・リターンおよびライン・フィード)が除去されます。
これで下のスクリーンショットのように全ての内容がまとまって表示されるようになります。

strip_linefeeds追加

5.encode_html="1" を追加

サンプルのコメントには現れていませんが、例えばコメントに「&」が含まれている場合、valid な HTML になりませんのでHTMLエンコードを行って「&amp;」に変換する必要があります。そのために encode_html="1" を与えます。また「<」や「>」もエンコードしてくれます(HTMLタグについては先の remove_html 属性で除去しているのでここでは対象外となりますが、それ以外で用いられている「<」や「>」をエンコードします。

6.trimj2_to="xxx" を追加

最後に、必要に応じて表示する文字数を決定します。ここでは表示文字数を制限するプラグインを利用しています(下記のいずれか)。

いずれかのエントリーで公開されているスクリプトをコピーし、mt-trimj.pl 等の名称で保存します。そしてそれを plugins ディレクトリにアップロードすれば trimj_to または trimj2_to 属性が使えるようになります。サンプルでは 100 文字でトリミングしました。
全ての設定を終えると冒頭のスクリーンショットと同じな表示になります。

trimj2_to追加
Comments [18] | Trackbacks [5]
2006年2月22日

新着コメントに New マークをつける

February 22,2006 11:56 PM
Tag:[, , , ]
Permalink

新着コメントに New マークをつける新着エントリーに New マークをつけるの「最近のコメント」版で、「最近のコメント」の新着コメントに「New!!」というテキストや画像を表示するカスタマイズです。

「コメント投稿後×時間以内」という指定により任意のテキストまたは画像を指定したリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。

動作はコメントの投稿時間をコメントタグで予め表示させておき、後から JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像を表示するという仕組みです。

1.テンプレートの修正

1.1 公開テンプレートの場合

「最近のコメント」タグに下記のように青色部分を追加します。

<!-- 最近のコメント開始 -->
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$> <span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTComments>
</MTEntries>
</div>
<!-- 最近のコメント終了 -->

1.2 Recents プラグインの場合

The blog of H.Fujimotoさんの最近のコメント/トラックバックをエントリーとともに表示するプラグインのサンプルリストを元に修正したものです。

<ul>
<MTCommentsRecent lastn="10" comment_sort_order="ascend">
<MTCommentsRecentIfEntry><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>(<$MTEntryDate$>)</MTCommentsRecentIfEntry>
<MTCommentsRecentIfComment>
<MTCommentsRecentHeader><ul></MTCommentsRecentHeader>
<li><$MTCommentAuthorLink$>(<$MTCommentDate$>) <span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
<MTCommentsRecentFooter></ul></li></MTCommentsRecentFooter>
</MTCommentsRecentIfComment>
</MTCommentsRecent>
</ul>

1.3 MTCollate プラグインの場合

以下は当サイトで公開しているMTCollate を使って「最近のコメント」を表示するのサンプルを元に修正したものです。

<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCollateSetField name="comment_newdate"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$> <span class="new"><$MTCollateField name="comment_newdate"$></span><br />
</MTCollateList>
</div>

2.スクリプトの追加

上記を設定したテンプレートの最後の方に下記のスクリプトを追加します。

<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'New!!';
 
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
    if(spans[i].getAttribute('class') == 'new' ||
       spans[i].getAttribute('className') == 'new') {
        time = spans[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]); 
        var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000); 
        now = Math.ceil(now);
        if(-now <= pass){
            spans[i].innerHTML = content;
            spans[i].style.display = 'inline';
        }
    }
}
//-->
</script>

新着表示の時間は

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です(例は24時間)。

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。HTMLタグも大丈夫ですので

var content = '<img src="http://~/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

3.CSS設定

表示するテキストは new という class 属性つきの span タグで括られていますので、

span.new {
    display: none;
    color: red;
    font-weight: bold;
}

2006.08.15 追記
HTMLタグおよびスクリプトにコメントアウトする方式の設定が残っていましたので修正しました。

2006.08.18 追記
CSS に display プロパティがもれていたので追加しました。

Comments [30] | Trackbacks [9]
2006年2月21日

「最近のコメント」が表示されない不具合について

最近、公開テンプレートをご利用くださっている方から「『最近のコメント』が表示されません」というコメントを何件か頂きました。どうやら MTEntries タグに recently_commented_on 属性を付与しているとダメみたいです。
ネットで色々と調べたところ、MySQL のシステム権限付与が影響している(らしい)ことが判明しました。MuySQLのユーザが一時テーブルを作成する権限を持っていない場合に起こる不具合のようです。

以下、phpMyAdmin を利用した権限の変更方法を記しておきます(権限を変更するには root でログインすることが条件です)。変更できない場合はエントリーの最後をご覧ください。

ログイン画面phpMyAdmin であればログイン画面の[特権]をクリック
ユーザー概略 次ページの「ユーザー概略」で表示されたユーザ一覧より 該当ユーザの一番右にあるアイコン(「特権を修正」というツールチップが表示されます)をクリック。
CREATE TEMPORARY TABLES 次ページの「CREATE TEMPORARY TABLES」のチェックボックスをチェックして「実行」をクリック。
「グローバル特権」欄に「ALL PRIVILEGES」が表示 正常に終了すれば「グローバル特権」欄に「ALL PRIVILEGES」が表示されます。

なお自サイトでMySQLの特権を外して試してみたのですが同様の事象は発生しませんでした。上記の手順については参考程度という位置づけでお願い致します。
この問題についての参考サイトは下記です。ありがとうございました(下記のサイトにはコマンドラインからの実行方法も掲載されています)。

レンタルサーバ等で権限の修正が不可能な場合は、下記のエントリーで紹介しているプラグインを利用すれば「最近のコメント」と同等以上の機能を実現できますので、そちらをご利用ください。2つめは(多分)本問題に対する実績ありです。

Comments [4] | Trackbacks [3]
2005年3月24日

MTCollate を使って「最近のコメント」を表示する

デフォルトテンプレートや公開テンプレートのサイドバーメニューにある「最近のコメント」は、MTEntries タグや MTComments タグ等を用いて、表示するエントリー数と各エントリーに表示するコメント数を制御しています。この方法はスタンダードながら過去のコメントが含まれてしまうケースが少なくありません。

最近のエントリー例えば、左図では各エントリーに対して最大3コメントを表示する設定にしています。この例でお分かりの通り、「記事3」のコメントには既に読み終わった古いコメントが含まれています。
また「記事2」には実は新しいコメントが他にもあるのですが、現在の設定では表示することができません。隠れている記事を読めるようにするには表示するコメント数を増やさなければなりませんが、エントリーに対してのコメント数は予測できないので本来的な作業ではありません。また表示件数を増やせば、その分既読コメントが表示される可能性が高くなります。つまり意図しない情報が画面上に表示されるという点にいおいても好ましいものではないでしょう(といっても趣味の問題ですが)。

最近のエントリーMTCollate は Google で日本語ページを検索しても80件ほどしかヒットしない、どちらかといえば陽の目をみないプラグインです。最近 MTPingEntry との併用によるトラックバックのツリー表示で活躍していますが、それ以外の用途ではほとんど利用されていないようです。
でこの MTCollate を用いれば同じ件数でも図のように最近のコメントのみが表示されるようになります。「記事2」の隠れていたコメントも現れました。逆に「コメントが少ないので賑やかにしたい」という場合も、MTCollate を利用すれば、エントリーやエントリー内のコメント件数に依存しないので、最新のコメントからn件という形で常に表示させておくことができます。

と、偉そうに書きましたが、実は Ogawa::Memoranda さんの最近のトラックバックをエントリごとにまとめて表示にあった MTCollate タグを「最近のコメント」用に修正しただけです。すいません。
以下カスタマイズ方法です。

1.MTCollate のダウンロード
MT Extensions より MTCollate をダウンロード(ページの最初の方にある「Download」をクリック)してください。

2.プラグインの配置
ダウンロードしたアーカイブを解凍して、その中の MTCollate.pl を plugins フォルダに配置またはアップロードします。

3.「最近のコメント」のMTタグを変更
公開テンプレートを例に挙げると、本カスタマイズを利用したいテンプレートに設定されている

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<br/>
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$><br />
</MTComments>
</MTEntries>
</div>

をばっさり削除して、下のタグに置き換えてください。ここでは2つのパターンを挙げておきますのでいずれかお好きな方をお選びください。3.1は貼り付けるだけ(再構築は必要)ですぐ使えます。3.2はスタイルシートで ul タグと li タグの設定が必要です。ツリー化スクリプトを利用される場合は3.2をお使いください。

3.1 br タグと "└" で表示

<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1" default="Anonymous"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><br /></MTCollateIfHeader>
└ <a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$><br />
</MTCollateList>
</div>

3.2 ul タグと li タグで表示

<MTCollateCollect>
<MTComments lastn="10">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1" default="Anonymous"$> </MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a><ul></MTCollateIfHeader>
<li><a href="<$MTCollateField name="entry_link"$>#<$MTCollateField name="comment_id"$>" encode_html="1"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$></li>
<MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

設定が終わったら保存・再構築してください。

4.さらにカスタマイズ
表示したいコメント件数を変更するには、リスト中に赤字で示した数字を変更してください。デフォルトは10件表示するようにしています。

<MTComments lastn="10">

またデフォルトでは、エントリー表示順序は新しいものを上に、エントリー内のコメントは古いものを上に表示する設定にしています。
エントリーの表示順を、古いものを上にする場合は以下のように変更してください。

<MTCollateList sort="entry_key:#:+ comment_id:#:+">

エントリー内のコメントの表示順を、新しいものを上にする場合は以下のように変更してください。

<MTCollateList sort="entry_key:#:- comment_id:#:-">

またエントリーの表示順序は最新コメントを受け取った順番で表示するようにしています。

2006.11.13
リストに encode_html 属性を追加しました。

2007.05.28
投稿者名が無記名の時に「Anonymous」を表示するよう変更しました。

Comments [59] | Trackbacks [32]
Now loading...
List of "最近のコメント"
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.261
 
List Me!