出来事etcをつづっています。方へ目次なんでも掲示板画像掲示板ブログペットキリぺた帳検索トップ--年--月--日スポンサーサイト上記の広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。この記事のURL2007年01月28日FC2ブログ用サイドメニューの折りたたみの設定07/01/19の記事にあるように、ここのブログのサイドメニューに折りたたみ機能を設定しました。これは、訪問してくださった方が、文字通りサイドメニューを必要に応じて開閉することができるのはもちろんのこと、その方がブラウザのcookieを削除しないかぎり、次回訪問時に開閉したメニューの状態も保持されますので、訪問してくれる方にとっては便利な機能だと思います。ところが、この記事では、メニューの内容をすべてHTMLファイルに書き込むという方法で紹介しましたので、この方法だと、使用しているプラグインがたくさんある方にとっては、大変な作業となりますし、その後のプラグイン内容の修正にも手間がかかるという問題がありました。そこで、今回は、FC2ブログのプラグインを活用して、比較的簡単にサイドメニューを折りたたむ設定ができるようにしてみました。プラグイン一つ一つに修正を加えなければいけませんので、決して楽な作業ではありませんが、設定後のメンテナンスは断然しやすくなります。不要なプラグインは管理画面で削除するだけですし、修正が必要なプラグインだけを修正すればいいようになりました。このカスタマイズに際しては、ここのブログのテンプレートを配布してくださっている、小粋空間のyujiroさん配布のJavaScriptファイルを使用させていただいています。ダウンロードからmenufolder.jsをダウンロードしましょう。保存するときの名前はmenufolder.jsのままにしておいてください。そのファイルをアップロードします。※なお、menufolder.jsについては、様々な設定がありますが、yozoはダウンロードしたままを使用させていただいています。HTML編集画面で、<head>?</head>の一番下にインクルード文を追加しましょう。続けてHTML編集画面で、プラグインカテゴリー1とプラグインカテゴリー2の部分を下のように修正します。修正する前に、プラグインのタイトルのclass(見本ではsidetitle)と、内容のclass(見本ではside)を控えておきましょう。(バックアップを取っておくことを強くおすすめします。)なお、ここの見本にある修正前のプラグインのコードは、ここのテンプレートのものです。使用のテンプレートによってclass名が異なるますので、必ず控えておくようにしましょう。使用しているすべてのプラグインの修正をします。管理画面の左サイドの[プラグインの設定]を選択して、下のように修正してください。「HTMLを編集する」→「FC2カウンター」や、「最新の記事」などのプラグインの修正「設定を変更する」→フリーエリアの内容の修正折りたたみを設定する場合プラグインの内容の前後に、この色のコードを追加してください。class="sidetitle">のclass名をここではsidetitle2に変更しました。この設定をしたメニュータイトルが折りたたみのボタンとなります。id名はタイトルには☆☆nameを、内容には☆☆listを追加します。3箇所の☆☆はメニューごとに重複しないように設定してください。「FC2カウンター」ならcounter、「最新の記事」ならentryという具合に重複しないようにしましょう。実行スクリプトのoffは、はじめに折りたたんでおく設定です。これをonにすると、はじめからメニューが表示される設定になります。タイトルのclassがsidetitleのままで、idも設定していません。実行スクリプトはありません。class="side">プラグインの内容</div>ボタンとなるメニューのタイトルのCSSを設定します。折りたたみで表示されたときに、スクロールバーが必要な部分のCSS設定等の詳細はこの記事の追記をご覧ください。この記事の内容は、yozoが実際にやってみたことを書いているだけです。この記事の方法しかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。バックアップを取るようにしてくださいね♪改造が禁止されているテンプレートもありますのでご注意ください。この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。_)m↓yozoのブログで今回設定したCSSです。CSS編集で、yozoはメニューごとにスクロールバーを設置したり、センタリングしたりしています。17:30現在でのCSSの追加コードを参考までに、追記させていただきました。Old≫トラックバックURLこのエントリーのトラックバックURL:コメントyozoさん、こんばんは♪(^▽^)/プラグインをそのままで折り畳みが出来る方法なのですね♪htmlのほうへ全部移動させるのではないので、こちらの方が楽そうですね!!私もこちらの方法でやってみようと思います。editコメント>まゆびさん、こんばんはー♪>プラグインをそのままで折り畳みが出来る方法なのですね♪そうなんですよ。HTMLファイルに貼り付けなくても、今のプラグインをそのまま修正するだけでOKですから、やりやすくなったと思います。yozoのブログも全て修正しました。^;)>私もこちらの方法でやってみようと思います。_)o))お時間あるときにでも、やってみてくださいね。比較的手軽にできるようになったと思いますよ。editコメントこんにちはー。yozoちゃん♪うーん・・・。なんだか休んでいる間に覚えた事(あんまりないけど)すらも忘れてしまったような感じがします。この方法ですると、簡単に出来ちゃうのかな???なるほどーー。editコメント>enuちゃん、こんばんはー♪>休んでいる間に覚えた事(あんまりないけど)すらも忘れてしまったような感じがします。あはは・・・こういうのってすぐ忘れちゃいますもんね♪yozoもそうなんですよ。それで、ちょっと面倒なんですけど、こうして記事にしてるんですよ。(*^-^)>この方法ですると、簡単に出来ちゃうのかな???面倒ですけど、簡単だと思いますよ。>これ、選んで開いて置けるって言うのがいいよねー♪ここのブログに遊びにきたときに、いろいろと便利なようにご自分で開閉をセットしておけますからね。editコメント改めて質問させて頂きます。こちらの説明どおりやってみたのですが行き詰りました。項目3なのですが、説明どおり変更するとテンプレが崩れてしまい素材なども消えてしまいました。助言&アドバイス頂けると幸いです。editコメント>由美さん、はじめまして。>改めて質問させて頂きます。恐れ入りますが、ここのブログでは、URLを入力していただけない質問は遠慮していただいています。詳しくは下の記事の追記部分の「質問に関する注意」をご覧ください。http://yozoblog2.blog63.fc2.com/blog-entry-497.htmlなお、前のコメントは、この記事でのコメントと同じ内容でしたので、勝手ながら削除させていただきました。悪しからずご了承ください。>項目3なのですが、説明どおり変更すると>テンプレが崩れてしまい素材なども消えてしまいました。項目3と項目4の設定があってはじめてきちんと表示される設定になっていますので、項目3だけだと、当然由美さんの仰るとおりになると思います。本来なら、お答えは控えさせていただくのですが、念のため申し添えておきます。editコメントする名前:メール:URL:パスワード:お楽しみ:コメント:お気軽にカキコしてください。Secret:サイト管理者にのみ通知するチェックするとコメントプレビューがオンになります。preview:ご利用のブラウザ、設定ではご利用になれません。Player9でご覧になると、BlogPetの背景の一部(JPEG形式のもの)が見えなくなる不具合があります。背景が見えない場合は恐れ入りますが、BlogPetの上の更新ボタンで、JPEG形式以外の背景に切り替えてお楽しみください。BBSを設置しています。次のキリ番は【555カキコ】です。次のキリぺたは【15000ぺた】です。次のキリぺたは【14000ぺた】です。図形のalign属性によるWin+IEの表示の不具合を直す。RankingJRANKブログランキングyozo&BlogPet関連バナーです。「うさも」が書いたBlogです。'05上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。