サイトに新しい記事を投稿した際、トップに新しい記事は表示されますが、それを少し判り易くするためのカスタマイズです。
見た目のちょっとしたアクセントにもなりますね。
□関連記事:
新着トラックバックに「New」をつける
テンプレート追記
カテゴリー を表示させている部分に、下記のように「New」の表示部を追記する
※<span>~</span>の間
<MTIfArchiveTypeEnabled archive_type="Category">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</MTIfArchiveTypeEnabled>
最近のエントリー の場合
<MTEntries lastn="10">
・<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> <span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span><br />
</MTEntries>
表示判定用のスクリプトを追加する
<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>
※4行目で表示時間を設定する
※6行目で表示メッセージを設定する
CSS追記
下記コードをCSSに追記する
span.new {
display: none;
color: red;
font-weight: bold;
}
以上。
参考記事:
■小粋空間: 新着エントリーのあるカテゴリーに New マークをつける [小粋空間]
2006/10/18 06:00:31:記事書き直し