宮崎ロッド・Prime TimePiggy's Tail

Piggy's Tail

宮崎ロッドの日記、メモ、その他

アーカイブスを折りたたみ表示に 2009-10-09 - Web関連 » miyazaki-rod.com, , ,

ドメイン取得を期に日記アプリを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 | English | Permalink | 

このカテゴリ [ Web関連 » miyazaki-rod.com ] の他の日記、メモなど:

  1. Dropdown menuを(小)変更
  2. 本家ホームページのレスポンシブ化
  3. レスポンシブWebデザイン・2
  4. レスポンシブWebデザイン・1
  5. 本家日記のメンテナンス
  6. 宮崎ロッドのFacebookページです。
  7. 日記に Facebook のいいね!ボタンを付けてみる
  8. リンクをタブのように見せるCSS
  9. blosxomをアレコレ
  10. 2008年11月の子豚のしっぽ、アクセス・ベスト10
  11. 印刷用スタイルシートを追加
  12. スタイルシートを微調整
  13. 過去の日記を再構築中
  14. 子豚のしっぽの動きを止めてみる
  15. Safari 3 Public Beta For Windows XP のスクリーンショットを追加

Tag cloud://///////Tap here/////////

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


Piggy's Tail (sitemap.xml) - Miyazaki Rod Prime Time Bamboo Rod
© Design & Build by "Prime Time"