2007年01月19日

サイドメニューの折りたたみの設定

　いつの間にか、ここのブログもサイドバーに色々設置していて、全部を見るためには大きくスクロールしなきゃいけなくなっていました。そこで、この記事のカスタマイズでサイドメニューをそれぞれ折りたたみできるようにしました。右サイドバーのメニューのタイトルをクリックすれば、そのメニューを折りたたむことができます。また、折りたたんであるメニューは開くことができます。これで、ここの右サイドバーもすっきりしました。

　このカスタマイズに際しては、ここのブログのテンプレートを配布してくださっている、小粋空間のyujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト（cookie等改善版）を基にして、FC2ブログにこのカスタマイズを実装されているお友達showry's Blogのshowryさんの記事showry's Blog: FC2ブログでサイドメニュー折りたたみスクリプト導入とととろのおもちゃ箱のととろさんの記事ととろのおもちゃ箱: サイドバーを折りたたみを参考にさせていただきました。


サイドメニューの折りたたみ


  1. 　小粋空間のyujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト（cookie等改善版）を開いて、１．menufolder.js ダウンロードからmenufolder.jsをダウンロードしましょう。保存するときの名前はmenufolder.jsのままにしておいてください。そして、そのファイルをアップロードします。
    ※なお、menufolder.jsについては、様々な設定がありますが、yozoはダウンロードしたままを使用させていただいています。細かく設定したい方は、コチラ→小粋空間: menufolder.js マニュアル
  2. 　HTML編集画面で、<head>〜</head>の一番下にインクルード文を追加しましょう。
    HTML編集画面

    〜　省略　〜

    <script type="text/javascript" src="menufolder.jsのアドレス" charset="utf-8"></script>
    </head>

    〜　省略　〜

  3. 　続けてHTML編集画面で、折りたたみさせたいメニューの１つだけに、下のような設定をします。また、この例は小粋空間様のテンプレートでの設定になっています。
    • １つのメニューでまずはテストして、成功してから、残りのメニューも同様に設定することをおすすめします。
    • <div class="sidetitle">のclass名をここではsidetitle2に変更しました。
      この設定をしたメニュータイトルが折りたたみのボタンとなります。
    • id名はタイトルには☆☆nameを、内容には☆☆listを追加します。
    • ３箇所の☆☆はメニューごとに重複しないように設定してください。
    • 実行スクリプトのoffは、はじめに折りたたんでおく設定です。これをonにすると、はじめからメニューが表示される設定になります。

    HTML編集画面

    〜　省略　〜

    <!-- うさも開始 -->
    <div class="sidetitle2" id="usamoname">
    yozo家の長女うさの『うさも』
    </div>
    <div class="side" id="usamolist">
    うさものスクリプトなど表示させたい内容
    </div>
    <!-- うさも終了 -->
    <script type="text/javascript">
    <!--
    FoldNavigation('usamo','off',false);
    //-->
    </script>

    〜　省略　〜

  4. ボタンとなるメニューのタイトルのCSSを設定します。なお、折りたたみで表示されたときに、スクロールバーが必要な部分のCSS設定等の詳細はこの記事の追記をご覧ください。
    CSS編集で追加するコード
    /*サイドバーの折りたたみ用の設定*/
    .sidetitle2 {
    width: auto;
    margin:3px 0px 0px 0px;
    padding: 0px;
    text-align: center; /* テキスト配置 */
    }
    .sidetitle2 a {
    width: auto;
    }
    /* 通常 */
    .sidetitle2 a:link,
    .sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#D5DFFF; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    }
    /* マウスポイント時 */
    .sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff; /* 文字色 */
    background-color: #30488F; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    }
  5. １つのメニューの折りたたみが問題なく動作したら、残りの部分も同様に設定してください。

  • yozoからのお願い
　この記事の内容は、yozoが実際にやってみたことを書いているだけです。この記事の方法しかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

参考記事紹介

↓　ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


