●新着エントリーのあるカテゴリーに New マークをつける
小粋空間さんの、新着エントリーのあるカテゴリーに New マークをつけるというエントリーを見て、サブカテゴリーリストにやってみることにしました。
JavaScriptで書かれているので、テンプレート、スタイルシートに書き加えるだけのお手軽カスタムです。
サブカテゴリーリスト(赤字の部分を追加)<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTSubCategories>
<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 max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
<!-- サブカテゴリー用 -->
スクリプトの追加(追加したいテンプレートの下方、「</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>※var pass = 24;の赤字(24)は、新着表示の時間。任意の数字の変更できます。
※var content = 'New!!';の赤字(New!!)は、表示させる内容です。
HTMLタグも使用できるので、画像の表示も可能です
例) var content = '<img src="http://～/hogehoge.gif" style="vertical-align: middle" />';※ time = spans[i].childNodes[0].nodeValue.split(":");
の青字は、
time = spans[i].innerHTML.split(":");
に修正します。(詳細は下記にて)
CSSの設定span.new {
display: none;
color: red;
font-weight: bold;
}
これで、新着記事のあるカテゴリーは、リストに「NEW」表示ができるはずだったのですが、CSSの「 display: none;」で非表示設定になっているはずのタイムスタンプが表示され、「NEW」の文字が表示されません。
色々調べてみたところ、New マーク表示カスタマイズ改善のお知らせという記事を発見しました。
スクリプトに訂正があったようで、記事に従ってスクリプトを修正したところ(青字部分)、タイムスタンプは表示されず、無事に「NEW」の文字を拝むことができるようになりました。
スクリプトの修正<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].innerHTML.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>