アーカイブスを折りたたみ表示に
ドメイン取得を期に日記アプリをblosxomに変更してから半年経ちました。痒いところに手を入れる時間がナカナカ作れなかったのですが今回、サイドバーに表示するアーカイブスをシンプルな見栄えに変更しました。画像下・右が新しいアーカーブ表示で左が以前の状態です。
西暦年の左にある
をクリックするとツリーを開閉することができます。また、2009年分についてはあらかじめツリーが開いた状態にしてあります。

左が旧、右が新しいアーカイブス表示です。
以下、変更箇所のメモ…
(1) Blosxom Plugin: archives
[40行目]
$results .= qq{$indent<li><span class="archives_year"><img src="〜アーカイブス用アイコン画像へのリンク〜" alt="Archives" title="Archives-$year" height="11" width="13" /></span> <a href="$blosxom::url/$year/">$year</a> ($archive{$year}{'count'})\n$indent$indent<ul id="archives-$year">\n};
delete $archive{$year}{'count'};
#40行目の<li>に<span class="archives_year"></span> と <span class="archives_year"><img src="〜アーカイブス用アイコン画像へのリンク〜" alt="Archives" title="Archives-$year" height="11" width="13" /></span>を追加
(2) CSS(追加分)
/* archives icon */
.archives_year
{
vertical-align : middle;
cursor : crosshair;
}
/* open tree */
#archives-2009
{
display : block !important;
}
(3) JavaScript
折りたたみ制御用の外部ファイルを追加
…大体がこんなところです。
blosxom の Plugin: archives で各年度に当たる<li></li>に <a id=""> なリンクが追加されて JavaScript外部ファイルで制御するのですが他にもっとスマートなやり方で同様な表示方法を実現しているウェブサイトがあります。たぶんPerlで Plugin を作っていらっしゃるんだろうなぁ〜、羨ましい。
CSS の display : block !important;(力業w)とかツリーのトグルでアイコンの切替が出来ないとか個人的にも心苦しい箇所がありますがまた時間が出来たら他の方法に変えてみようと思います。
追記:
現時点の Safari と Google Chrome では開閉アイコンが表示されません。
2009-10-10 FIXED:これ、気が付くのにちょっと時間がかかりました。新しく挿入される<span>から見て元からある<span class="archives_year">を display : none; にすればよかったということです。
…が、Internet Explorer 6 と 7 においてアイコンが表示されません。
2009-10-11 FIXED:アイコンのトグルを諦めました。カラの<span>も無くなって少し気分的に楽になった(謎)……[完!]



