新着トラックバックに New マークをつける

新着トラックバックに New マークをつける

Posted at August 15,2006 12:53 AM
Tag:[Customize, MovableType, Trackback]

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

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

動作は、トラックバック受信時間をページ上に表示させておき(CSSで非表示)、JavaScript でその投稿時間を取得し、現在時刻との差を計算して指定時間以内であればテキストまたは画像を表示する、という仕組みです。

1.テンプレートの修正

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

<!-- 最近のトラックバック開始 -->
<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTPings lastn="10">
<a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTPings>
</div>
<!-- 最近のトラックバック終了 -->

1.2 recently_pinged_on プラグインの場合

Ogawa::Memoranda さんの recently_pinged_on プラグインに設定する方法です。

<dl>
  <MTEntries recently_pinged_on="5">
    <dt><a href="<$MTEntryLink$>"><$MTEntryTitle$></a></dt>
    <MTPings lastn="5">
      <dd><a href="<$MTPingURL$>" rel="nofollow">
          <$MTPingBlogName$>: <$MTPingTitle$></a> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></dd>
    </MTPings>
  </MTEntries>
</dl>

1.3 Recents プラグインの場合

The blog of H.Fujimoto さんのRecents プラグインに設定する方法です。

<ul>
<MTPingsRecent lastn="10" ping_sort_order="ascend">
<MTPingsRecentIfEntry><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></MTPingsRecentIfEntry>
<MTPingsRecentIfPing>
<MTPingsRecentHeader><ul></MTPingsRecentHeader>
<li><a href="<$MTPingURL$>"><$MTPingTitle$></a> <$MTPingDate format="%m/%d"$> <span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
<MTPingsRecentFooter></ul></li></MTPingsRecentFooter>
</MTPingsRecentIfPing>
</MTPingsRecent>
</ul>

2.スクリプトの追加

1項のタグを設定したテンプレートの最後の方に、下記のスクリプトを追加します(上記タグの中に埋め込まないでください)。
他の新着表示で利用している場合、スクリプトの設定は不要ですが、スクリプトがトラックバック表示より後方になるように設定してください。

<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


トラックバック

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

Tracked on August 15, 2006 2:20 PM

新着コメントやトラックバックにNew!マークをつける from ツール・ド・もんち - Tour De MonChi -
新着コメントやトラックバックに「New!」などのマークをつけるカスタマイズです。 当ブログも「最近のコメント」や「最近のトラックバック」をサイドバーに... [続きを読む]

Tracked on August 15, 2006 7:41 PM

