●サイドメニューの折り畳み(開閉)をやってみた。
ちょっと前に追記文章の折り畳みをやりましたが、今度はサイドメニューです。
例えば、検索部分なんて毎回利用する必要なんて無いですよね？
そういったものを折り畳んでおけるというカスタマイズです。
(折り畳んだ履歴は、各ブラウザごとにクッキーか何かで記憶している模様。)
では、毎度毎度の参考記事を。(少しは自分で考えたいけど、まだ能力不足デス。)
＃参考記事 (from 小粋空間)
サイドメニューの折りたたみ（Ver4.0）
(Ver5.0が公開されていますが、Ver4.0のカスタマイズをした前提になるので。)
てことで、いつものようにそのとおりに設定し、スタイルシートとテンプレートも修正して更新！
さぁどんな感じに・・・って、サイドメニューの各タイトルが消えてる！！
えっ？ えっ？ 何がどうなったの？
と思ったら、実は真っ白な状態で表示されているだけでした。しかし、何故こうなったのだろう・・・。
実は、参考記事を本当にそのままコピーすると、多分こうなります。(^^;
理由は、サイドメニューの各タイトルの初期背景色・文字色の記述が書かれていないからと思います。
つまり、スタイルシート追加時に『.sidetitle2』の各種中身を、自分用に編集する必要があるわけなんですね。
考えるのも面倒なので、元々設定してある『.sidetitle』の中身をそのままコピーして設定してみる。
今度こそ・・・っと思ったら、次はボックス内に枠線が出てきて、その中にタイトルが入っちゃった。(;´Д`)
うぅむ、なかなか手強いぞ。俺のいったい何がいけないって言うの！！
(以下、冬もマシンガンに続く・・・。)
悪戦苦闘すること2時間。とりあえず、解決できました。(^^A
結果として、『.sidetitle2』の中身は、ほぼ『.sidetitle』と同じで構わないようです。
ただし、両方とも"paddng"の記述を消しておきます。
これがボックス内に枠線を出したりする原因に、俺はなっていました。
あと、『.sidetitle2 a:visted』『.sidetitle2 a:hover』の中身には、"margin"や"paddng"を設定しないようにします。
そうそう、"boder"も削除対象です。枠線が二重に表示されて変になるので。
こうしておくと、"java script"が有効ではない場合にも、通常通りサイドメニューのタイトルを表示できました。
良し、レイアウト的なことはバッチリできた。ついでだからスタイルシートの各種設定も微調整しておく。
では、そろそろ折り畳みを検証してみるか！
・・・あれ？ マウスをポインタするとリンク用の色に変わるのに、折り畳みが実行できない？orz
多分、参考記事だけを読んだ場合、陥りやすい現象でしょうね。
これは、menufolder.jsの設定・設置がしっかりできていないせいです。
設定・設置に関しては、別のページで詳しく説明されていたのです。
(困って調べていると、誰かの質問コメントの回答として書いてありました。)
＃参考記事 (from 小粋空間)
menufolder.js マニュアル
この記事の最後に、起動方法として設定・設置の説明があります。いやぁ、下までキッチリ見てませんでした。（ぉ
("java script"なのに、埋め込みに関する説明が無い時点でおかしいと思ったんだよなぁ・・・。)
とりあえず、この記事通りに設定・設置すると、無事に動きました！！
おぉ、これで閲覧者側でレイアウトを多少変更できるぞ～～～♪
当blogでは、Recent Entries、Counter、Search this site、Categories、Monthly Archivesを折り畳み可能にしてます。
もしも興味ない部分などがありましたら、各タイトル名をクリックすれば折り畳みが可能ですので、どうぞ。
(次回ブラウザ起動時にも、その際のレイアウトでサイト閲覧が可能みたいですので。)
・・・しかし、今回は久しぶりにハマってしまったぜ。
＃参考までに、俺のスタイルシート設定の一部を公開します。続きとして書いてありますのでどうぞ～♪
(俺の環境での設定なので、人によってはまた違うかも知れません。あくまで参考ってことで。)
