<< 新着表示 | Main | 最近のコメント >>
Top ＞ Movable Type ＞ カスタマイズ ＞ 最近のエントリー [全て開く]
2007年5月28日

「最近のエントリー」に経過日数を表示する

May 28,2007 1:20 AM
Tag：[, , ]
Permalink

「最近のエントリー」の各エントリーの右側に「X日前」という経過日数をするカスタマイズです。

経過日数を表示したエントリーリスト

指定した経過日数を超えたエントリーに対し、任意のテキストをエントリーリスト横に表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。

動作はエントリーの投稿時間を span で予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算し、テキストに置き換えて表示するという仕組みです。

Windows2000/XPのIE6/7・Firefox2.0・Opera9.0で動作確認しています。また XHTML1.0 valid です。

なお、本カスタマイズは以前ご要望を頂いていたもので、公開が大変遅くなりましたこと、この場をお借りしてお詫び申しあげます。

１．テンプレートの修正

「最近のエントリー」にテキストを表示したいテンプレートに、span 要素（青色部分）を追加します。

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
      <ul class="module-list">
      <MTEntries lastn="10">
         <li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a> <span class="new"><$MTEntryDate format="%Y:%m:%d:%H:%M:%S"$></span></li>
      </MTEntries>
      </ul>
      <a href="<$MTBlogURL$>atom.xml">このブログのフィードを取得</a><br />
      [<a href="http://www.sixapart.jp/about/feeds">フィードとは</a>]
   </div>
</div>

２．スクリプトの追加

１項と同じテンプレートについて、body 要素の終了タグの直前に、下記のスクリプトを追加します。

<script type="text/javascript">
//<![CDATA[
// passage day
var pass = 1;
 
// display content
var content = '日前';
  
var currentDate = new Date(); 
var spans = document.getElementsByTagName('span');
for (i = 0, len = spans.length; len > i; 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/24);
        if (-now > (pass - 1)) {
            spans[i].innerHTML = -now + content;
            spans[i].style.display = 'inline';
        }
    }
}
//]]>
</script>

３．CSS設定

スタイルシートに下記の設定を追加します。

span.new {
    display: none;
    color: red;
}

最初の display プロパティで１項の要素に設定したタイムスタンプを非表示にします。その下の color プロパティは、「X日前」という文字が表示された場合に適用される設定です。

４．表示開始日数を変更する

表示開始日数を変更するには、

// passage time
var pass = 1;

の赤色部分の値を変更してください。

デフォルトの「1」は、投稿後1日経過分からのエントリーが表示対象となります。「10」にすると10日経過したものから表示対象になります。
数字は必ず半角文字で設定してください。

５．表示文字列を変更する

表示内容を変更するには、

// display content
var content = '日前';

の赤色部分を変更してください。

Comments [0] | Trackbacks [0]
2006年11月28日

サイドメニューの一部を折りたたむ

November 28,2006 2:36 AM
Tag：[, ]
Permalink

ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。

本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは Movable Type です。

下のスクリーンショットは「最近のエントリー」を折りたたんでみた完成イメージです。

折りたたみ用のリンクについては、リストのタイトル部分をリンクにする代わりに、リストの一番下に「続きを読む」のリンクを表示する方式にしています。この方がユーザビリティ上好ましいと思われるためです。

このカスタマイズは以前頂いたご質問のひとつで、実現困難ということでうやむやにしてしまってましたが、先日公開された Counter プラグインを用いることで可能になりました。

１．Counter プラグインの設定

Counter プラグインを Movable Type にインストールしてください。プラグインの詳細は配布サイトまたは Counter プラグインの記事をご覧ください。

２．スクリプトの追加

「追記文章の折りたたみ」で利用しているリスト2.1 のスクリプトを <head> ～ </head> の間（できれば </head> の直前）に設定します。または前後の script 要素を削除して、外部ファイル（showhide.js とか）にしても構いません。

お詫び：リスト 2.1 が正常に表示されておりませんでしたので、修正致しました。

すでに「追記文章の折りたたみ」のカスタマイズを行っている場合は本項をスキップしてください。

リスト 2.1　追記文章の折りたたみ用スクリプト

<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
  extTextDivID = ('Text' + (entryID));
  extLinkDivID = ('Link' + (entryID));
    if( document.getElementById ) {
    if( document.getElementById(extTextDivID).style.display ) {
      if( entryLink != 0 ) {
        document.getElementById(extTextDivID).style.display = "block";
        document.getElementById(extLinkDivID).style.display = "none";
        htmlObj.blur();
      } else { 
        document.getElementById(extTextDivID).style.display = "none";
        document.getElementById(extLinkDivID).style.display = "block";
      }
    } else {
      location.href = entryLink;
      return true;
    }
  } else {
    location.href = entryLink;
    return true;
  }
}
</script>