新着トラバ表示 from Y乃助
新着トラバにFC2と同じように NEW を付けたいな!という発想から、開始( ̄0... [続きを読む]

Tracked on June 16, 2007 5:49 AM
コメント

いつも、お世話になってます^^

説明が 解りやすかったのでサクサク出来ました
ついでに 新着エントリーとサブカテゴリーにも
つけちゃいました。

Widget にスプリクトを放り込んで
各テンプレートの 右サイドバーの一番下に
入れたんだけど ちゃんと動いてますよー^^

記事にしたらTBしますので よろしくでーす♪

[1] Posted by MELL : August 15, 2006 4:01 AM

>MELLさん
こんばんは。
ご利用&トラックバックありがとうございます。
Widget でもうまくできたようで良かったです。
ではでは!

[2] Posted by yujiro : August 18, 2006 12:54 AM

こんばんは。
新着コメントとトラックバックにNew!マークを付けようと思い
参考にさせて頂きましたw
新着コメントの方は、上手くいきました。

しかし、トラックバックの方が・・・
上手く受信出来てないのか?他のBlogからちゃんと送信出来てるんですが
今カスタマイズ中のBlogに反映されないんです。
迷惑トラックバックの方にも入ってないのです。
カスタマイズはじめた頃にはちゃんと、届いていたんですが・・・
ここ2?3日数回試してるんですけど、全然ダメなんです。
yujiroさんに質問していいのか悩んだのですが、何かヒント等あればと思い書いてみました。
お手数かけますがヨロシクお願いしますm(_ _)m

[3] Posted by yocco : July 23, 2007 9:37 PM

こんばんは。
システム・メニュー > ログのエラーでてるのを、
削除してみたらTBが受け取れるようになりました。
お騒がせいたしましたm(_ _)m

[4] Posted by yocco : July 25, 2007 11:32 PM

>yoccoさん
こんにちは。
ご連絡ありがとうございます。
ご質問の件、無事に解決されたようで良かったです。
ではでは!

[5] Posted by yujiro : July 27, 2007 12:43 PM

The codes here are very important and I found them very helpful. We all know that it's not that easy to look for some codes that are similar to these. Thanks for posting this one.

[6] Posted by John Smith : May 2, 2011 8:28 AM

You're welcome.

[7] Posted by yujiro logo : May 4, 2011 4:10 PM

荒木様、こんにちは。
今、トラックバックの新着表示でつまづいています。
<mt:pingDate format="%m/%d" /><span class="new"><$MTPingDate format="%Y:%m:%d:%H:%M:%S"$></span>
その後にスクリプトです。
cssも入れました。
けれども、NEW!!画像が付きません。
また、カテゴリーは別になりますが、ブログを消去した後、エクスポートしていた記事をインポートして、表面上はブログとして成り立っている(と思う)のですが、テスト記事をアップしたところ、カレンダーが表示されなくなりました。
(記事を削除すると表示されます。)
この現象により、テスト記事が表示されている間は、コメントの新着表示も出来ないので、今はテスト記事は削除しています。
今後、カレンダーを表示させる事は不可能なのでしょうか?
申し訳ありませんが、教えてください。
よろしくお願いします。
URLはhttp://pandora-box.club/blog/です。

[8] Posted by 託生 logo : June 15, 2015 4:56 PM

荒木様、こんばんは。
その後の経過をお伝えします。
先日、新しく作ったブログのアーカイブが上手く表示されなかった為、再度、ブログの消去、作成をしたところ、記事を新規作成した時にカレンダーが消える症状はなくなりました。
そこで、このカテゴリー内のトラックバックに新着表示なのですが、素人目には新着記事にNEW画像を付けると、コメントとトラックバックが表示されず、新着記事とコメントをNEW!!(文字)にすると、トラックバックの方にNEW画像が表示されるようになりました。以前、カテゴリーアーカイブの方でコメントをした、「カテゴリーの新着表示」は文字も画像も表示出来なくなりました。
各ウィジェットで一つだけ、画像表示をする事は、カテゴリーを除いて出来ているので、どこがおかしいのか全くわからない状態です。
引き続きサポートをお願いします。

[9] Posted by 託生 logo : June 17, 2015 8:20 PM

こんばんは。
ご返事遅くなりすいません。

おそらくですが、コメント・トラックバック・カテゴリーのそれぞれについて「2.スクリプトの追加」を行っているため、正常に動作していないように思われます。

カテゴリーリストがHTMLの順番で一番下にくるので、その部分のscript要素だけを残し(前回の修正は元に戻す)、コメント・トラックバックのscript要素は削除してみてください。

[10] Posted by yujiro logo : June 19, 2015 1:55 AM

荒木様、ありがとうございます。
無事、すべてのウィジェットでNEW画像が表示されました。
なぜ、最近のエントリーのみ指示がないのか始め、わからなかったのですが、私の方で、後からツリー化した時にspan class="new"を入れ忘れていたのに気付きました。
スクリプトはカテゴリーアーカイブのみに入れました。
でも、このやり方だと、画像は一種類と決められてしまいますね。
カテゴリーアーカイブのみ他の画像…という事も考えていたのですが、諦めました。

[11] Posted by 託生 logo : June 19, 2015 5:59 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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