↓ちょっとした工夫例です。
複数の実行スクリプトを設定されている場合は、一つにまとめて、HTMLソースをすっきりさせるのもいいでしょう。
<script type="text/javascript">
<!--
generateNormalTree("categorylist");
//-->
</script>
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>

<script type="text/javascript">
<!--
generateNormalTree("categorylist");
FoldNavigation('category','on',true);
//-->
</script>

CSS編集で、yozoはメニューごとにスクロールバーを設置したり、センタリングしたりしています。07/01/19 17:30現在でのCSSの追加コードを参考までに、追記させていただきました。
CSS編集で追加するコード
/*サイドバーの折りたたみ用の設定*/
.sidetitle2 {
width: auto;
margin:3px 0px 0px 0px;
padding: 0px;
text-align: center; /* テキスト配置 */
}
.sidetitle2 a {
width: auto;
}
/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
display: block;
padding: 2px;
border: 1px solid #999999; /* 枠線 */
color:#666666; /* 文字色 */
background-color:#D5DFFF; /* 背景色 */
font-family: Verdana, Arial, sans-serif;
font-size:10px;
text-decoration: none;
}
/* マウスポイント時 */
.sidetitle2 a:hover {
padding: 2px;
border: 1px solid #999999; /* 枠線 */
color:#ffffff; /* 文字色 */
background-color: #30488F; /* 背景色 */
font-family: Verdana, Arial, sans-serif;
font-size:10px;
text-decoration: none;
}
/*yozo関連、はてなリングのスクロールバーとセンタリングの設定 */
#yozolist,#hatenalist
{
height: 300px;
overflow: auto;
line-height:1.5;
text-align:center;
}
/*Recent Comments、Recent Trackbacks、Categories、TrackbackPeopleのスクロールバーと左揃えの設定 */
#commentlist,#trackbacklist,#categorylist,#tbplinklist
{
height: 300px;
overflow: auto;
line-height:1.5;
text-align: left;
}
/*サイドメニューのセンタリング*/
#usamolist,#counterlist,#trackwordlist,#ncardlist,#technolist
{
text-align:center;
}
/*「キリぺた＆BBSキリ番」*/
#kiribanlist
{
height: 205px;
overflow: auto;
line-height:1.5;
text-align:center;
}
/*「ぽちっとお願いします　m(_ _)m」*/
#pochilist
{
height: 100px;
overflow: auto;
line-height:1.5;
text-align:center;
}

↓　ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

FC2ブックマークに追加

スレッドテーマ:カスタマイズ:ブログ

Admin | Posted at 17:28 | カスタマイズ | | Comments [16] | Trackbacks [0]

メイン

≪New 納豆ダイエットで捏造 | Top | 思いも新たに･･･阪神大震災のこと Old≫

トラックバックURL


コメント

こんばんは！
すごいっ！折りたたみの方法をとても丁寧にまとめてくださってうれしいです。
ととろは中途半端だったのにリンクとＴＢまで頂いて恐縮です。
あの時は本当に折りたたみに燃えていたなぁ・・・遠い目(笑)
実は恥ずかしながら、未完成のまま公衆に晒している状態です。アレからどうやっても上手くいかなかった折りたたみ。・°°・(>_<)・°°・。

このところ落ち着かないのでしばらくは挑戦できませんが、もう一回こちらの記事を見ながら折りたたみに挑戦したいと思います。
本当にお気遣いを頂いてありがたいです。
頼りにしてますっ！その時にはまた相談させてね。

Posted by ととろ at 2007.01.19 22:35 | edit

コメント

ヽ(ﾟ∀ﾟ)ﾉこんばんは〜♪

折りたたまれたメニューを見てびっくり！
こんなにたくさんあったんですねぇ〜。ヽ(ﾟ∀ﾟ)ﾉヽ(ﾟ∀ﾟ)ﾉヽ(ﾟ∀ﾟ)ﾉｽｺﾞｲｽｺﾞｲ!
この記事を読んでつくづく折りたたみはちょっと難しそうだから、パスかも〜と思っちゃいました。

