fc2ブログ
2007年01月28日

FC2ブログ用サイドメニューの折りたたみの設定

　07/01/19の記事にあるように、ここのブログのサイドメニューに折りたたみ機能を設定しました。これは、訪問してくださった方が、文字通りサイドメニューを必要に応じて開閉することができるのはもちろんのこと、その方がブラウザのcookieを削除しないかぎり、次回訪問時に開閉したメニューの状態も保持されますので、訪問してくれる方にとっては便利な機能だと思います。
07/01/19の記事はコチラ→yozoの気が向いたと記2.0 : サイドメニューの折りたたみの設定

　ところが、この記事では、メニューの内容をすべてHTMLファイルに書き込むという方法で紹介しましたので、この方法だと、使用しているプラグインがたくさんある方にとっては、大変な作業となりますし、その後のプラグイン内容の修正にも手間がかかるという問題がありました。

　そこで、今回は、FC2ブログのプラグインを活用して、比較的簡単にサイドメニューを折りたたむ設定ができるようにしてみました。もちろん、プラグイン一つ一つに修正を加えなければいけませんので、決して楽な作業ではありませんが、設定後のメンテナンスは断然しやすくなります。不要なプラグインは管理画面で削除するだけですし、修正が必要なプラグインだけを修正すればいいようになりました。興味のあるFC2ブログユーザーの方は、お時間あるときにでも、試してみてくださいね♪


　このカスタマイズに際しては、ここのブログのテンプレートを配布してくださっている、小粋空間のyujiroさん配布のJavaScriptファイルを使用させていただいています。

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


  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編集画面で、プラグインカテゴリー１とプラグインカテゴリー２の部分を下のように修正します。修正する前に、プラグインのタイトルのclass(見本ではsidetitle）と、内容のclass(見本ではside)を控えておきましょう。(バックアップを取っておくことを強くおすすめします。)なお、ここの見本にある修正前のプラグインのコードは、ここのテンプレートのものです。使用のテンプレートによってclass名が異なるますので、必ず控えておくようにしましょう。
    HTML編集画面

    ?　プラグインカテゴリー１の修正前　?


    <!--plugin-->
    <!--plugin_first-->
    <div class="sidetitle">
    <%plugin_first_title>
    </div>
    <div class="side">
    <%plugin_first_content>
    </div>
    <!--/plugin_first-->
    <!--/plugin-->

    ?　プラグインカテゴリー１の修正後　?


    <!--plugin-->
    <!--plugin_first-->
    <%plugin_first_content>
    <!--/plugin_first-->
    <!--/plugin-->

    ?　プラグインカテゴリー２の修正前　?


    <!--plugin-->
    <!--plugin_second-->
    <div class="sidetitle">
    <%plugin_second_title>
    </div>
    <div class="side">
    <%plugin_second_content>
    </div>
    <!--/plugin_second-->
    <!--/plugin-->

    ?　プラグインカテゴリー２の修正後　?


    <!--plugin-->
    <!--plugin_second-->
    <%plugin_second_content>
    <!--/plugin_second-->
    <!--/plugin-->
  4. 　使用しているすべてのプラグインの修正をします。管理画面の左サイドの[プラグインの設定]を選択して、下のように修正してください。
    • 「HTMLを編集する」→「FC2カウンター」や、「最新の記事」などのプラグインの修正
    • 「設定を変更する」→フリーエリアの内容の修正

    折りたたみを設定する場合

    プラグインの内容の前後に、この色のコードを追加してください。
    • <div class="sidetitle">のclass名をここではsidetitle2に変更しました。
      この設定をしたメニュータイトルが折りたたみのボタンとなります。
    • id名はタイトルには☆☆nameを、内容には☆☆listを追加します。
    • ３箇所の☆☆はメニューごとに重複しないように設定してください。例えば、「FC2カウンター」ならcounter、「最新の記事」ならentryという具合に重複しないようにしましょう。
    • 実行スクリプトのoffは、はじめに折りたたんでおく設定です。これをonにすると、はじめからメニューが表示される設定になります。

    プラグインの内容の修正
    <div class="sidetitle2" id="usamoname">
    表示させたいメニューのタイトル
    </div>
    <div class="side" id="usamolist">

    プラグインの内容

    </div>
    <script type="text/javascript">
    <!--
    FoldNavigation('usamo','off',false);
    //-->
    </script>

    折りたたみを設定しない場合

    　タイトルのclassがsidetitleのままで、idも設定していません。そして、実行スクリプトはありません。
    プラグインの内容の修正
    <div class="sidetitle">
    表示させたいメニューのタイトル
    </div>
    <div class="side">

    プラグインの内容

    </div>
  5. ボタンとなるメニューのタイトルの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;
    }

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

