新着記事に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;
}

以上です。

関連エントリー