MovableTypeで「Updated Today」を表示する(JS版)

前回のコラムでPHPにより「Updated Today」を表示する方法を紹介しました。
しかし、PHPを使用できない環境の方も多いはず。
JavaScript版も作ってみました。

「Updated Today」とは?という方は当サイトの前回のコラムを参考にしてください。
そちらにPHP版の説明もしてあります。

MovableTypeで「Updated Today」を表示する(PHP版) || Cool Web Window

使用できる環境

・MovableType(バージョンは何でもOKだと思います。)

ただし、JavaScript(以下JSと省略)が有効になってないと表示されません。
無効になっている場合でもエラーが出ないようにはしてあります。

設置方法

1. 更新用のバナーを表示するJSプログラムファイルを作成
直接(x)htmlファイルにJSを書いてもよいのですが、ソースが煩雑になるので、今回は外部ファイルを読み込むカタチを取ります。
「js」というフォルダを作成します。その中に「updated.js」という名前のファイル名を作成し以下のソースコードを記述します。

// term(unit:day)
var term = 3;
 
// display image
var image = '<img src="/image/updated.png" alt="update" />';
 
var currentDate = new Date(); 
var elements = document.getElementsByTagName('div');
for (i = 0; i < elements.length; i++) {
    if(elements[i].getAttribute('id') == 'updated') {
        time = elements[i].childNodes[0].nodeValue.split(":");
        var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
        var now = (currentDate.getTime() - entryDate.getTime())/(24*60*60*1000);
        now = Math.ceil(now);
        if(now <= term){
            elements[i].innerHTML = image;
            elements[i].style.display = 'inline';
        }
    }
}

赤い文字を各自変更してください。
var termの3のところが新規エントリーをしてから何日間バナーを表示するかを決定します。
単位は「日」です。
img src="~"に画像を表示します。

尚、JPソースコードは小粋空間さんのものを参考にしました。ありがとうございました。
小粋空間: 新着エントリーのあるカテゴリーに New マークをつける

画像はcaramel*vanillaさんが素敵なバナーを作られているのでそちらを使用するとよいと思います。
Updated Now プラグインのバナーを作りました | caramel*vanilla

2. (x)htmlファイルに画像ファイルを出力するソースコードを追加
以下のソースを</body>タグの前あたりに入れてください。

<div id="updated">
<MTEntries lastn="1">
<$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>
</MTEntries>
</div>

画像に最新のエントリーへのリンクを貼りたい場合は以下のように書きます。

<div id="updated">
<MTEntries lastn="1">
<a href="<$MTEntryPermalink$>">
<$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$>
</a>
</MTEntries>
</div>

3. (x)htmlファイルに外部JSファイルを読む込むソースコードを追加
以下のソースを上記ソースコード(2. の画像ファイルを出力するソースコード)のに記述してください。
どうやら、エントリー日時を取得した後に実行しないとうまく表示されないようです。

<script type="text/javascript" src="/js/updated.js"></script>

4. CSSファイルに画像を表示する位置を指定するソースコードを追加

div#updated {
position:absolute;
display:none;
top:0;
left:0;
}

絶対配置で、左上に配置します。
また、「display:none;」を指定しないとそのままエントリー日時が表示されてしまうので非表示にします。

以上のようにすれば、最初に(x)htmlファイルを再構築すれば、画像の変更等は外部ファイルで制御するので、その都度再構築する手間は省けます。

投稿日:2007年5月 6日

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top