出来事etcをつづっています。方へ目次なんでも掲示板画像掲示板ブログペットキリぺた帳検索トップ--年--月--日スポンサーサイト上記の広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。この記事のURL2007年01月19日サイドメニューの折りたたみの設定いつの間にか、ここのブログもサイドバーに色々設置していて、全部を見るためには大きくスクロールしなきゃいけなくなっていました。そこで、この記事のカスタマイズでサイドメニューをそれぞれ折りたたみできるようにしました。右サイドバーのメニューのタイトルをクリックすれば、そのメニューを折りたたむことができます。折りたたんであるメニューは開くことができます。これで、ここの右サイドバーもすっきりしました。サイドバーを折りたたみを参考にさせていただきました。ダウンロードからmenufolder.jsをダウンロードしましょう。保存するときの名前はmenufolder.jsのままにしておいてください。そのファイルをアップロードします。※なお、menufolder.jsについては、様々な設定がありますが、yozoはダウンロードしたままを使用させていただいています。HTML編集画面で、<head>?</head>の一番下にインクルード文を追加しましょう。続けてHTML編集画面で、折りたたみさせたいメニューの1つだけに、下のような設定をします。この例は小粋空間様のテンプレートでの設定になっています。1つのメニューでまずはテストして、成功してから、残りのメニューも同様に設定することをおすすめします。class="sidetitle">のclass名をここではsidetitle2に変更しました。この設定をしたメニュータイトルが折りたたみのボタンとなります。id名はタイトルには☆☆nameを、内容には☆☆listを追加します。3箇所の☆☆はメニューごとに重複しないように設定してください。実行スクリプトのoffは、はじめに折りたたんでおく設定です。これをonにすると、はじめからメニューが表示される設定になります。?ボタンとなるメニューのタイトルのCSSを設定します。折りたたみで表示されたときに、スクロールバーが必要な部分のCSS設定等の詳細はこの記事の追記をご覧ください。none;}1つのメニューの折りたたみが問題なく動作したら、残りの部分も同様に設定してください。この記事の内容は、yozoが実際にやってみたことを書いているだけです。この記事の方法しかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。_)m↓ちょっとした工夫例です。複数の実行スクリプトを設定されている場合は、一つにまとめて、HTMLソースをすっきりさせるのもいいでしょう。type="text/javascript"><!--generateNormalTree("categorylist");FoldNavigation('category','on',true);//--></script>CSS編集で、yozoはメニューごとにスクロールバーを設置したり、センタリングしたりしています。17:30現在でのCSSの追加コードを参考までに、追記させていただきました。Old≫トラックバックURLこのエントリーのトラックバックURL:コメントこんばんは!すごいっ!折りたたみの方法をとても丁寧にまとめてくださってうれしいです。とろは中途半端だったのにリンクとTBまで頂いて恐縮です。あの時は本当に折りたたみに燃えていたなぁ・・・遠い目(笑)実は恥ずかしながら、未完成のまま公衆に晒している状態です。アレからどうやっても上手くいかなかった折りたたみ。・°°・(>_<)・°°・。このところ落ち着かないのでしばらくは挑戦できませんが、もう一回こちらの記事を見ながら折りたたみに挑戦したいと思います。本当にお気遣いを頂いてありがたいです。頼りにしてますっ!その時にはまた相談させてね。editコメントヽ(゚∀゚)ノこんばんは~♪折りたたまれたメニューを見てびっくり!こんなにたくさんあったんですねぇ~。ヽ(゚∀゚)ノヽ(゚∀゚)ノヽ(゚∀゚)ノスゴイスゴイ!この記事を読んでつくづく折りたたみはちょっと難しそうだから、パスかも~と思っちゃいました。からあげが長すぎて気になってはいるんです。(;゚Д゚)ハッ!よし、この記事メモッとこう!予断ですが・・・今また、レス1番だ!とおもったのに、書いている間にととろさんに抜かれてました。editコメントこんばんわォオオっ!ついに折りたたみを実装ですね。GJ♪サイドメニューがとてもすっきりしましたね。これをやるとなぜかブログパーツを増やしたくなるんですよ。editコメントこんばんはー。yozo殿の折りたたみ式メニュー、とっても使いやすいです!こうやって見るとたくさんのメニューがあったんですねぇ。していい感じですねー。私、テンプレを探してる時によく折りたたみメニューで作られたものをいいなーと思いながら見てるんですよね。editコメントyozoちゃん。おはよう☆enuも久しぶりにパソコンのお勉強だよーー。していいじゃんと思ったら、こうやってまとめたんだね。!!!!サイドバーがすっきりしてとってもいいよーー♪見やすくなったし。editコメントyozoさん(。)ノコンチャ☆・゚:*:゚うわ~!とっても見やすくなりましたね♪今までも見辛いとは思ってなかったけど、こうして折り畳まれるとスッキリするのがよくわかりますね♪すごい!ムーバブルタイプになったら参考記事のところのものも熟読させていただかなくっちゃ~ワク((o(・ω・。editコメント>ととろさん、こんにちはー♪>すごいっ!折りたたみの方法をとても丁寧にまとめてくださってうれしいです。いえいえ♪折りたたみを設定しようって思ってはや半年経っちゃいました。先延ばしに延ばしてしまって申し訳ありませんでした。_)m>アレからどうやっても上手くいかなかった折りたたみ。・°°・(>_<)・°°・。プラグインの折りたたみにチャレンジされていたと思いますが、yozoもプラグインはあきらめましたよ。してもエラーになっちゃいました。結局、全てのプラグインを一つ一つHTMLにコピペしました。それと初期状態の設定はこの記事にありますように、スクリプトの「on」を「off」にするだけですから、簡単ですよ。(*^-^)>頼りにしてますっ!その時にはまた相談させてね。いつでもお時間あるときにでもチャレンジしてみてくださいね。editコメント>ビビさん、こんにちはー♪>折りたたまれたメニューを見てびっくり!こんなにたくさんあったんですねぇ~。折りたたんでいなかったのでyozoも自覚していなかったんですが、いつの間にかたくさんになっていたのですね。>折りたたみはちょっと難しそうだから、パスかも~と思っちゃいました。確かにちょっと難しいし面倒かもしれませんね。テンプレートが違うとどこにidを追加すればいいのかわかりにくいでしょうし、プラグインを全て、HTMLにコピペするのも意外と大変ですからね。>今また、レス1番だ!とおもったのに、書いている間にととろさんに抜かれてました。あはは・・・それは♪それは♪残念でしたね。以前にもそんなことがあったような・・・yozoんちを盛り上げてくださって本当に感謝でっす。editコメント>maRkさん、こんにちはー♪>ォオオっ!ついに折りたたみを実装ですね。GJ♪そうなんですよ♪遅ればせながら、やっと設置できました。FC2のプラグインをそのまま活用できるかどうかがんばったのですが、yozoには力及ばずでした。一つ一つのメニューごとにCSSを書きたいというのを優先しましたよ。>ただ、これをやるとなぜかブログパーツを増やしたくなるんですよ。(・∀・)確かに、コンパクトになった分だけ、なにか置きたくなる・・・そんな野望が・・・メラメラしてきますよね。最初の表示が重たくなったでしょうが、FC2ブログが重くならない限り、すっきり折りたたみできるようになっているはずなんでっす。>折りたたみメニューで作られたものをいいなーと思いながら見てるんですよね。折りたたみを標準装備しているテンプレートがあるのですね。いえば、サイドメニューのナビゲーションボタンで切り替えるというテンプレートがあったような・・・。)フフ♪隊長に折り目がついちゃいますか!(゚m゚*)プッどうしても重たい処理になりますから、隊長もご立腹されるかもしれませんね。editコメント>enuちゃん、こんばんはー♪>あ・・・。していいじゃんと思ったら、こうやってまとめたんだね。!!!!(*'-'*)エヘヘすっきりしたでしょ。重たくなっちゃったようですけどね。これはたぶんBlogPetの設定もFC2側に持ってきたことにも関係があるかもしれませんけどね。気に入っていただけてうれしいですよ。いつでもどの記事でもお役に立つようでしたら参考にしてくださいね。editコメント>モンビッケさん、こんばんはー♪>うわ~!とっても見やすくなりましたね♪そーなんですよ。いつの間にかたくさんサイドに設置していたのですね。折りたたみにして、自分でもびっくりしていますよ。)フフ♪たぶん小粋空間様は入り浸ることになるかも・・・(^○^)yozoもyujiroさんの弟子ですからね。勝手な自称の上に、押しかけ弟子なんですけど。editコメントyozoさん、こんばんは♪(^▽^)/こちらも折りたたみにされたのですね!!とってもすっきりですね!!(゚-゚*)(。̄)ヒソヒソ先日から小粋空間さまのところにお邪魔して小粋なユーザーになろうと格闘中なのですごくありがたい記事でした。小粋空間様とこちらの記事を参考にさせていただきたいと思います。editコメント>まゆびさん、こんばんはー♪>こちらも折りたたみにされたのですね!!とってもすっきりですね!!(゚-゚*)(。♪って声が大きいですね。どんなテンプレートになるのでしょう。_*)>サイドバーのスッキリ度にびっくりしちゃいましたよっこの折り畳みになってから初めておじゃましたとき、うさもちゃんが見えなくなっていて、おろろ。_*)>いえいえ♪遠慮なさらずに好きなときに、好きなだけ遊びにきてくださいね♪(*^-^)とっても嬉しいですよ♪yozoの方こそレスが遅れてごめんなさいでっす。余計な気を使わせたかもしれませんね。_)m>サイドバーのスッキリ度にびっくりしちゃいましたよっ(*^.^*)エヘッ折りたたみを設定してみて、はじめてたくさんあったんだなぁ~って、改めて実感しましたよ。オィーーーーーッ!!>一度開いた状態にすると、次におじゃましたときも>ちゃんと開いた状態が維持されているんですね!そーなんですよ。詳細は記事に書きませんでしたが、cookieで状態を維持してくれています。>うちも先日、サイドバーにjavascriptを使ったテンプレに変えてみたのですが・・・サイドバーの切替ボタンのナビがありましたね。yozoもこの記事ではプラグインをHTMLファイルに直接書き込んでいますが、プラグインをそのまま活用できる方法がありそうなので、時間をとって実験してまた記事にしようって思っています。>カスタマイズって、始めるととことんやっちゃいたくなるから、ちょっと危険ですよね(*'m')そーなんですよね。editコメントする名前:メール:URL:パスワード:お楽しみ:コメント:お気軽にカキコしてください。Secret:サイト管理者にのみ通知するチェックするとコメントプレビューがオンになります。preview:ご利用のブラウザ、設定ではご利用になれません。Player9でご覧になると、BlogPetの背景の一部(JPEG形式のもの)が見えなくなる不具合があります。背景が見えない場合は恐れ入りますが、BlogPetの上の更新ボタンで、JPEG形式以外の背景に切り替えてお楽しみください。BBSを設置しています。次のキリ番は【555カキコ】です。次のキリぺたは【15000ぺた】です。次のキリぺたは【14000ぺた】です。図形のalign属性によるWin+IEの表示の不具合を直す。RankingJRANKブログランキングyozo&BlogPet関連バナーです。「うさも」が書いたBlogです。'05上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。