MT: デザイン:

新着エントリのあるカテゴリに"New"マークをつける方法

【概要】
最新のエントリが属するカテゴリに"New"の文字や画像を表示するカスタマイズの紹介です。
※当サイトの右サイドバー「CATEGORIES」参照。

【カスタマイズ手順】
１．"New"を表示したいテンプレート（メインページや個別ページなど）のカテゴリリストの部分に↓を追加。
<span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span>

追加すると↓な感じになります。
<MTCategories> <a href="<$MTCategoryArchiveLink$>"> <$MTCategoryLabel$></a> [<$MTCategoryCount$>] <span class="new"><MTEntries lastn="1"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></MTEntries></span><br /> </MTCategories>

２．上記を設定したテンプレートの最後の方に↓のスクリプトを追加します。
当サイトでは、上記追加部分の直後に追加しています。
<script type="text/javascript"> <!-- // passage time var pass = 48; // display content var content = 'New!!'; 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') { 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>

新着の基準時間は以下の部分を変更します。単位は時間です。（当サイトは48時間）
// passage time var pass = 48;

表示させるマークは以下の部分を変更します。
// display content var content = 'New';

当サイトでは、以下のように変更して画像を表示させています。
// display content var content = '<img src="<$MTBlogURL$>img/n.gif" align="middle"></img>';

３．スタイルシートの設定
スタイルシートに下記の設定を追加し、上記“1項”のタグに設定したタイムスタンプを非表示にします。
それ以外に新着マークを"New"という文字にした場合は、fontの設定も追加してください。（↓は例）
span.new { display: none; color: red; font-weight: bold; }

以上で終了です。

【参考サイト】
小粋空間

【評価】
このエントリの評価は？

【関連記事】
RSSを読み込み表示するCGI
エントリー再構築エラーが絶えない人のための小技－一度に再構築するエントリー数を減らす
エントリをランダムに表示してくれるプラグイン
再構築エラーはもうウンザリ！MT3.2のDBをSQLiteにして解決しよう！
超便利！Ping一括送信機能

コメント (0) | トラックバック(22)

MT: デザイン:

アーカイブのプルダウン化

アーカイブをプルダウン化する方法の紹介です。

【概要】
アーカイブをプルダウン化します。
今回は月別アーカイブのみをプルダウン化しますが、この方法を応用させればいろいろプルダウン化できそうです。

【導入手順】
１．まずは、↓のスクリプトをメインページに追記します。追加場所はどこでもいいらしいのですが、本サイトでは直前に入れました。

<script language="javascript" type="text/javascript"> <!-- function gotoURL(URL){ if(URL!=""){ window.location.href=URL; } } //--> </script>

２．次に「月別アーカイブ」のコードを以下のコードに変更します。

<form name="MonthList"> <select onchange="gotoURL(this.options[this.selectedIndex].value)"> <option value="" selectted>月別アーカイブ</option> <MTArchiveList archive_type="Monthly"> <option value="<$MTArchiveLink$>"><$MTArchiveTitle$></optin> </MTArchiveList> </select> </form>

以上で完了です。

【参考サイト】
Techknow Weblog

【評価】
このエントリの評価は？

【関連記事】
新着エントリのあるカテゴリに"New"マークをつける方法
エントリー再構築エラーが絶えない人のための小技－一度に再構築するエントリー数を減らす
エントリをランダムに表示してくれるプラグイン
再構築エラーはもうウンザリ！MT3.2のDBをSQLiteにして解決しよう！
超便利！Ping一括送信機能

コメント (0) | トラックバック(28)