宮崎ロッド・Prime Time バンブーロッドPiggy's Tail

2009-10-09

アーカイブスを折りたたみ表示に

ドメイン取得を期に日記アプリを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)とかツリーのトグルでアイコンの切替が出来ないとか個人的にも心苦しい箇所がありますがまた時間が出来たら他の方法に変えてみようと思います。

追記:

現時点の SafariGoogle Chromeは開閉アイコンが表示されません。

2009-10-10 FIXED:これ、気が付くのにちょっと時間がかかりました。新しく挿入される<span>から見て元からある<span class="archives_year">を display : none; にすればよかったということです。

、Internet Explorer 6 と 7 においてアイコンが表示されません。

2009-10-11 FIXED:アイコンのトグルを諦めました。カラの<span>も無くなって少し気分的に楽になった(謎)……[完!]

Posted by TM* at 2009-10-09 06:37 in Web関連 » miyazaki-rod.com | English | Permalink | 
Tagged as: , ,

このカテゴリ以下の他の日記、メモなど

  1. リンクをタブのように見せるCSS
  2. blosxomをアレコレ
  3. 2008年11月の子豚のしっぽ、アクセス・ベスト10
  4. 印刷用スタイルシートを追加
  5. スタイルシートを微調整
  6. 過去の日記を再構築中
  7. 子豚のしっぽの動きを止めてみる
  8. Safari 3 Public Beta For Windows XP のスクリーンショットを追加
  9. 子豚ページのアップデート
  10. スタイルシートの切替えで更新した箇所を表示する