サイドバーを折りたたみ(完結編)
「BlogPeople」「MyBlogList」や、「ひよこぴーぷる」「さくらりすと」などのメンバーリストで、もともと長かった右サイドバー。
最近は、さらに「MyClip」「アイ・ビー」が加わって、とんでもないことになってしまいました。
もちろんスクロールバーを装着しているのですが、それでもかなりの長さです。
そこで思い出したのが、2度ほど装着して、結局外していたfacet-diversさまのサイドバー折りたたみスクリプト。
最新版はさらに機能UPしているもようですし、
花アイコンとの整合性も取れるんじゃないかと思ってます。
と嬉しいコメントも頂いていたので、遅ればせながら3度目の装着です。
必要なスクリプト2つをDLし、以下のソースをマイリストの最下部に入れました。
URLは、ご自分でアップロードしたファイルに変更してください。
<script type="text/javascript" src="http://xxxx.cocolog-nifty.com/blog/myFunctions01a.js"> </script>
<script type="text/javascript" src="http://xxxxx.cocolog-nifty.com/blog/foldSidebar02a.js"> </script>
<script type="text/javascript">
<!--
foldMark = "-";
unfoldMark = "+";
switchStyle = "padding:0px;margin:0px;width:1.4em;height:1.4em;line-height:1em;text-align:center;float:right;border-style:solid; border-width:1px; border-color:#697497; background:#ecf1fa; font-size:10pt; color:#697497;";
labelStyle = "letter-spacing:0.1em;";
pattern = "アクセス解析|MyblogList|BlogPeople|MyClip|さくらりすと|育児中blog|ひよこぴーぷる|アイ・ビー";
makeSwitchesBy(pattern);
pattern = "アクセス解析|MyblogList|BlogPeople|MyClip|さくらりすと|育児中blog|ひよこぴーぷる|アイ・ビー";
foldContentsBy(pattern);
//-->
</script>
折りたたみボタンのデザインは、検索ボタンとそろえてみました。
折りたたんだところに、桜の花アイコンが並んで、とっても可愛いです♪
【2004.6.25 追記】
折りたたみボタンの開閉で、それぞれ色を変えました。
詳しくは「折りたたみボタンの色を開閉で変える」をご覧ください。
| 固定リンク
「ウェブログ・ココログ関連」カテゴリの記事
- ブクログの本棚をサイドバーに貼り付けてみた (2009.01.18)
- サイドバーの「最近の記事」を、日付別にツリー表示(2007.02.26)
- ココログのサイト内全文検索窓を設置(2005.10.31)
- 特定の記事が保存(再構築)できなかった覚書(2008.04.09)
- CSSでココログの画像をポラロイド風にアレンジ(2006.05.23)
コメント
トラックバック、ありがとうございました。
今、ここをFirefoxで見に来てみたら、タイトル文字は左寄せされて桜アイコンと重なっているわ、妙なカウント数はでているわで、「うわー、こりゃ作り直さなくちゃ」と思ったんですが、IE6やOpera7.23で確認してみるとうまくいっているし、あれ？と思ってスクリプトを見直している間に、Firefoxの方でもうまくスタイルが適応されていました。
「そうか。外部スクリプトを使っているので、ページをリロードしないとうまく反映されないんだったな」と思い出しました。
しかし、原因はそれだけではなかったような感じですね。そう。countItemsBy(pattern);の部分です。この呼び出し関数を使っていると、外部スタイルシートで指定した.sidebar h2へのスタイル指定と干渉して妙なことになってしまうのかなという気がします。
自分でも良く分かっていなかったので、お蔭様でその部分に問題があるのかなということが分かりました。検討しなおしてみようと思います。
それから、countItemsBy(pattern);では、MyblogListやBlogPeopleなど、javascriptを使って動的に作成しているリストはカウントできません。できるといいなと思ったんですが、実現できませんでした。変数countBroadlyは、この点に関しては全くの役立たずです(^^;。
今回のスクリプトは、いろいろカスタマイズできるようにと思って作ったんですが、どうもややこしくなりすぎたようですね。orz
ということで、未完？（笑）
投稿： facet | 2004.04.23 19:20
facetさま、直々にコメントありがとうございます。
私はIEなので、最初からとても綺麗に表示されましたが、
他のブラウザだと上手く行かなかったりするんですね。
＞動的に作成しているリストはカウントできません。
途中でそのことに気がつきまして、
カウント部分のスクリプトは外させていただきました。
スクロールバーを使って全件表示させているので、
厳密な件数の把握も必要ないですし。
でも、他の使い方があるかもしれないので、
facetさんの仰るとおり、できるといいな、とは思います。
＞ということで、未完？（笑）
完結編でありがとうございます! のつもりが、
逆に宿題になってしまったみたいで、すみませ～ん^^;
投稿： KOROPPY | 2004.04.23 20:24
KOROPPYさん、はじめまして。
facetさんのところからファイルをダウンロードして
アップロードしたつもりなんですが、
折りたたみボタンが表示されません[汗]
下のようにしたら成功したんですが
＜script type="text/javascript" src="http://facet.cocolog-nifty.com/divers/myFunctions01a.js">
ＵＲＬを自分でアップロードしたファイルに変更すると
まったくダメなのです。
ファイルマネージャーの
foldSidebar02c.js と myFunctions01a.js
を開くと画面が真っ白で何も表示されてないんですが、
これが間違っているのでしょうか・・・？
foldSidebar02c.js 『 18.6K』 となっているので
開くとなにか文字が出てくるのだと思っていたんですが、
元から白いのでしょうか？
それとも、もっと別な所を間違えているのでしょうか・・？
色々と調べてみたんですが、わかりませんでした[涙]
もしよろしければ、教えてください。
投稿： ブリ子 | 2006.05.21 06:28
【ブリ子さん】
＞ＵＲＬを自分でアップロードしたファイルに変更すると
＞まったくダメなのです。
ソースを拝見しました。
ご自分でアップロードしたファイルのURLが間違っているようです。
ブリ子さんは「blog」フォルダ内ではなく、
ホームの直下にファイルをアップロードされていますね。
正しくは以下のURLになります。
＞開くと画面が真っ白で何も表示されてないんですが、
＞これが間違っているのでしょうか・・・？
このファイルは文字コードがUTF-8なので、
お使いのテキストエディタがUTF-8対応ではないのかも。
もし文字コードを変更できるようであれば、
「UTF-8」に変えてみて下さい。
私はサクラエディタというフリーソフトを利用しています。
こちらですとUTF-8のココログファイルでも表示できますよ。
投稿： KOROPPY | 2006.05.21 09:18
できましたっ(*´д｀*)
ありがとうございます[♪]
本当に助かりました・゜・(つД｀)・゜・
色々といじくったり、調べたりしてましたら
ファイル名の横にリンクマークが付いてることに
今さらながら気づきまして[汗]
そこを押すと、アップロードしたファイルのＵＲＬが
出てくるんですね(ﾉω`*)ﾉ"
KOROPPYさんに教えていただいた通りのＵＲＬに
変更して折りたたみボタン設置した
３時間後に気づきましたヽ(゜ー゜;)ノ
私も本読むの大好きなので、またちょくちょく
お邪魔させていただきます('◇')ゞ
あっサクラエディタをダウンロードしようと思ったんですが
英語だらけで頭がパニック状態になったので
また落ち着いたら・・・・・(´Д⊂
投稿： ブリ子 | 2006.05.23 01:28
【ブリ子さん】
上手くいってよかったですね[♪]
＞そこを押すと、アップロードしたファイルのＵＲＬが
＞出てくるんですね(ﾉω`*)ﾉ"
そうそう、それで確認するのが一番確実ですね。
サクラエディタ、ダウンロードが英語でしたっけ[汗]
DLしてしまえば、日本語のソフトですのでご安心を。
投稿： KOROPPY | 2006.05.23 09:44
こんにちわ、はじめまして！
初心者ながらブログをがんばってカスタマイズしている最中です(;-_-;）
折りたたみボタンの色が変えられるとここで見て
「それなら設置してみたい！」と思い
必要な二つをDLして設置してみたところ・・・
色が変わりません。
私は赤にしたかったので
<script type="text/javascript" src="http://mimi4dogs.cocolog-nifty.com/blog/myFunctions01a.js"> </script>
<script type="text/javascript" src="http://mimi4dogs.cocolog-nifty.com/blog/foldSidebar02a.js"> </script>
<script type="text/javascript">
<!--
foldMark = "-";
unfoldMark = "+";
switchStyle = "padding:0px;margin:0px;width=1.4em;height=1.4em;line-height:1em;text-align:center;float:right;border-style:solid; border-width:1px; border-color:#ｆｆ0000; background:#ecf1fa; font-size:10pt; color:#ｆｆ0000;";
labelStyle = "letter-spacing:0.1em;";
pattern = "最近の記事|最近のコメント|DOG is Amazing!!|Movies";
makeSwitchesBy(pattern);
pattern = "最近のコメント|DOG is Amazing!!|Movies";
foldContentsBy(pattern);
//-->
</script>
としてみたのですが・・・。
何度自分で見直してもわかりません。
お時間ありましたら教えていただけないでしょうか。
今日は丸半日、これに費やしてしまいました・・。。
よろしくお願いします！
投稿： mimi | 2006.09.30 22:39
【mimiさん】
こんにちは。
まず気がついた点を2つほど。
1.「width=1.4em;height=1.4em;」→「width:1.4em;height:1.4em;」
→追記の記事に書いてあるのですが、この2箇所は修正して下さい。
本記事も修正しました。
2.「#ｆｆ0000」→「#fｆ0000」
→「ｆ」が全角なので、半角の「f」に直してください。
＞色が変わりません。
＞私は赤にしたかったので
どの部分を赤にしたいのか分からないのですが、
現状ですと枠線が赤くなっていますね。
ボタン全体を赤くするのであれば、「background」で色を指定します。
「background:#ff0000; color:#000000;」
などとしてみて下さい。
投稿： KOROPPY | 2006.10.01 18:59
出来ました！！！
ご指摘のあった場所を直したらいっぱつで！！！
ありがとうございました！感謝ですｎ(_ _)ｎ
投稿： mimi | 2006.10.01 22:50
【mimiさん】
上手くいったようでよかったです[ハート]
投稿： KOROPPY | 2006.10.02 20:24