« キミキス カエル劇場 | トップページ | 一行本紹介 »

2008/01/24

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

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

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

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

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

sidebar_h2c 

sidebar_h2o

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

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

sidebar_h2ch

sidebar_h2oh 

 

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

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

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

|

« キミキス カエル劇場 | トップページ | 一行本紹介 »

おすすめサイト」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

どうでもよいが
 右側の方のはたたまない方がよくないかい?

ゲーマーズカードだの
 AdSenseだのはアピールしたい方のものでしょうに

投稿: 彩里 | 2008/01/26 15:39

終了時点のメニュー開閉状態を
Cookieで保存しているようですよ。
時々機能しないことは愛嬌。

投稿: きょこ | 2008/01/26 17:24

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/49030/17809035

この記事へのトラックバック一覧です: ココログのサイドバーを折り畳んでみた:

« キミキス カエル劇場 | トップページ | 一行本紹介 »