新着記事にNewマーク表示するには、JavaScriptを使う方法が手軽です。
1.JavaScriptを作成
//newmark.js
displayNewMark = function() {
if (!document.getElementsByTagName) return;
// passage time
var passageTime = 168;
// display mark
var mark = 'New';
var currentDate = new Date();
var elements = document.getElementsByTagName('span');
for (var i = 0, len = elements.length; i < len; i++) {
if(elements[i].className == 'new') {
var time = elements[i].firstChild.nodeValue.split(':');
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var currentTime = (entryDate.getTime () - currentDate.getTime())/(60*60*1000);
currentTime = Math.ceil(currentTime);
if(-currentTime <= passageTime){
elements[i].innerHTML = mark;
elements[i].style.display = 'inline';
}
}
}
};2.Newマークを表示する部分のテンプレートを作成
<h2>ブログ最新</h2>
<div class="widget-content">
<ul>
<mt:Entries lastn="5">
<li class="widget-list-item"><a href="<$mt:EntryPermalink$>" title="e<$mt:EntryID$>"><$mt:EntryTitle encode_html="1"$></a>(<$mt:EntryDate format="%b月%d日"$>) <span class="new"><$mt:EntryDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
</mt:Entries>
</ul>
</div>3.head要素内にJavaScriptを記述
<script type="text/javascript" src="http://<$mt:BlogHost$>/script/newmark.js"></script>4.bodyタグ直前でJavaScriptを読み込み
<script type="text/javascript">
//<![CDATA[
displayNewMark();
//]]>
</script>5.スタイルシートの追加
span.new {
background: #fff;
color: red;
display: none;
}以上です。
1.まず次のスクリプトを作りnewmark.jsとして保存
//newmark.js
displayNewMark = function() {
if (!document.getElementsByTagName) return;
// passage time
var passageTime = 168;
// display mark
var mark = 'New';
var currentDate = new Date();
var elements = document.getElementsByTagName('span');
for (var i = 0, len = elements.length; i < len; i++) {
if(elements[i].className == 'new') {
var time = elements[i].firstChild.nodeValue.split(':');
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var currentTime = (entryDate.getTime () - currentDate.getTime())/(60*60*1000);
currentTime = Math.ceil(currentTime);
if(-currentTime <= passageTime){
elements[i].innerHTML = mark;
elements[i].style.display = 'inline';
}
}
}
};2.次にHTMLヘッダーテンプレートに次のタグを追加します。
<script type="text/javascript" src="http://<$mt:BlogHost$>/script/newmark.js"></script>
3.テンプレート中にNewマークを表示させるためのタグを記述します。
<span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span>実例
<ul>
<mt:Entries lastn="5">
<li class="widget-list-item"><a href="<$mt:EntryPermalink$>" title="e<$mt:EntryID$>"><$mt:EntryTitle encode_html="1"$></a>(<$mt:EntryDate format="%b/%d"$>) <span class="new"><$mt:EntryDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
</mt:Entries>
</ul>4.テンプレートの最後の部分に（本サイトでは</body>の直前）にスクリプトを呼び出す記述をします。
<script type="text/javascript">
//<![CDATA[
displayNewMark();
//]]>
</script>5.最後にcssに次のようにスタイルを追加します。
/* New表示用 */
span.new {
background: #fff;
color: red;
font-size: small;
display: none;
}6.まとめ
テンプレートに埋め込んだ日付を<span class="new">で囲み、cssとjavascriptで表示・非表示切り替えているわけです。
コメントする