TopMovable Typeカスタマイズ新着表示 > 2006年8月
2006年8月15日

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

August 15,2006 12:53 AM
Tag:[, , ]
Permalink

新着エントリーに 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;
}
Comments [7] | Trackbacks [3]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3