--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2007年01月19日

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

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

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


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


  1.  小粋空間yujiroさんの記事小粋空間: サイドメニュー折りたたみスクリプト(cookie等改善版)を開いて、1.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編集画面で、折りたたみさせたいメニューの1つだけに、下のような設定をします。また、この例は小粋空間様のテンプレートでの設定になっています。
    • 1つのメニューでまずはテストして、成功してから、残りのメニューも同様に設定することをおすすめします。
    • <div class="sidetitle">のclass名をここではsidetitle2に変更しました。
      この設定をしたメニュータイトルが折りたたみのボタンとなります。
    • id名はタイトルには☆☆nameを、内容には☆☆listを追加します。
    • 3箇所の☆☆はメニューごとに重複しないように設定してください。
    • 実行スクリプトの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. 1つのメニューの折りたたみが問題なく動作したら、残りの部分も同様に設定してください。

  • 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ランキング

スポンサーサイト

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

メイン

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

トラックバックURL


コメント

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

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

コメント

ヽ(゚∀゚)ノこんばんは~♪

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

でも、からあげが長すぎて気になってはいるんです。。。。。
(;゚Д゚)ハッ!


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


予断ですが・・・
今また、レス1番だ!とおもったのに、書いている間にととろさんに抜かれてました。(>_<)クヤチー


コメント

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

コメント

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

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

コメント

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

コメント

yozoさん(。・ω・。)ノコンチャ☆・゚:*:゚
うわ~!とっても見やすくなりましたね♪
今までも見辛いとは思ってなかったけど、こうして折り畳まれると
スッキリするのがよくわかりますね♪すごい!
ムーバブルタイプになったら参考記事のところのものも熟読させて
いただかなくっちゃ~ワク((o(・ω・。o)(o。・ω・)o))ワク
いつもためになる記事をありがとうございます^^

コメント

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

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

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

>頼りにしてますっ!その時にはまた相談させてね。
(*^▽^*)ノハーイ いつでもお時間あるときにでもチャレンジしてみてくださいね。

コメント

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

>折りたたまれたメニューを見てびっくり!こんなにたくさんあったんですねぇ~。
そうなんですよ。折りたたんでいなかったのでyozoも自覚していなかったんですが、いつの間にかたくさんになっていたのですね。って他人事のようにしみじみ感じましたよ(謎)(゚m゚*)プッ

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

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

コメント

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

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

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

コメント

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

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

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

>かのむに折り跡がつきそうで結局使ってませんが(笑)
(^ー^* )フフ♪隊長に折り目がついちゃいますか!(゚m゚*)プッ
どうしても重たい処理になりますから、隊長もご立腹されるかもしれませんね。(^○^)

コメント

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

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

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

コメント

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

>うわ~!とっても見やすくなりましたね♪
そーなんですよ。いつの間にかたくさんサイドに設置していたのですね。┐( -"-)┌ヤレヤレ...
折りたたみにして、自分でもびっくりしていますよ。ヾ(・o・*)シ オィーーーーーッ!!

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

コメント

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

コメント

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

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

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

コメント

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

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

コメント

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

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

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

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

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

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

コメントする

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

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

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


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。