新着コメントに New マークをつける: 小粋空間

Top ＞ Movable Type ＞カスタマイズ＞新着表示＞新着コメントに New マークをつける

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

Posted at February 22,2006 11:56 PM
Tag：[Comment, Customize, MovableType, Sidebar]

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

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

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

１．テンプレートの修正

１．１公開テンプレートの場合

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

<!-- 最近のコメント開始 -->
<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>
<!-- 最近のコメント終了 -->

１．２ 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>

１．３ 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>

２．スクリプトの追加

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

<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" />';

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

３．CSS設定

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

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

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

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

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ 新着コメントに「New」マークをつけるカスタマイズ from Project MultiBurst
新着コメントに「New」マークを付けるカスタマイズを見つけました。いつもお世話になっている、小粋空間さんのカスタマイズ。関連URL 小粋空間: 新着... [続きを読む]

Tracked on February 24, 2006 2:19 PM

≫ [o.]新着コメントに更新マーク from `ohana
新着（２４時間以内）に頂いたコメントに更新マークを表示するようにしました。参... [続きを読む]

Tracked on February 28, 2006 4:09 PM

≫ 最近のコメントにＮＥＷマーク from 波乗りーまん
コンスタントにコメントをもらえるようになって嬉しい限りブログ書いてて反響あるの... [続きを読む]

Tracked on March 14, 2006 12:08 AM

≫ New!マークの追加 from Coffee Time
ここのところ、毎日のように小粋空間さんを参考にしつつ、カスタマイズを繰り返してい... [続きを読む]

Tracked on March 31, 2006 5:51 PM

≫ NEW！マークを表示させてみる[1]♪ from ++Blog-MELL++
いつものように小枠空間さんの記事「新着トラックバックに New マークをつ... [続きを読む]

Tracked on August 15, 2006 2:19 PM

≫ ブログにNEWマークつけました。 from http://www.toruses.com/blog/
このブログ、MovableTypeで作り始めて2ヶ月経過しましたが、どんなカスタ... [続きを読む]

Tracked on August 18, 2006 4:21 PM

≫ 新着コメント表示 from Y乃助
新着トラバがうまくいったところで、今度は、新着コメントをなんとかしたいところ！ ... [続きを読む]

Tracked on June 16, 2007 6:10 AM

≫ 進め！MovableType４新着表示 from 笑むなＡｉｋｏの『お玉杓子は飲み物です』
新着表示の「Ｎｅｗ」をリストで表現？。 [続きを読む]

Tracked on March 11, 2008 11:25 PM

≫ ブログ　プチカスタマイズ from アクアリストになりたくて -アベニーパファーLOVE-
ブログのカスタマイズについて、めちゃめちゃお世話になってる小粋空間さんのこちら... [続きを読む]

Tracked on October 23, 2008 9:01 PM

こんばんは、yujiroさん　コメントの方も合わせて導入させて頂きました。　ありがとうございます。

[1] Posted by mituru : February 23, 2006 10:31 PM

＞mituruさん
こんにちは。
こちらもご利用くださりありがとうございました。

[2] Posted by yujiro : February 24, 2006 12:44 PM

いつもすばらしいカスタマイズをありがとうございます。

早速使わせていただきました（＾＾；）

今後ともよろしくお願いいたします。

[3] Posted by showBOO : February 24, 2006 2:22 PM

＞showBOOさん
こんばんは。
ご利用＆ご連絡ありがとうございました。
うまく設置できたようで良かったです。
ではでは！

[4] Posted by yujiro : February 26, 2006 1:25 AM

こんばんは。
いつも拝見させて頂いております。
私のBlogは、ほぼ全てこちらのサイトを参考に作っております。

早速ですが、
この「New マーク」を付けるカスタマイズが、
最初は反映されていたのですが、
いつの間にか反映されなくなりました。

何故なのかお暇な時に教えて頂けたら幸いです。

[5] Posted by thomas : March 22, 2006 2:13 AM

＞thomasさん
こんにちは。
ソースを拝借して動作確認したところ正常に動作しているようです。
現在は24時間以内の投稿のみ新着にマークがつくように設定されていますので、追加したスクリプトの

var pass = 24;

を

var pass = 100;

等に変更して再構築してみてください。

以上です。
それではよろしくお願い致します。

[6] Posted by yujiro : March 23, 2006 10:27 AM

yujiro さん

いつもテンプレートでお世話になっております。

新しいコメントが古いエントリーで表示されなくて悩んでいましたが
今回ＭＴｃｏｌｌａｔｅプラグインとｎｅｗマーク表示スクリプト使用で
新しいコメントが表示されるようになりました。
記事も分かりやすくて大変助かりました。
有り難う御座いました。

[7] Posted by sumi : March 24, 2006 1:10 PM

＞sumiさん
こんばんは。
こちらこそお世話になります。
カスタマイズ、うまくできたようで良かったです。
ではでは！

[8] Posted by yujiro : March 25, 2006 1:36 AM

役に立つスクリプト＆設置方法を提供してくださって、本当に助かっています。
おかげさまで、本日は、新しいコメントに「New」を無事表示させることができました。ありがとうございました。

[9] Posted by Chie : April 12, 2006 12:36 AM

＞Chieさん
こんばんは。
ご利用＆ご連絡ありがとうございます。
うまくできてよかったです。
ではでは！

[10] Posted by yujiro : April 12, 2006 1:38 AM

いつもお世話になっております。先日は有難うございました。
実は前のコメントにあるThomasさんと同じ現象が私のところでも発生しており、ちょっと困っております。
私の場合はMTCollate プラグインを使って新着コメントを出しているのですが、先週辺りから新着があってもnewの印が出なくなりました。後のコメントにある「var pass = 24;」の数値を変えたりも試してみて自分でコメントを書いたりしても見たのですがやはり表示されませんでした。
実は他にも同じＭＴで作っているブログがあるのですが、そちらでも同じMTCollate プラグインで新着に印が出るようにしているのですが、問題なく動いております。出ないものと出るものの違いといったらページのカラム数くらいで、今回表示されないのは３カラムレイアウトのものです。表示されているものは２カラムレイアウトを使用しております。
よろしくお願いいたします。

[11] Posted by 葛城宮雅 : August 14, 2006 12:49 AM

＞葛城宮雅さん
こんばんは。
ご質問の件ですが、本エントリーのタグおよびスクリプトが一部誤っておりましたので、申し訳ございませんが再度設定くださいますよう、お願い致します（エントリーリストはそのままで問題ありません）。

なおエントリーリストとコメントリストの時間を変更されているので、コメントリスト用の新着表示のスクリプトは、下記の行

var spans = document.getElementsByTagName('span');

を

var spans = document.getElementByID('commentlist').getElementsByTagName('span');

に変更されると良いでしょう。
それではよろしくお願い致します。

[12] Posted by yujiro : August 15, 2006 1:29 AM

おはようございます。
何時も素早い対応ありがとうございます。
無事に新着の印がつくようになりました。
これからも色々と参考にさせていただきつつ、勉強していきたいと思います。

[13] Posted by 葛城宮雅 : August 15, 2006 10:36 AM

いつも小粋空間さんにはお世話になっています。
このエントリーを基に設定をしていたのですが、3.CSS設定で「display: none;」が抜けていませんでしょうか。
間違っていたら申し訳ありません。

[14] Posted by もんち : August 15, 2006 3:28 PM

＞葛城宮雅さん
こんばんは。
ご連絡ありがとうございました。
無事に直ってよかったです。
ではでは！

＞もんちさん
こんばんは。
いつもご利用ありがとうございます。
またこの度はご指摘くださり、どうもありがとうございました。
本文は先程修正致しました。

[15] Posted by yujiro : August 18, 2006 1:07 AM

はじめまして。
どうしてもわからないことがありましたので、質問してもよろしいでしょうか？

私のサイトでは、「新着コメントリスト」欄を設けるのではなく、エントリーそのものの下に
(commnt(2)/tb(5))
のように表示させているのですが、
新しくコメントがついた時には
(commnt(3)"new"/tb(5))
という風に表示させることができたらいいのにと思っています。

このページで紹介して下さっている方法では
うまくいかなかったのですが（当然といえば当然かもしれませんが）、
上記のようにnewを表示させるのは難しいでしょうか？？

トンチンカンなことを書いていたらすみませんm(__)m

[16] Posted by ちーぶー : September 2, 2006 11:07 PM

＞ちーぶーさん
はじめまして。
ご質問の件ですが実験してみたいと思います。
うまくできたらエントリー致しますので、すいませんが少々お時間ください。
アイデアありがとうございます！

[17] Posted by yujiro : September 4, 2006 12:50 AM

yujiroさん、ありがとうございます！
できあがってエントリーされるのを楽しみに待ってます！
ちーぶー

[18] Posted by ちーぶー : September 4, 2006 11:08 PM

＞ちーぶーさん
こんにちは。
「投稿者情報に New マークをつける」を投稿致しましたのでお試しください。
それではよろしくお願い致します。

[19] Posted by yujiro : September 6, 2006 11:26 AM

yujiroさん、こんにちは。ちーぶーです。
なんて素早いアップなんでしょうか！驚
早速試してみたところ、やりたいことが実現されていました。
本当に感謝です。ありがとうございます！

[20] Posted by ちーぶー : September 7, 2006 10:33 PM

＞ちーぶーさん
こんばんは。
ご連絡ありがとうございました。
うまくカスタマイズできたようでよかったです。
また何かございましたらご連絡ください。
ではでは！

[21] Posted by yujiro : September 8, 2006 1:49 AM

Yujiroさん、

いつもお世話になります。

先日サイドメニューのツリー化を行ってから、以前表示されていた新着コメントの"NEW !"マークが表示されないようになってしまいました。
テンプレートのタグをツリー用に書き換えたので、「<」span class="new"「>」「<」$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$「>」「<」/span「>」と組み込むだけではいけないのでしょうか？
スクリプトやCSSの記述には間違いはないと思うのですが。

[22] Posted by kunio : January 19, 2007 3:56 PM

＞kunioさん
こんばんは。
ご質問の件ですが、JavaScript エラーが発生しているようですので「JavaScript エラーを解消する」を参考に JavaScript エラーを解消してみてください。
本ご質問とは関係ありませんが、何か不具合が発生した場合は、JavaScript エラーの他、HTMLマークアップは「Another HTML-lint gateway」、CSS は「The W3C CSS Validation Service」で致命的なエラーがないか確認されると良いでしょう。

色々ご利用くださり有難いのですが、コメント稼動削減にご協力頂ければ幸いです。
それではよろしくお願い致します。

[23] Posted by yujiro : January 20, 2007 10:55 PM

Yujiroさん、

いつもお世話になります。
上記の件ですが、1週間色々と試してみましたが解決されないので、諦めました。
色々とご迷惑をお掛けして申し訳ありませんでした。

[24] Posted by kunio : January 26, 2007 4:21 PM

＞kunioさん
こんばんは。
サイトを拝見させて頂きましたが、２項のスクリプトで、

spans[i].style.display = 'inline';

の1行が削除されているのが表示されない原因と思います。
再度、２項のスクリプトを（修正せずに）そのままコピーしてください。また公開しているスクリプトは修正可能な部分を除いてそのままお使いください。

それではよろしくお願い致します。

[25] Posted by yujiro : January 26, 2007 10:33 PM

Yujiroさん、

再度確認してくださって有難うございます。
確かにご指摘のラインが抜けておりました。恐らくコピペ&削除を繰り返すうちに抜けてしまったようです。
何度もご迷惑をお掛けして申し訳ありませんでした。

[26] Posted by kunio : January 27, 2007 10:38 PM

＞kunioさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは！

[27] Posted by yujiro : January 27, 2007 11:25 PM

こんばんは。
初めてコメントさせていただきます。
現在Serene Bachでブログを立ち上げようとチャレンジしております。
小粋空間様から以下のプラグインを使用させていただいております。
すばらしいプラグインをありがとうございます。

新着表示プラグイン（投稿者情報版） for Serene Bach
新着表示プラグイン（最新記事リスト版） for Serene Bach
新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach

是非ともメニューのコメントリストにもNEW!と表示させたいのですが、このプラグインをSerene Bachで使用する方法はないでしょうか？
コメントをツリー化するプラグインを導入していますので、そちらを改造しようとしてみましたが、知識不足でうまく表示させることができませんでした。
お力をお借りできれば、幸いです。

[28] Posted by もも : June 26, 2009 2:07 AM

＞ももさん
こんばんは。
プラグインご利用ありがとうございます。
ご要望のプラグインは多分作れると思いますが、すっかり忘れてしまっているので、すいませんがしばらくお時間頂けますでしょうか。
できあがり次第、別途エントリー致します（もしダメなようであれば、このエントリーにお詫びのコメント致します）。
それではよろしくお願い致します。

[29] Posted by yujiro

: June 27, 2009 2:32 AM

yujiro様、
早々のレスありがとうございます。
お手数おかけしてすみませんが、よろしくお願いいたします。

[30] Posted by もも : June 27, 2009 7:34 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

Now loading...

小粋空間 - a cheap joke and a play on words site