参考記事紹介

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


↓yozoのブログで今回設定したCSSです。ご参考までに。
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ランキング

スポンサーサイト



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

Admin | Posted at 20:12 | カスタマイズ | | Comments [6] | Trackbacks [0]

メイン

≪New BlogPet「うさも」の背景紹介　節分 | Top | BlogPet12000ぺた「うさも」のキリぺた記念　俳句を求めて三千里　狙い撃ち編＠後姿ラブリー同盟 Old≫

トラックバックURL


コメント

yozoさん、こんばんは♪(^▽^)/
プラグインをそのままで折り畳みが出来る方法なのですね♪
ｈｔｍｌのほうへ全部移動させるのではないので、
こちらの方が楽そうですね!!
私もこちらの方法でやってみようと思います。
分かりやすい記事をありがとうございました!!ペコリ(o_ _)ｏ))

Posted by まゆび at 2007.01.28 22:09 | edit

コメント

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

＞プラグインをそのままで折り畳みが出来る方法なのですね♪
そうなんですよ。HTMLファイルに貼り付けなくても、今のプラグインをそのまま修正するだけでＯＫですから、やりやすくなったと思います。yozoのブログも全て修正しました。(^｡^;)

＞私もこちらの方法でやってみようと思います。
＞分かりやすい記事をありがとうございました!!ペコリ(o_ _)ｏ))
お時間あるときにでも、やってみてくださいね。
比較的手軽にできるようになったと思いますよ。＼(*⌒0⌒)ｂがんばっ♪

Posted by まゆびさんへ at 2007.01.28 23:03 | edit

コメント

こんにちはー。yozoちゃん♪
うーん・・・。なんだか休んでいる間に覚えた事（あんまりないけど）すらも忘れてしまったような感じがします。
この方法ですると、簡単に出来ちゃうのかな???
なるほどーー。うんうん。
これ、選んで開いて置けるって言うのがいいよねー♪
お友達の事を良く考えてくれるyozoちゃんらしいなぁ♪
って、感心しちゃった☆

Posted by enu at 2007.01.30 16:32 | edit

コメント

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

＞休んでいる間に覚えた事（あんまりないけど）すらも忘れてしまったような感じがします。
あはは・・・こういうのってすぐ忘れちゃいますもんね♪yozoもそうなんですよ。それで、ちょっと面倒なんですけど、こうして記事にしてるんですよ。(*^-^)

＞この方法ですると、簡単に出来ちゃうのかな???
面倒ですけど、簡単だと思いますよ。(^○^)

＞これ、選んで開いて置けるって言うのがいいよねー♪
ここのブログに遊びにきたときに、いろいろと便利なようにご自分で開閉をセットしておけますからね。活用してみてくださいね♪Ｖ(○⌒∇⌒○) ｲｴｰｲ

Posted by enuちゃんへ at 2007.01.30 18:03 | edit

コメント

改めて質問させて頂きます。

早速こちらの説明どおりやってみたのですが行き詰りました。
項目３なのですが、説明どおり変更するとテンプレが崩れてしまい素材なども消えてしまいました。
共有テンプレ　do_qp_dot_3c　を使用しているのですが何処を変更すれば良いかアドバイス頂けないでしょうか？　

小粋空間様のテンプレでしか出来ないのでしょうか？
また、折りたたみを設定する場合としない場合の違いはなんですか？

素人ですみません（汗）　助言＆アドバイス頂けると幸いです。
宜しくお願い致します┏○ﾍﾟｺﾘ

Posted by 由美 at 2007.05.19 01:50 | edit

コメント

＞由美さん、はじめまして。

＞改めて質問させて頂きます。
恐れ入りますが、ここのブログでは、URLを入力していただけない質問は遠慮していただいています。詳しくは下の記事の追記部分の「質問に関する注意」をご覧ください。
http://yozoblog2.blog63.fc2.com/blog-entry-497.html
なお、前のコメントは、この記事でのコメントと同じ内容でしたので、勝手ながら削除させていただきました。悪しからずご了承ください。

＞項目３なのですが、説明どおり変更すると
＞テンプレが崩れてしまい素材なども消えてしまいました。
項目３と項目４の設定があってはじめてきちんと表示される設定になっていますので、項目３だけだと、当然由美さんの仰るとおりになると思います。本来なら、お答えは控えさせていただくのですが、念のため申し添えておきます。

Posted by 由美さんへ at 2007.05.20 19:46 | edit

コメントする

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

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

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