投稿者情報に New マークをつける

投稿者情報に New マークをつける

Posted at September 6,2006 1:20 AM
Tag:[Customize, MovableType]

投稿者情報に New マークをつけるMovable Type のエントリーに新着コメントまたは新着トラックバックがあった場合、エントリーの下に表示されている投稿者情報に New マークをつけるカスタマイズです。ご質問を頂きましたので本エントリーにてご紹介致します。

スクリーンショットはデフォルトテンプレートに設置した例です。新着コメントまたは新着トラックバックと連動して「New!」マークまたは任意の画像を表示させることができます。
また JavaScript を利用してますので、投稿からの経過時間をリアルタイムに計測して、新着マークの表示・非表示が制御できます。表示判定は時間単位での設定が可能です。

以下、カスタマイズ方法です。

1.テンプレートの修正

メインページ/カテゴリー・アーカイブ/日付アーカイブの中から新着表示を行いたいテンプレートに対し、下記の設定を行います。コメント・トラックバックに分けてますので、必要な分だけ設定してください。

1.1 コメントの新着表示

デフォルトテンプレートと公開テンプレートの設定例を下記に示します。青色で表示している部分を追加してください。

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

<MTIfCommentsActive>| <a href="<$MTEntryPermalink$>#comments">コメント (<$MTEntryCommentCount$>)</a> <MTComments lastn="1"><span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></MTComments></MTIfCommentsActive>

公開テンプレートの場合

<!-- コメント・非ポップアップ用 -->
 | <a href="<$MTEntryPermalink archive_type="Individual"$>#comments" title="comments<$MTEntryID$>">Comments</a> [<$MTEntryCommentCount$>] <MTComments lastn="1"><span class="new"><$MTCommentDate format="%Y:%m:%d:%H:%M:%S"$></span></MTComments>

1.2 トラックバックの新着表示

デフォルトテンプレートと公開テンプレートの設定例を下記に示します。青色で表示している部分を追加してください。

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

<MTIfPingsActive>| <a href="<$MTEntryPermalink$>#trackback">トラックバック (<$MTEntryTrackbackCount$>)</a> <MTPings lastn="1"><span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></MTPings></MTIfPingsActive>

公開テンプレートの場合

<!-- トラックバック・非ポップアップ用 -->
 | <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks" title="trackbacks<$MTEntryID$>">Trackbacks</a> [<$MTEntryTrackbackCount$>] <MTPings lastn="1"><span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></MTPings>

2.スクリプトの追加

下記のスクリプトを新着表示を設定したテンプレートの最後の方(</body> の前)に設定します。すでに新着表示のカスタマイズをされている場合は設定不要です。

<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設定

スタイルシートに下記の設定を追加します。最初の display プロパティで1項のタグに設定したタイムスタンプを非表示にします。その下の color プロパティと font-weight プロパティは、 New!! というテキストが表示された場合に適用される設定です。

span.new {
    display: none;
    color: red;
    font-weight: bold;
}
関連記事
zenback
人気エントリー
トラックバックURL


コメント

こんばんは、yujiroさん。
New!!マーク早速使わせていただきました。
なかなか面白いですね。
コメントが新しく入ったかどうか
すぐわかるのでいいですね。
いつもありがとうございます!

[1] Posted by ヨンシマイ : September 6, 2006 10:42 PM

>ヨンシマイさん
こんばんは。
ご連絡ありがとうございました。
お役にたてたようでよかったです。
また何かございましたらご連絡ください。
ではでは!

[2] Posted by yujiro : September 7, 2006 1:16 AM

はじめまして。
この機能を探してやっとこちらにたどり着きました。

しかし、私はSB(2.05R)の利用者なのですが(汗)、SBではエントリーブロック内ではコメントの投稿時間を表示する事が出来ないため利用できません。
(コメントの投稿時間はコメントブロック内でしか表示されない仕様のようです)
やはりSBでは不可能でしょうか。

[3] Posted by めるも : November 23, 2006 7:21 AM

>めるもさん
こんにちは。
ご要望の件、承りました。
別途エントリーさせて頂きます。
なお他の方のコメント回答がかなり滞留しているので申し訳ありませんがしばらくお時間ください。
それではよろしくお願い致します。

[4] Posted by yujiro : November 24, 2006 3:14 PM

あわわ…
要望ではなく軽い気持ちで質問しただけのつもりだったのですが…。(滝汗)

有難うございます。
いつでも構いません。いつまででも待ちます♪

[5] Posted by めるも : November 24, 2006 8:31 PM
コメントする
greeting

*必須

*必須(非表示)


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

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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