新着記事にNewマーク表示
新着記事にNewマーク表示するには、JavaScriptを使う方法が手軽です。
1.JavaScriptを作成
//newmark.js
displayNewMark = function() {
if (!document.getElementsByTagName) return;
// passage time
var passageTime = 168;
// display mark
var mark = 'New';
var currentDate = new Date();
var elements = document.getElementsByTagName('span');
for (var i = 0, len = elements.length; i < len; i++) {
if(elements[i].className == 'new') {
var time = elements[i].firstChild.nodeValue.split(':');
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var currentTime = (entryDate.getTime () - currentDate.getTime())/(60*60*1000);
currentTime = Math.ceil(currentTime);
if(-currentTime <= passageTime){
elements[i].innerHTML = mark;
elements[i].style.display = 'inline';
}
}
}
};
2.Newマークを表示する部分のテンプレートを作成
<h2>ブログ最新</h2>
<div class="widget-content">
<ul>
<mt:Entries lastn="5">
<li class="widget-list-item"><a href="<$mt:EntryPermalink$>" title="e<$mt:EntryID$>"><$mt:EntryTitle encode_html="1"$></a>(<$mt:EntryDate format="%b月%d日"$>) <span class="new"><$mt:EntryDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
</mt:Entries>
</ul>
</div>
3.head要素内にJavaScriptを記述
<script type="text/javascript" src="http://<$mt:BlogHost$>/script/newmark.js"></script>
4.bodyタグ直前でJavaScriptを読み込み
<script type="text/javascript">
//<![CDATA[
displayNewMark();
//]]>
</script>
5.スタイルシートの追加
span.new {
background: #fff;
color: red;
display: none;
}
以上です。
コメント