2013/10/03

MovableTypeで3日以内に投稿された記事に新着マークを付ける方法

MovableTypeで3日以内に投稿された記事に新着マークを付ける方法

MovableTypeで3日以内に投稿された記事に新着マークを付ける方法をご紹介します。

3日以内に投稿された記事にNEWマークをつけ、3日以降は自動的にNEWマークが消えるように設定します。ブログやお知らせなど更新状況を知らせる大事な指標になりますので設定しておきましょう。

サンプルコード

弊社ブログのアーカイブページを例に説明していきます。

HTML

<div class="infoTopText">
	<p><$mt:EntryDate format="%Y/%m/%d"$></p>
	<span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span>
        <p class="writer">by <$MTAuthorDisplayName$></p>
	<h1><$mt:EntryTitle$></h1>
</div>

出力する時刻のフォーマットを指定します。

  • %Y = "西暦"4桁(2013)
  • %m = "月"2桁(10)
  • %d = "日"2桁(03)
  • %H = "時"24時間形式2桁(19)
  • %M = "分"2桁(01)
  • %S = "秒"2桁(00)

時刻のフォーマットに関してはこちら

CSS

CSSでdisplay:none;を指定しておきます。

span.new {
	display: none;
}

JavaScript

投稿の日付を読み取って新着マークを付与するためのJavaScriptを記述します。body内のどこかに記入して下さい。

<script>
// 経過時間(何時間以内の記事に付与するか)
var pass = 72;
 
// 付与する文字
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") {
        if (spans[i].childNodes[0]) {
            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>

2行目と5行目で何時間以内の投稿に何を付与するかを設定しています。

// 経過時間(何時間以内の記事に付与するか)
var pass = 72;
 
// 付与する文字
var content = "NEW";

現在の時間を取得し、3日以内に投稿された記事のclass名「new」が付いているタグにdisplay="inline"を挿入するようになっています。

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") {
        if (spans[i].childNodes[0]) {
            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";
            }
        }
    }
}

これで3日以内に投稿された記事に新着マークを付与することが出来ます。

まとめ

MovableTypeでというよりはJavaScriptで判断して新着マークを付与しています。そのおかげで再構築をしなくても指定した時間が過ぎれば新着マークは勝手に消えてくれます。