Movable Type.net

MTタグ逆引き辞典

期間を指定して自動的に記事にNEWアイコンを表示する

以下の記事では、最新の何件という指定でNEWアイコンを表示する方法を案内していますが、

最新 X 件の記事に NEW をつける

今回は、期間を指定してJQueryとJavaScriptで実現する方法をご紹介します。

テンプレート記述例

まず、jQueryを読み込んでいるのが前提となります。MovableType.netの標準テーマでは利用しているものも多いです。

まず実際に表示させる部分ですが、日付を表示する場所に以下のように記述します。mt:EntryDateで指定して記事の年月日を自動で表示できるようにします。

<time class="new-icon" datetime="<$mt:EntryDate format="%Y-%m-%d"$>"><$mt:EntryDate format="%Y.%m.%d"$></time>

次にfooter等のjQueryファイルを読み込んだ後に、以下のscriptを記述します。

<script>
$(function () {
  $('time.new-icon').each(function(){
    var current = new Date();
    var range_ms = current.getTime() - (14 * 24 * 60 * 60 * 1000);
    var modified = new Date($(this).attr('datetime'));
    var modified_ms = modified.getTime();
    if (range_ms < modified_ms){
      $(this).after('<span class="text-icon">NEW</span>');
    }
  });
});
</script>

「current.getTime() - (14 * 24 * 60 * 60 * 1000);」の14のところが日数になっているので、表示される期間はその部分を書き換えることで変更でいます。

最後に、NEWアイコンにCSSを指定してアイコンらしくします。

span.text-icon {
  display: inline-block;
  background: #df002c;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
  font-size: 0.6em;
  font-weight: bold;
  color: #fff;
  border-radius: 3px;
}

以上でNEWアイコンが表示されるようになります。

使用したMTタグはこちら