３．部分折りたたみ用メニューを設定する

部分折りたたみ用メニューを表示したいテンプレートに、リスト 3.1 ～リスト 3.4 のお好きなリストを追加してください。表示するリスト数を変更する方法については５項をご覧ください。

３．１ 最近のエントリー

リスト 3.1　「最近のエントリー」用MTタグ

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

３．２ 最近のコメント

リスト 3.2　「最近のコメント」用MTタグ

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="30" recently_commented_on="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkComment">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Comment','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextComment" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Comment',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTEntryLink$>"><MTEntryTitle></a><ul>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments></ul></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

３．３ 最近のトラックバック

リスト 3.3　「最近のトラックバック」用MTタグ

<div class="sidetitle">
Recent Trackbacks
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTPings lastn="10">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkTrackback">
<a href="javascript:void(0)" name="<$MTPingID pad="1"$>" onclick="showHide('Trackback','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextTrackback" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Trackback',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>

３．４ 月別アーカイブリスト

月別アーカイブリストは表示月数を制御することができないため、サイト運営が長くなるにしたがってリストが長大になります。そのためリスト全体の折りたたみや、年毎の折りたたみ等を行う訳ですが、この技を使えば「最新×ヶ月分だけを表示」というコンパクトな表示が可能になります。
月が替わり、新しい月でエントリー投稿があった場合、表示月が更新されます。

リスト 3.4　「月別アーカイブリスト」用MTタグ

<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side">
<MTCounter>
<ul>
<MTArchiveList archive_type="Monthly">
<$MTCounterPlus$>
 
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkMonthly">
<a href="javascript:void(0)" onclick="showHide('Monthly','<$MTBlogURL$>',this);return false;">続きを読む &#8811;</a>
</div>
<div id="TextMonthly" style="display: none">
<div class="list_more"><a href="javascript:void(0)" onclick="showHide('Monthly',0,this);return false;">&#8810; 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
 
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>

４．CSS設定

「続きを読む ≫」および「≪ 続きを隠す」のリンクに class 属性 "list_more" を設定してますので、適宜お好みのプロパティを追加してください。ここではリスト 4.1 のように margin プロパティで上下のマージンのみを設定しています。

リスト 4.1　CSS

.list_more {
   margin:5px 0;
}

５．表示数を変更する

リスト 5.1 の下記の赤色部分を変更してください。

リスト 5.1　表示数を変更する場合の変更箇所

　　　　　　：
<MTCounterIfEqual value="6">
　　　　　　：
　　　　　（略）
　　　　　　：
<MTCounterIfMore value="5"></div></MTCounterIfMore>
　　　　　　：

「上方に表示されている数字 - 1」がデフォルトで表示される数になります。下方の数字は上の数字から -1 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。

Comments [14] | Trackbacks [1]
2005年2月11日

「最近のエントリー」の日別表示

February 11,2005 1:50 PM
Tag：[, , , , , ]
Permalink

公開テンプレートの「Recent Entries（最近のエントリー）」というタイトルのメニューリストは、デフォルト状態では直近の10エントリーを単純に並べて表示するだけです。ここではこれを日別に分割して表示するためのカスタマイズをご紹介致します。

「最近のエントリー」の日別表示

カスタマイズ方法ですが、各テンプレートにある「Recent Entries」を表示するMTタグの該当部分について、下記のように青色部分を追加します。修正後のリストは元記事からの引用です。

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<MTDateHeader>
<$MTEntryDate format="%m/%d"$><br />
</MTDateHeader>
└ <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

MTEntryDateのformat属性は "mm/dd"（例えば02/11）と表示されるように設定しています。この部分の修正で日付表示を変更することができます。フォーマットの詳細はユーザー・マニュアル：日付タグのフォーマットをごらんください。

先日投稿したサイドメニューのツリー化スクリプトに対応させる場合は下記をご利用ください。

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTEntries>
</div>

最初のリストとの主な変更点を青色で示しています。リスト表示用HTMLタグへの変更と、同日の複数エントリーを構造化する時に利用するMTDateFooterタグを加えています。div タグの id 属性は必要に応じて適宜追加してください。

Comments [21] | Trackbacks [10]
Now loading...
Introduction
List of "最近のエントリー"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site
loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12