6.39 新着表示 ★
P.573
新着表示の仕組み
<span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S"$></mt:entries></span><span class="new">2008:08:08:12:34:56</span>新着カテゴリ表示を設定する
●新着表示用スクリプトの作成とアップロード
newmark.js
displayNewMark = function() {
if (!document.getElementsByTagName) return;
// passage time
var passageTime = 24;
// 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';
}
}
}
};P.574
●head要素にscript要素を追加
「ヘッダー」テンプレートモジュール
...前略...
<script type="text/javascript" src="<mt:blogURL />newmark.js"></script>
</head>
<body class="<mt:getVar name="page_layout" />"<mt:if name="body_onload"> onload="<mt:getVar name="body_onload" />"</mt:if>>
...後略...★「HTMLヘッダー」テンプレートモジュール（デフォルトテンプレート）
デフォルトテンプレートの場合、「HTMLヘッダー」テンプレートモジュールのCCLicenseRDFタグの直前に、script要素を追加します。
...前略...
<script type="text/javascript" src="<mt:blogURL />newmark.js"></script>
<$mt:CCLicenseRDF$>
...後略...●新着表示用サブテンプレートの追加
「カテゴリアーカイブ」ウィジェットテンプレート（サンプルテンプレート）
...前略...
<mt:topLevelCategories>
<mt:subCatIsFirst><ul></mt:subCatIsFirst>
<mt:if tag="categoryCount">
<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>
</mt:if>
<mt:subCatsRecurse />
</li>
<mt:subCatIsLast></ul></mt:subCatIsLast>
</mt:topLevelCategories>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
displayNewMark();
//]]>
</script>
</dd>
</mt:if>
</mt:ifArchiveTypeEnabled>★「カテゴリアーカイブ」ウィジェットテンプレート（デフォルトテンプレート）
元のテンプレートから006を変更し、019～022を追加しています。処理の流れはサンプルテンプレートと同じです。
...前略...
001: <mt:TopLevelCategories>
002: <mt:SubCatIsFirst>
003: <ul class="widget-list">
004: </mt:SubCatIsFirst>
005: <mt:IfNonZero tag="mt:CategoryCount">
006: <li class="widget-list-item"><a href="<$mt:CategoryArchiveLink$>"<mt:IfNonEmpty tag="mt:CategoryDescription"> title="<$mt:CategoryDescription$>"</mt:IfNonEmpty>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S"$></mt:entries></span>
007: <mt:Else>
008: <li class="widget-list-item"><$mt:CategoryLabel$>
009: </mt:IfNonZero>
010: <$mt:SubCatsRecurse$>
012: </li>
013: <mt:SubCatIsLast>
014: </ul>
015: </mt:SubCatIsLast>
016: </mt:TopLevelCategories>
017: </div>
018:</div>
019:<script type="text/javascript">
020://<![CDATA[
021:displayNewMark();
022://]]>
023:</script>
024:</mt:IfArchiveTypeEnabled>P.575
●スタイルシートの変更
「スタイルシート」インデックステンプレート
...前略...
.new {
display: none; ←日付情報を非表示にします
color: #f00; ←New!!マークの文字色を設定します
}
...後略...「スタイルシート」インデックステンプレート
...前略...
.new {
display: none;
}
...後略...新着対象となる期間を変更する
newmark.js
...前略...
// passage time
var passageTime = 48;
...後略...P.576
更新ブログ記事を新着に含める
<span class="new"><mt:entries lastn="1"><mt:entryModifiedDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>新着マークを画像で表示する
newmark.js
...前略...
// display mark
var mark = '<img src="http://user-domain/newmark.gif" title="新着ブログ記事があります" alt="新着マーク" />';
...後略...●スタイルシートの変更
「スタイルシート」インデックステンプレート
...前略...
.new {
display: none;
vertical-align: middle; ←画像の垂直方向のずれを解消します
}
...後略...●画像のツールチップが文字化けする場合の対処
<script type="text/javascript" src="<mt:blogURL />newmark.js" charset="shift_jis"></script>