でも、からあげが長すぎて気になってはいるんです。。。。。
(;ﾟДﾟ)ﾊｯ！


よし、この記事メモッとこう！


予断ですが・・・
今また、レス1番だ！とおもったのに、書いている間にととろさんに抜かれてました。(>_<)ｸﾔﾁｰ


Posted by ビビ at 2007.01.19 22:50 | edit

コメント

こんばんわ
ォオオっ！ついに折りたたみを実装ですね。(*^ーﾟ)b GJ♪
サイドメニューがとてもすっきりしましたね。
ただ、これをやるとなぜかブログパーツを増やしたくなるんですよ。。。(・∀・)

Posted by maRk at 2007.01.19 23:18 | edit

コメント

こんばんはー。
yozo殿の折りたたみ式メニュー、とっても使いやすいです！
こうやって見るとたくさんのメニューがあったんですねぇ。
すっきりしていい感じですねー。

私、テンプレを探してる時によく折りたたみメニューで作られたものを
いいなーと思いながら見てるんですよね。
でも既成のものを使ったらかのむまで折りたたまれてしまうので
かのむに折り跡がつきそうで結局使ってませんが（笑）

Posted by mixbabar at 2007.01.19 23:30 | edit

コメント

yozoちゃん。おはよう☆
enuも久しぶりにパソコンのお勉強だよーー。
あ・・・。すっきりしていいじゃんと思ったら、こうやってまとめたんだね。
なるほど!!!!
サイドバーがすっきりしてとってもいいよーー♪
見やすくなったし。キレイに整頓された感じだね☆
これからもいろいろ参考にさせてもらってお勉強します☆

Posted by enu at 2007.01.20 08:38 | edit

コメント

yozoさん(｡･ω･｡)ﾉｺﾝﾁｬ☆･ﾟ:*:ﾟ
うわ〜！とっても見やすくなりましたね♪
今までも見辛いとは思ってなかったけど、こうして折り畳まれると
スッキリするのがよくわかりますね♪すごい！
ムーバブルタイプになったら参考記事のところのものも熟読させて
いただかなくっちゃ〜ﾜｸ((o(･ω･｡o)(o｡･ω･)o))ﾜｸ
いつもためになる記事をありがとうございます＾＾

Posted by モンビッケ at 2007.01.20 12:48 | edit

コメント

＞ととろさん、こんにちはー♪

＞すごいっ！折りたたみの方法をとても丁寧にまとめてくださってうれしいです。
いえいえ♪折りたたみを設定しようって思ってはや半年経っちゃいました。
先延ばしに延ばしてしまって申し訳ありませんでした。m(_ _)m

＞アレからどうやっても上手くいかなかった折りたたみ。・°°・(>_<)・°°・。
きっとプラグインの折りたたみにチャレンジされていたと思いますが、yozoもプラグインはあきらめましたよ。どうしてもエラーになっちゃいました。結局、全てのプラグインを一つ一つHTMLにコピペしました。(〃´o｀)=3 ﾌｩ
　それと初期状態の設定はこの記事にありますように、スクリプトの「on」を「off」にするだけですから、簡単ですよ。(*^-^)

＞頼りにしてますっ！その時にはまた相談させてね。
(*^▽^*)ﾉﾊｰｲ いつでもお時間あるときにでもチャレンジしてみてくださいね。

Posted by ととろさんへ at 2007.01.20 16:17 | edit

コメント

＞ビビさん、こんにちはー♪

＞折りたたまれたメニューを見てびっくり！こんなにたくさんあったんですねぇ〜。
そうなんですよ。折りたたんでいなかったのでyozoも自覚していなかったんですが、いつの間にかたくさんになっていたのですね。って他人事のようにしみじみ感じましたよ（謎）(ﾟｍﾟ*)ﾌﾟｯ

＞折りたたみはちょっと難しそうだから、パスかも〜と思っちゃいました。
確かにちょっと難しいし面倒かもしれませんね。テンプレートが違うとどこにidを追加すればいいのかわかりにくいでしょうし、プラグインを全て、HTMLにコピペするのも意外と大変ですからね。(〃´o｀)=3 ﾌｩ

