以前から本アップ待ちのクライアントのMTですが、新着があると「NEW!!」マークをつけてほしいと要望されていました。
先日休みの時に、そういえば以前ブックオフで買ったWebDesigningの2007/5月号 のMovable Typeカスタマイズガイドに設置方法が掲載されていたので見てみました。
この原稿を書いた方は荒木勇次郎さんという、MTをはじめ、各種ブログのテンプレートやカスタマイズ情報を提供している「小粋空間 」に「新着エントリーのあるカテゴリーに New マークをつける 」というエントリーに解説があります。
通常は、カテゴリーや最近のエントリーなどに表示させるのでしょうが、今回はサイトのTOPページにSSIを使って、新着エントリーを表示させているページに設置をします。
1.まず「NEW!!」マークを表示させたい場所、日付けやエントリー名の後に下記のタグを入れます。（青字）
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a>
<span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span>
2.上記タグを設定した各テンプレートの最後の方に下記のスクリプトを追加します。<script type="text/javascript">
<!--
// passage time
var pass = 24; ←ここの数字は表示時間。（単位は時間。ここでは24時間）
// display content
var content = 'New!!';
←ここは表示させる文字を入れます。<IMG>タグで画像も表示できます。
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>
3.最後にCSSの設定です。下記をスタイルシートのテンプレートに貼付けて完了。span.new {
display: none;
color: red;
font-weight: bold;
}
