ありのごとくあつまりて共有テンプレート ari_seoシリーズ更新履歴 と 月別アーカイブ用ナビゲーションメニューのサンプル など。

どのタイプがお好みですか?
[ 関連記事 : 月別アーカイブをコンパクトに表示する方法 ]
[ 関連記事 : カレンダー代用 ナビ付月別アーカイブ ] 
スクリプトOFFの場合でも 全て問題なく機能します。

月別アーカイブ (ari_seoシリーズ対応 サンプルソース)

※この背景部分の ソースは ここ(Web上) で直接編集できます。 (IE,Firefox,Opera,Google Chrome 等 対応)
元の状態に戻すには 「デフォルトに戻す」 ボタンを押すか、ブラウザの更新を押してください。

(通常のアーカイブ)

<!--==========区切り-->
<li>
<a href="./blog-date-<%now_year><%now_month>.html" class="navitop<!--date_area--> this<!--/date_area-->">Archives &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<!--archive-->
<li><a href="<%archive_link>"><%archive_year>年<%archive_month>月(<%archive_count>)</a>
</li>
<!--/archive-->
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->

メニュー上部のところからのリンク (■色文字の部分) は今月の記事へのリンクにしてありますが ./archives.html などでもよいかも。 ちなみに この部分は... 空リンクにするのももったいないから一応入れてあるだけです。

1. スクロールバーを使った アーカイブリスト

<!--==========区切り-->
<li>
<a href="./blog-date-<%now_year><%now_month>.html" class="navitop<!--date_area--> this<!--/date_area-->">Archives &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul style="height:410px; width:200px; overflow:auto; overflow-x:hidden">
<!--archive-->
<li><a href="<%archive_link>"><%archive_year>年<%archive_month>月(<%archive_count>)</a>
</li>
<!--/archive-->
<li><a href="./archives.html">全記事一覧 (サイトマップ)</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->

2. 手書き展開型 アーカイブリスト

<!--==========区切り-->
<li>
<a href="./blog-date-<%now_year><%now_month>.html" class="navitop<!--date_area--> this<!--/date_area-->">Archives &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

<li><a href="./blog-date-200901.html" class="parent"><span class="f_right"> &#187;</span>2009年<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="./blog-date-200912.html">2009年12月(-)</a></li>
<li><a href="./blog-date-200911.html">2009年11月(-)</a></li>
<li><a href="./blog-date-200910.html">2009年10月(-)</a></li>
<li><a href="./blog-date-200909.html">2009年09月(-)</a></li>
<li><a href="./blog-date-200908.html">2009年08月(-)</a></li>
<li><a href="./blog-date-200907.html">2009年07月(-)</a></li>
<li><a href="./blog-date-200906.html">2009年06月(-)</a></li>
<li><a href="./blog-date-200905.html">2009年05月(-)</a></li>
<li><a href="./blog-date-200904.html">2009年04月(-)</a></li>
<li><a href="./blog-date-200903.html">2009年03月(-)</a></li>
<li><a href="./blog-date-200902.html">2009年02月(-)</a></li>
<li><a href="./blog-date-200901.html">2009年01月(-)</a></li>

</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="./blog-date-200801.html" class="parent"><span class="f_right"> &#187;</span>2008年<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="./blog-date-200812.html">2008年12月(-)</a></li>
<li><a href="./blog-date-200811.html">2008年11月(-)</a></li>
<li><a href="./blog-date-200810.html">2008年10月(-)</a></li>
<li><a href="./blog-date-200809.html">2008年09月(-)</a></li>
<li><a href="./blog-date-200808.html">2008年08月(-)</a></li>
<li><a href="./blog-date-200807.html">2008年07月(-)</a></li>
<li><a href="./blog-date-200806.html">2008年06月(-)</a></li>
<li><a href="./blog-date-200805.html">2008年05月(-)</a></li>
<li><a href="./blog-date-200804.html">2008年04月(-)</a></li>
<li><a href="./blog-date-200803.html">2008年03月(-)</a></li>
<li><a href="./blog-date-200802.html">2008年02月(-)</a></li>
<li><a href="./blog-date-200801.html">2008年01月(-)</a></li>

</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="./archives.html">全記事一覧 (サイトマップ)</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->

3. 自動折りたたみ アーカイブリスト

<head> ~ </head> 部分に ↓赤文字部分 を追加

<script type="text/javascript" src="http://blog-imgs-35.fc2.com/a/r/i/arinogotokuatumarite/more_list.js"></script>
<!--not_index_area--><!--not_permanent_area--><!--not_titlelist_area--><!--not_edit_area-->
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/a/r/i/arinogotokuatumarite/t_more.js"></script>
<!--/not_edit_area--><!--/not_titlelist_area--><!--/not_permanent_area--><!--/not_index_area-->

ナビゲーションメニュー部分

