« mixi に関して | トップページ | @nifty の WenMail2.0β が safari に対応 »

2006年10月22日

サイドバーを折畳んでみました。

時々、サイドバーが折畳まれているのを見かけます。

Google 先生に訪ねた所、facet-divers 様が配布して頂いている、サイドバー折り畳み2:状態保持機能付き がメジャーのようですので、利用させて頂きました。設置方法は上記のページに、案内されています。

ポイントして

  • サイドバー折り畳み2:状態保持機能付きにて公開されている、スクリプトを頂いてきます。メモ帳等のエディターにコピーして、判りやすいファイル名で保存します。
  • pattern の項目3カ所を修正します。
  • 1個目の、pattern は、折り畳みたい項目を記載します。半角の "|" にて区切ります。
  • 2個目の、pattern はブログを開いた時に、閉じておきたい項目を記載します。開いたままにした項目は記載しないと言うことです。
  • 3個目の、pattern は、折り畳んだ項目内の記事数を表示する項目を記載します。基本的には1個目の pattern の項目と同じで良いと思います

修正した、スクリプトをココログのマイリストを利用して、ココログ内に設置します。
新規にマイリストをメモで作成します。「リストの名前:」を。表示させない為 <!-- 折り畳みスクリプト --> とそておけば、表示されなくなります。追加の項目から、「メモ:」欄に先ほどの修正したスクリプトをコピー & 貼り付けします。
次に、ブログ、デザインの「表示項目を変更」移動して、【表示項目を変更】で、先ほど作成した <!-- 折り畳みスクリプト --> にチェックを入れます。最後に【並べ方を変更】で、サイドバーの項目で一番最後に設置します。一番最後に設置するのはスクリプトの仕様で、スクリプトの前にある項目が折り畳まれる為です。ですので、スクリプトに折り畳みたい項目を記載しても、サイドバーの始めに設置したり、途中に設置すると折り畳まれない項目が出てきますので注意してください。

設置に関しては、tako 様の 初めてのココログ・カスタマイズ  の、第13回:サイドバーをリストごとに折り畳んでみよう に詳細に案内されていますので、一読をお勧めします。

設置してみての疑問?
マイリストのタイトルで、アンダーラインを表示させるようにしていましたが、<!-- 折り畳みスクリプト --> として、スクリプトを設置した項目はタイトルを表示しないようにしましたが、アンダーラインだけ表示されてしまいます。これは仕様になる為、アンダーラインを表示【させるか】【させないか】の選択になり、スクリプトの設置した項目のタイトルは消せてもアンダーラインを設定している場合は消せません。

折り畳みボタンのカスタマイズ
折り畳んだ項目で、記事の数の表示ですが見辛い。最近細かい文字が読み辛いので何とかしたいと思い、頂いて来たスクリプトを良く読んでみると。

counterStyle = "margin-left:2px;letter-spacing:normal;color:silver;";

の行にで、【color:silver】となっていたので【color:#000000】とすることで黒になりました。

折り畳みボタンのカスタマイズ
折り畳みを開閉するボタンの色を変更したい。 Google 先生に尋ねた所
むいむい星人の寝言 様の サイドバー折り畳みボタンの色変え の記事が参考になりました。

何でも、オリジナルの設計にてボタン類はカスタマイズ出来るようになっているとのことで、まねさせて頂き、

.sidebar h2.folded button {background:#99cc99; color:#ffffff;}
.sidebar h2.unfolded button {background: #cc99cc; color: #ffffff;}

上記の内容を、カスタムCSS 内に記述、反映させることで変更することが出来ました。

具体的には、ブログ、デザインの「カスタムCSSを編集」に入り、上記のスタイルを記載することで、ボタンの色を変えることが出来ました。ちなみに色の指示は、閉じている時の色【background:#99cc99】、開いた時の色【background: #cc99cc】を設定しています。他にも、スタイルは細かく設定出来ます。ボタンの色のカスタマイズに関しては、KOROPPYの本棚 様の りたたみボタンの色を開閉で変える も参考にりました。

サイドバーの折り畳みに関しては、スクリプトの開発、提供して下さっている。facet-divers 様を始め。先達の知識をお借りいたしました。当時はカスタムCSSが利用出来ない時代でしたので、苦労も多かった思いますが、今はカスタムCSSが利用出来ますので楽になりました。ありがとうございました。

サイドバーの折り畳みとユーザビリティ
サイバーの折り畳みに関して、調べていた際にサイドバーを折り畳むことは、ユーザービリティ的に、良くないという意見もありました。確かにクリックをしないと読めないコンテンツは良くないと思います。では今のココログで、サイバーがだらだらと長ければ、ユーザビリティは良いかと言うと、これはこれで問題が有ると思います。どうしてもサイドバーのコンテンツが長くなる為、文字の大きさを小さくして対処している所も見受けられますが、これもどうかと思います。要は如何に使い分けるかがポイントになるのではと思いました。

|

« mixi に関して | トップページ | @nifty の WenMail2.0β が safari に対応 »

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

コメント

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: サイドバーを折畳んでみました。:

« mixi に関して | トップページ | @nifty の WenMail2.0β が safari に対応 »