ココログのサイドバーを折り畳んでみた

同じくココログの住人facet氏のBlog「facet-drivers」では、
ココログのカスタマイズ記事が非常に面白いです。

Blogの特性上、メニューが煩雑になりがち。
どうにかしてすっきりできないかと思っていたところ、
メニューを折り畳むカスタマイズが公開されていました。

動きとしては単純なもので、
DIVレイヤの表示・非表示を制御しているだけです。
とはいえ作るとなると面倒なので非常に助かりました。

メニューが開閉できる事をオペレータに知らせる為
公式ではボタンを表示させています。
しかし、どうも陰影がはっきりした角ばったデザインは、
うちのサイトにはあわないかなと思いました。
そこで下記のような矢印付の背景画像を用意してみました。

 

またCSSで、cursor:pointerを設定する事で、
メニューにマウスオーバーした際、
カーソルを手の形に変えるようにしました。
カーソルが変わると、オペレータの注意を惹きますしね。

加えて、IE以外（厳密にはIE6以前）では、
hover時に以下の画像を用い、ハイライトしています。

 

実際のスクリプトの実装方法は、
facetさんのサイトを参考してください。
意外と簡単に実装できちゃいますよ。

画像変更方法は、うちのCSSを参考してみるといいかも。
そんな難しいことはしていませんので、
CSS知らない方でも、なんとなく判るかと思います。

ココログハックは意外と面白いですね。
あまりやりすぎるとココログ依存になりすぎて、
いざというときにココログから移行できなくなりそうですが＾＾；