＞今また、レス1番だ！とおもったのに、書いている間にととろさんに抜かれてました。
あはは・・・それは♪それは♪残念でしたね。以前にもそんなことがあったような・・・
yozoんちを盛り上げてくださって本当に感謝でっす。ありがとーございまっす♪　m(_ _)m

Posted by ビビさんへ at 2007.01.20 16:24 | edit

コメント

＞maRkさん、こんにちはー♪

＞ォオオっ！ついに折りたたみを実装ですね。(*^ーﾟ)b GJ♪
そうなんですよ♪遅ればせながら、やっと設置できました。FC2のプラグインをそのまま活用できるかどうかがんばったのですが、yozoには力及ばずでした。一つ一つのメニューごとにCSSを書きたいというのを優先しましたよ。(^○^)

＞ただ、これをやるとなぜかブログパーツを増やしたくなるんですよ。。。(・∀・)
確かに、コンパクトになった分だけ、なにか置きたくなる・・・
そんな野望が・・・メラメラしてきますよね。　(ﾟｍﾟ*)ﾌﾟｯ

Posted by maRkさんへ at 2007.01.20 16:58 | edit

コメント

＞ばばるさん、こんにちはー♪

＞yozo殿の折りたたみ式メニュー、とっても使いやすいです！
わぁ♪そうですか♪(^○^) 　ちょっと最初の表示が重たくなったでしょうが、FC2ブログが重くならない限り、すっきり折りたたみできるようになっているはずなんでっす。v(*'-^*)ｂぶいっ♪

＞折りたたみメニューで作られたものをいいなーと思いながら見てるんですよね。
折りたたみを標準装備しているテンプレートがあるのですね。そーいえば、サイドメニューのナビゲーションボタンで切り替えるというテンプレートがあったような・・・。

＞かのむに折り跡がつきそうで結局使ってませんが（笑）
(^ー^* )ﾌﾌ♪隊長に折り目がついちゃいますか！(ﾟｍﾟ*)ﾌﾟｯ
どうしても重たい処理になりますから、隊長もご立腹されるかもしれませんね。(^○^)

Posted by mixbabarさんへ at 2007.01.20 17:07 | edit

コメント

＞enuちゃん、こんばんはー♪

＞あ・・・。すっきりしていいじゃんと思ったら、こうやってまとめたんだね。なるほど!!!!
(*'-'*)ｴﾍﾍすっきりしたでしょ。ちょっと重たくなっちゃったようですけどね。これはたぶんBlogPetの設定もFC2側に持ってきたことにも関係があるかもしれませんけどね。(^○^)

＞サイドバーがすっきりしてとってもいいよーー♪
そうですか♪(///o///)ゞ ﾃﾚﾃﾚ　気に入っていただけてうれしいですよ。v(*'-^*)ｂぶいっ♪
いつでもどの記事でもお役に立つようでしたら参考にしてくださいね。(^○^)

Posted by enuちゃんへ at 2007.01.20 17:38 | edit

コメント

＞モンビッケさん、こんばんはー♪

＞うわ〜！とっても見やすくなりましたね♪
そーなんですよ。いつの間にかたくさんサイドに設置していたのですね。┐( -"-)┌ﾔﾚﾔﾚ...
折りたたみにして、自分でもびっくりしていますよ。ヾ(・o・*)ｼ ｵｨｰｰｰｰｰｯ!!

＞ムーバブルタイプになったら参考記事のところのものも熟読させていただかなくっちゃ〜
(^ー^* )ﾌﾌ♪たぶん小粋空間様は入り浸ることになるかも・・・(^○^)
yozoもyujiroさんの弟子ですからね。ヾ(￣o￣;)ｵｲｵｲ
もちろん勝手な自称の上に、押しかけ弟子なんですけど。(ﾟｍﾟ*)ﾌﾟｯ

Posted by モンビッケさんへ at 2007.01.20 17:47 | edit

コメント

yozoさん、こんばんは♪(^▽^)/
こちらも折りたたみにされたのですね!!
とってもすっきりですね!!(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
実は。。。( ￣ノ∇￣)￣ー￣)ヒソヒソ
先日から小粋空間さまのところにお邪魔して
小粋なユーザーになろうと格闘中なので
すごくありがたい記事でした。
小粋空間様とこちらの記事を参考にさせていただきたいと思います。
いつもありがとうございます!!(*- -)(*_ _)ペコリ

Posted by まゆび at 2007.01.20 20:10 | edit

コメント

＞まゆびさん、こんばんはー♪

＞こちらも折りたたみにされたのですね!!とってもすっきりですね!!(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
ありがとーございまっす♪ちょっと重くなったみたいですが、まぁこんなものでしょう♪(*^-^)

＞先日から小粋空間さまのところにお邪魔して小粋なユーザーになろうと格闘中
w((￣￣0￣￣))wﾜｵｯ!!　そーだったんですか♪って声が大きいですね。どんなテンプレートになるのでしょう。発表されるのが楽しみですよ♪　(/^-^(^ ^*)o ﾋｿﾋｿ

Posted by まゆびさんへ at 2007.01.20 23:59 | edit

コメント

yozoさん、こちらにもあちらにも･･･おじゃましまっす＜(_ _*)＞
サイドバーのスッキリ度にびっくりしちゃいましたよっ
この折り畳みになってから初めておじゃましたとき、
うさもちゃんが見えなくなっていて、おろろ。。。となりましたｗ
一度開いた状態にすると、次におじゃましたときもちゃんと開いた状態が維持されているんですね！
とってもスッキリして、美しいです(ﾟｰﾟ☆

うちも先日、サイドバーにjavascriptを使ったテンプレに変えてみたのですが･･･
もうちょっと手を入れたいところがあるので、のんびり取り掛かるつもりです♪
カスタマイズって、始めるととことんやっちゃいたくなるから、ちょっと危険ですよね(*'m')

Posted by mio at 2007.01.26 21:05 | edit

コメント

＞mioさん、こんばんはー♪

＞yozoさん、こちらにもあちらにも･･･おじゃましまっす＜(_ _*)＞
いえいえ♪遠慮なさらずに好きなときに、好きなだけ遊びにきてくださいね♪(*^-^)
とっても嬉しいですよ♪yozoの方こそレスが遅れてごめんなさいでっす。
余計な気を使わせたかもしれませんね。m(_ _)m

＞サイドバーのスッキリ度にびっくりしちゃいましたよっ
(*^.^*)エヘッ折りたたみを設定してみて、はじめてたくさんあったんだなぁ〜って、
改めて実感しましたよ。ヾ(・o・*)ｼ ｵｨｰｰｰｰｰｯ!!

＞一度開いた状態にすると、次におじゃましたときも
＞ちゃんと開いた状態が維持されているんですね！
そーなんですよ。詳細は記事に書きませんでしたが、cookieで状態を維持してくれています。好みでyozoのブログの状態を楽しんでくださればうれしいですね♪(^○^)

＞うちも先日、サイドバーにjavascriptを使ったテンプレに変えてみたのですが･･･
サイドバーの切替ボタンのナビがありましたね。とてもすっきりしてカッコイイですね♪☆d(o⌒∇⌒o)b ★ｲｴｰｲ★ d(o⌒∇⌒o)b☆
　yozoもこの記事ではプラグインをHTMLファイルに直接書き込んでいますが、プラグインをそのまま活用できる方法がありそうなので、時間をとって実験してまた記事にしようって思っています。(^○^)

＞カスタマイズって、始めるととことんやっちゃいたくなるから、ちょっと危険ですよね(*'m')
そーなんですよね。一応のところで区切るようにはしているのですが、yozoもムキになっちゃって、予定を狂わせてしまうことが多いですね♪┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･

Posted by mioさんへ at 2007.01.27 19:39 | edit

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。