2008年1月11日 (金曜日)

サイドバーのメニューを折りたたみ式に

 
光丸山法輪寺

前回に引き続き、光丸山法輪寺です。年始とあって屋台も出て賑わっていました。いつもは格子戸の閉まっている天狗堂もこの日は開けられていて前回の写真を撮ることが出来ました。

奥に入ると人出も少なく大きく育った南天が艶やかな紅玉をつけていました。西行桜は茅葺の鐘楼の左手になります。

ブログに関する技術的な記事は主に私の備忘録としてのものです。60を越えると物忘れが多くなり何らかの記述を残して置かないと後が大変です。必要無ければ読み飛ばしてください。
もしブログをカスタマイズされる上で興味をお持ちの方は参考にしていただければ幸いです。

前回に述べた旧ブログからのインポートを行った結果、コメント/トラックバック/月別アーカイブ等の欄が大きくなって、サイドバーが長くなり見づらくなりました。そこで必要な時だけメニューを開けば良いようにカスタマイズしてみました。このカスタマイズはまたまた「小粋空間」さんのサイトからの転用です。

1.主に折りたたみの機能を果たす「menufolder.js」のダウンロードとテキストエディターによる必要な定義変更、そして自分のサーバーへのアップロード

2.「ArchiveDateHeader プラグイン」及び「ArchiveDateFooter プラグイン」のダウンロード及び自分のサーバーのMT配下のpluginフォルダーへのアップロード。これは月別アーカイブの表示をツリー構造にする為のものです。管理画面のプラグインで表示されればアップロード成功です。

3.同じくツリー表示の為のgifファイル2種(実線の場合、tree_lst_solid.gifとtree_end_solid.gif )をダウンロードし、tree_lst.gif及びtree_end.gif とリネームして自分のサーバーにアップロード

4.「ヘッダー」テンプレートモジュールに1項のスクリプトタグの挿入(/headの直前)

5.月別アーカイブのツリー化と折りたたみの為、「サイドバー」テンプレートモジュールに指定の修正を行う。
小粋空間さんの公開テンプレートの場合は、DIV指定に代えてdt/ddタグに折りたたみの為の記述を行う。

6.表示位置及びリストマークを他の項目と同じ表示にする為、ULタグの挿入と、SPANタグに代えてLIタグを指定の修正に加えて挿入する。

7.小粋空間さんの公開テンプレートのCSSに指定の修正を行う。

8.再構築すると月別アーカイブのツリー表示と折りたたみが完成。

9.月別アーカイブ以外の項目について、5項と同様な修正を、「サイドバー」テンプレートモジュール及び「サイドバー2」テンプレートモジュールに対して行う。

10.再構築すると修正を加えた項目の折りたたみ表示が完成。
但し、MAP/AREAタグを使用している部分の折りたたみが出来ないようなので、DIGITAL CAMERA WEBRINGの表示はイメージから文章に変えることにした。

5,6項と10項に係る部分でうまく動作せず解決に時間を要した。

これで大分スッキリした感じです。小粋空間さんには感謝です。
[参照記事]
JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ
サイドメニューの折りたたみ(定義リスト編)

pocket このエントリーをはてなブックマークに追加 ブログランキング 花 にほんブログ村 写真ブログ 風景写真へ

トラックバックURL

このエントリーのトラックバックURL:
https://www.mizunara.com/cgi-bin/mt/mt-tb.cgi/163

コメント[3]

[No.183] タイトル: (無題)

古い記事にコメントを書き込んで申し訳ありません。
月別アーカイブの件,オークさんの今回のすばらしい手直し,特にこの記事の「折りたたみ」に触発されました。

でも,技術力が違いますので,私のは高望みでしょう!

[No.184] タイトル: 私も物まねです

ダメだったようですね。FC2標準のテンプレートならそのまま変更すれば良いと思うのですが。長々と記号ばかりが並んでいますので、場所を探すのも大変ですよね。じっくりと取り組めばなんとかなると思います。

[No.185] タイトル: 出来ました!

オークさんのように《「年」で表示されたの開く》という希望があったのですが,FC2の案内では,そうはならないようです。でも,これでも満足しています。
ご助言,ありがとうございました。

コメントする

ZENBACK

閲覧ありがとうございました