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

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

Posted at June 23,2015 12:55 AM
Tag:[Customize, jQuery, MovableType]

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

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

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

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

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

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

<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は3項に掲載したものをお使いください。

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

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

<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は3項に掲載したものをお使いください。

3.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!」となります。

4.新着表示時間を変更する

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

// passage time
var pass = 24;

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

5.新着マークを変更する

表示させる内容は

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

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

HTMLタグも使用可能なので

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

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

6.CSS

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

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)