<!--==========区切り-->
<li>
<a href="./blog-date-<%now_year><%now_month>.html" class="navitop<!--date_area--> this<!--/date_area-->">Archives &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul id="nav_archive">
<!--archive-->
<li><a href="<%archive_link>"><%archive_year>年<%archive_month>月(<%archive_count>)</a>
</li>
<!--/archive-->
<li><a href="./archives.html">全記事一覧 (サイトマップ)</a></li>
</ul><script type="text/javascript">
morelist( "nav_archive" , 10 );

</script><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->

3. 自動折りたたみ 最近のコメントリストへの応用 (※IE6以下の場合、通常の表示になります)

<!--==========区切り-->
<li>
<a href="./?xml&comment" class="navitop" target="_blank">Comments &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul id="nav_rcomment">
<!--rcomment-->
<li>
<a href="<%rcomment_link>#comment<%rcomment_no>"><%rcomment_month>/<%rcomment_day> <%rcomment_name><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="<%rcomment_link>"><span class="sentence"><span><%rcomment_title></span><%rcomment_body> …</span><br />親記事 「<%rcomment_etitle>」 へ</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--/rcomment-->
<li><a href="./?xml&comment" title="コメントのRSSフィード" target="_blank">Comment RSS</a></li>
</ul><!--[if gte IE 7]><script type="text/javascript">
morelist( "nav_rcomment" , 14 );
</script>
<!--<![endif]--><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->

コメントリストの場合は 右のリスト(コメント冒頭 表示部分)も含めて数えるので、14 の場合は コメント 7件 を最初に表示するようになります。 例えば、コメントの多いサイトなどで、 最新コメントの表示件数 を20件ぐらいに増やして、最初は10件 → クリックすると残りの10件も表示 なんていう使い方も面白いかも。。。 ※IE6以下の場合、(エラー回避のため) スクリプトは読み込ませず、通常の表示のまま になるようにしてあります。

4. 手書き折りたたみ アーカイブリスト

<!--==========区切り-->
<script type="text/javascript">
// <![CDATA[
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
// ]]>
</script>

<li>
<a href="./blog-date-<%now_year><%now_month>.html" class="navitop<!--date_area--> this<!--/date_area-->">Archives &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>

<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen1"><li><a class="parent" href="#" title="開く" onclick="showPlagin(1); return false;"><span class="f_right">↓ open</span>2009年</a></li></div>');
document.write('<div id="PlagClose1" style="display:none">');
document.write('<li style="width:200px"><a class="parent" href="#" title="閉じる" onclick="showPlagin(1); return false;"><span class="f_right">close</span>2009年</a></li>');
// ]]>
</script>
<li><a href="./blog-date-200912.html">2009年12月(-)</a></li>
<li><a href="./blog-date-200911.html">2009年11月(-)</a></li>
<li><a href="./blog-date-200910.html">2009年10月(-)</a></li>
<li><a href="./blog-date-200909.html">2009年09月(-)</a></li>
<li><a href="./blog-date-200908.html">2009年08月(-)</a></li>
<li><a href="./blog-date-200907.html">2009年07月(-)</a></li>
<li><a href="./blog-date-200906.html">2009年06月(-)</a></li>
<li><a href="./blog-date-200905.html">2009年05月(-)</a></li>
<li><a href="./blog-date-200904.html">2009年04月(-)</a></li>
<li><a href="./blog-date-200903.html">2009年03月(-)</a></li>
<li><a href="./blog-date-200902.html">2009年02月(-)</a></li>
<li><a href="./blog-date-200901.html">2009年01月(-)</a></li>

<script type="text/javascript">
// <![CDATA[
document.write('</div>');
// ]]>
</script>

<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen2"><li><a class="parent" href="#" title="開く" onclick="showPlagin(2); return false;"><span class="f_right">↓ open</span>2008年</a></li></div>');
document.write('<div id="PlagClose2" style="display:none">');
document.write('<li style="width:200px"><a class="parent" href="#" title="閉じる" onclick="showPlagin(2); return false;"><span class="f_right">close</span>2008年</a></li>');
// ]]>
</script>
<li><a href="./blog-date-200812.html">2008年12月(-)</a></li>
<li><a href="./blog-date-200811.html">2008年11月(-)</a></li>
<li><a href="./blog-date-200810.html">2008年10月(-)</a></li>
<li><a href="./blog-date-200809.html">2008年09月(-)</a></li>
<li><a href="./blog-date-200808.html">2008年08月(-)</a></li>
<li><a href="./blog-date-200807.html">2008年07月(-)</a></li>
<li><a href="./blog-date-200806.html">2008年06月(-)</a></li>
<li><a href="./blog-date-200805.html">2008年05月(-)</a></li>
<li><a href="./blog-date-200804.html">2008年04月(-)</a></li>
<li><a href="./blog-date-200803.html">2008年03月(-)</a></li>
<li><a href="./blog-date-200802.html">2008年02月(-)</a></li>
<li><a href="./blog-date-200801.html">2008年01月(-)</a></li>

<script type="text/javascript">
// <![CDATA[
document.write('</div>');
// ]]>
</script>

<li><a href="./archives.html">全記事一覧 (サイトマップ)</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--==========区切り-->