小粋空間  -  a cheap joke and a play on words site

Movable Typeの各リストに新着マークを表示する（jQuery編）

Movable Typeの各リストに新着マークを表示するカスタマイズを紹介します。

これまでの新着表示のカスタマイズはJavaScriptを使っていましたが、今回はjQuery版です。

Movable Typeのリストを表示する各テンプレートもこのエントリーに更新版を掲載しておきます。

これまでこのブログで紹介した新着表示のカスタマイズを使っていて、JavaScriptからjQueryに切り替える場合は３項のカスタマイズのみ行ってください。

１．最新の記事一覧に新着マークを表示する

最新の記事一覧のマークアップは次のとおりです。

<mt:Entries lastn="10">
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <li><a href="<$mt:EntryPermalink$>" title="e<$mt:EntryID$>"><$mt:EntryTitle$></a> <span class="new"><$mt:EntryDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
  <mt:EntriesFooter>
</ul>
  </mt:EntriesFooter>
</mt:Entries>

jQueryは３項に掲載したものをお使いください。

２．サブカテゴリーリストに新着マークを表示する

サブカテゴリーリストのマークアップは次のとおりです。

<mt:SubCategories>
  <mt:SubCatIsFirst>
<ul>
  </mt:SubCatIsFirst>
  <mt:if tag="CategoryCount"></li>
    <li><a href="<$mt:CategoryArchiveLink$>" title="<$mt:CategoryDescription$>"><$mt:CategoryLabel$></a> [<$mt:CategoryCount$>] <span class="new"><mt:Entries lastn="1"><$mt:EntryDate format="%Y:%m:%d:%H:%M:%S"$></mt:Entries></span>
  <mt:Else>
    <li><mt:CategoryLabel></li>
  </mt:if>
  <$mt:SubCatsRecurse$>
</li>
  <mt:SubCatIsLast></ul></mt:SubCatIsLast>
</mt:SubCategories>

jQueryは３項に掲載したものをお使いください。

３．jQuery

新着表示用のjQueryは次のとおりです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
// passage time
var pass = 24;
 
// display content
var content = 'NEW!';
 
var currentDate = new Date(); 
$(function(){
    $('.new').each(function(){
        time = $(this).text().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){
            $(this).html(content).css('display', 'inline');
        }
    });
});
//-->
</script>

このまま利用する場合、新着表示時間は24時間になります。

また新着マークは「NEW!」となります。

４．新着表示時間を変更する

新着表示の時間を変更するには、

// passage time
var pass = 24;

の赤色部分を変更します。単位は時間です（例は24時間）。

５．新着マークを変更する

表示させる内容は

// display content
var content = 'New!!';

の赤色部分を変更してください。

HTMLタグも使用可能なので

var content = '<img src="http://～/hogehoge.gif" style="vertical-align: middle" />';

とすれば画像を表示することもできます。

６．CSS

スタイルシートに下記の設定を追加します。

.new {
    display: none;
    color: red;
    font-weight: bold;
}

displayプロパティで１項・２項のタグに設定したタイムスタンプを非表示にします。

colorプロパティとfont-weightプロパティは、「New!」という文字が表示された場合に適用される設定です。