≪ メールフォーム作成 | メイン | 携帯対応 ≫

2006年2月18日

●サイドメニューの折り畳み(開閉)をやってみた。

ちょっと前に追記文章の折り畳みをやりましたが、今度はサイドメニューです。
例えば、検索部分なんて毎回利用する必要なんて無いですよね?
そういったものを折り畳んでおけるというカスタマイズです。
(折り畳んだ履歴は、各ブラウザごとにクッキーか何かで記憶している模様。)

では、毎度毎度の参考記事を。(少しは自分で考えたいけど、まだ能力不足デス。)

#参考記事 (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を折り畳み可能にしてます。
もしも興味ない部分などがありましたら、各タイトル名をクリックすれば折り畳みが可能ですので、どうぞ。
(次回ブラウザ起動時にも、その際のレイアウトでサイト閲覧が可能みたいですので。)

・・・しかし、今回は久しぶりにハマってしまったぜ。

#参考までに、俺のスタイルシート設定の一部を公開します。続きとして書いてありますのでどうぞ~♪
(俺の環境での設定なので、人によってはまた違うかも知れません。あくまで参考ってことで。)

2006年2月11日

●エントリー内の追記文章の折り畳みをやってみた。

さてさて、今回は追記文章の折り畳みをやってみました。
何かというと、エントリー記事内にある『続きを読む』ってヤツありますよね?
クリックするたびに全体を再読込するものだから、面倒だなぁと思っていました。
小粋空間に、追記文章をクリック一つで折り畳めるカスタマイズ記事を見つけたので紹介。

#参考記事(from 小粋空間)
エントリー・アーカイブの追記文章の折りたたみ(改)

いつも通り、最初からそのままなぞって完了。
・・・あはは、まったく自分で考えてないじゃん、俺。orz
(大きなカスタマイズじゃないから、悩む必要性があんまり無いだけだがね。)

この記事をパッと見るとエントリー・アーカイブテンプレートだけ設定すれば良いように見えますが、違います。
当然ですが、月別や日別も同様の設定にしておかないと、そこだけ折り畳みができません罠です。
なので、記事に関係するテンプレート(カレンダーテンプレートは別)には、全てカスタマイズしておきましょう。

あと、メインページにも設定しておかないと、TOPページ上で折り畳みできないので、こちらも忘れずに。(^^

#本当はコメント・トラックバックを折り畳みしようとしましたが、位置取得とページ結合に悩んで断念しました。
 どこかでカスタマイズに成功しているサイトがあれば、教えて下さい。(ぇ