宮崎ロッド・Prime TimePiggy'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. Dropdown menuを(小)変更
  2. 本家ホームページのレスポンシブ化
  3. レスポンシブWebデザイン・2
  4. レスポンシブWebデザイン・1
  5. 本家日記のメンテナンス
  6. 宮崎ロッドのFacebookページです。
  7. 日記に Facebook のいいね!ボタンを付けてみる
  8. リンクをタブのように見せるCSS
  9. blosxomをアレコレ
  10. 2008年11月の子豚のしっぽ、アクセス・ベスト10

Tags

ATH (7), css (34), delight (25), facebook (46), firefox (15), google (5), html (11), maiking-delight (10), memo (70), netscape (7), NO TRUNKS (8), SEO (8), spam (15), twitter (8), war (11), WE LIVE HERE (11), いろいろ (18), うどん (6), お知らせ (5), つるや釣具店 (10), やきとり (6), イベント (45), イワナ (8), カゲロウ (5), カディス (9), カレー (10), カワゲラ (12), キャス練 (29), ギター (6), クラフト (6), ゲイリー・スナイダー (5), ゲイリー・バートン (6), ジャズ (172), スナップショット (5), スパゲッティ (7), ソウル (20), ソフトウェア (21), ソロー (5), タラノメ (9), チック・コリア (7), ニジマス (7), ハンドクラフト展 (14), バイク (9), バジル (8), バンブーロッド (5), パイプ (5), パット・メセニー (7), ビル・エヴァンス (20), ピアノ (30), フライ (59), フライタイイング (18), フライライン (6), メモ (202), ヤマメ (17), ランディングネット (26), ラーメン (9), リールシート (8), ロッドメイキング (11), 人物 (41), 出来事 (12), 大雪 (5), 奥多摩 (65), 奥多摩川 (32), 小菅川 (80), 小菅川C&R (8), 小菅川冬季ニジマス釣場 (15), 山菜 (6), 新年 (16), 更新 (41), 東京トラウトカントリー (5), (10), 水生昆虫 (12), 渓流フライ教室 (30), (41), 田渕義雄 (6), 矢野シルクライン (7), (22), 読書 (55), 道志川 (6), 選挙 (6), (20), 雑感 (176), 雑誌 (7)