TopFC2ブログ > カスタマイズ > 折りたたみ > サイドメニューの折りたたみ for FC2 ブログ
2007年6月 1日

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

Posted at June 1,2007 2:05 AM
Category:[折りたたみ]
Tag:[, , ]

FC2ブログでのサイドメニューの折りたたみカスタマイズを紹介致します。

いつもであれば、当サイト配布のテンプレートをサンプルに説明するのですが、「他のテンプレートで折りたたみカスタマイズは利用できないでしょうか?」というご質問を頂きましたので、ここでは共有テンプレートの「do_qp_dot_3c」を例に説明します。

このカスタマイズを行うことで下記のような折りたたみを行うことができます。

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

なお、当サイトで配布している FC2 ブログテンプレートの折りたたみについては下記のサイトで公開されています。

注:ここではプラグインを例に説明してますが、プラグイン以外のものも、「タイトル(を括るタグ)」+「メニューリスト(を括るタグ)」というHTMLマークアップになっていれば、何でも折りたためます。

1.折りたたみスクリプトのダウンロード

下記のリンクよりスクリプトのページにジャンプし、menufolder.js のリンクをクリックして、スクリプトファイルをダウンロードしてください。

download

2.折りたたみスクリプトのアップロード

[ツール]→[ファイルのアップロード]よりダウンロードしたファイルをアップロードします。

ファイルのアップロード

アップロード先のURLを次項で利用するので、アップロードした後、IEであれば「表示」のリンクを右クリックして「ショートカットのコピー」を選択します。

URLのコピー

これでクリップボードにURLがコピーされました。注:左クリックはしないでください。

3.script 要素追加

下記の script 要素を、HTMLテンプレートの </head> の直前に追加してください。

<script type="text/javascript" src="[menufolder.js の URL]" charset="utf-8"></script>

[menufolder.js の URL] には、先程コピーしたURLを貼り付けてください。

4.プラグイン表示用タグの修正

サイドメニューを表示するプラグインに対して修正を行ないます。下記のように青色部分(3ヶ所)を追加してください。

<!--plugin-->
<!--plugin_first-->
 
<div class="left_body">
 
<h3 style="text-align:<%plugin_first_talign>" id="plugin1name"><%plugin_first_title></h3>
 
<div class="menu_text" id="plugin1list">
 
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description></p>
 
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2></p>
 
</div>
 
<script type="text/javascript">
FoldNavigation('plugin1','on',false);
</script>
</div>
<!--/plugin_first-->
<!--/plugin-->

ご利用になるテンプレートによってマークアップが若干異なるかもしれませんが、基本は

  • メニュータイトルを表示する要素(例では h3 要素)に id="pluginnname" を追加(x は数字)
  • メニューリスト全体を括る要素(例では div 要素)に id="pluginnlist" を追加(x は数字)
  • プラグインの最後の方に script 要素を追加

となっています。

n の意味ですが、2つめのプラグインに設定する場合は id="plugin2name"id="plugin2list"、3番目のプラグインには id="plugin3name"id="plugin3list" という風にしてください。

また、script 要素の中にある

FoldNavigation('plugin1','on',false);

も、2つめのプラグインは

FoldNavigation('plugin2','on',false);

となります。3つめの場合は 'plugin3' と設定してください。

5.スタイルシートの修正

下記 をスタイルシートに追加してください。

h3 a {
    width: auto;
}
h3 a:link,
h3 a:visited {
    display: block;
    text-decoration: none;
}
h3 a:hover {
    text-decoration: none;
}

この設定はメニュータイトルのリンクを文字以外の部分でも選択できるようにするためのものです。

他のテンプレートで、タイトル部分のタグが h3 ではなく、div であれば

div a {
    width: auto;
}
div a:link,
div a:visited {
    display: block;
    text-decoration: none;
}
div a:hover {
    text-decoration: none;
}

としてみてください(div では他の表示に影響があるかもしれませんので、クラス属性等の設定が必要かもしれません)。

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

はじめまして。

つい最近、サイドバーを折りたたみにしました。
最初はちゃんとなっていたんですが、
少し前から折りたたみの部分が真ん中に
寄ってしまいます・・・
どーしてなんでしょう?
教えていただけたらうれしいです。

[1] Posted by blue★boy : November 12, 2007 11:24 PM

>blue★boyさん
こんにちは。
ご質問の件につきまして、サイトを拝見させて頂いたところ、折りたたみの箇所が見当りませんでした。
事象が確認できるURLまたは、その状態で再度ご連絡頂けますでしょうか。
それではよろしくお願い致します。

[2] Posted by yujiro Author Profile Page : November 13, 2007 11:07 AM

すみません。

テンプレートを変えて解決しました。
お手数おかけしましたm(. . )m

[3] Posted by blue★boy : November 15, 2007 8:28 PM

こんばんわ。
ブログのカスタマイズをしたいと何度かこちらにお邪魔しておりましたが、
うまくいかず諦めてブログ自体放置してました。
久しぶりにこちらにお邪魔させて頂くと、他のテンプレートでも折りたたみが出来ると言う記事を拝見し早速試してみました。

1つだけ出来て他は出来ていませんでした;;
プラグイン2・3も変更して青い部分を追加したのですが出来ない所か
ブログパーツが消えてしまいました。
とりあえずプラグイン1のみ設定してみたのですが、何がおかしいのでしょう。
お時間があれば見て頂きたいのですが、ブログのアドレスを載せるのに抵抗がります。 数多い訪問を避けたいので。。。
管理人様だけにお教えするにはどうすれば宜しいですか?
管理人のみ観覧が無いみたいなので^^;
メールでも宜しいでしょうか?

[4] Posted by りさ : January 13, 2008 11:38 PM

先ほどコメント送信する際 エラーになってしまいました。
リロードしたら反映はされていたのですが、
Recent Commentsの所でnewになっていなかったので管理人様が気付いてくれるか心配になりました。
この記事で管理人様が気付いてくれると良いのですが。。。

[5] Posted by りさ : January 14, 2008 12:49 AM

>りささん
こんばんは。
グローバルナビゲーション(上部)の「Contact」からメールを送信できます。
またコメントは管理画面から常にチェックしてますので大丈夫です。
それではよろしくお願い致します。

[6] Posted by yujiro Author Profile Page : January 16, 2008 10:31 PM

初めまして、しゅがと申します。

サイドメニューを折りたたもうとしていまして、他のメニューはちゃんと折りたためるんですが
月刊アーカイブの右側に+(まだスクリプト初期設定のままです。)が表示されてしまって
それをクリックすれば折りたためるようになってしまいました・・
どうしたら月刊アーカイブという文字で折りたためるようになれるでしょうか、そして+はどうしたら消せるのでしょうか;
お手数おかけしますが、宜しくお願い致します。

その様子を画像にしました。見れなかったらごめんなさい・

http://blog-imgs-21.fc2.com/s/u/g/sugarmaou/12.gif

[7] Posted by しゅが : March 31, 2008 3:19 PM

度々質問すみません;

HTMLに折りたたみタグを打って、スタイルシート設定する前にサイト確認したら、すでに折りたためるようになってました。
この場合はスタイルシート設定しなくて宜しいのでしょうか?
まだ月刊アーカイブの件は解決しておりません、質問だらけですが。こちらも宜しくお願い致します・・

[8] Posted by しゅが : March 31, 2008 3:42 PM

>しゅがさん
こんにちは。
ご返事遅くなり申し訳ありません。
ご質問の件ですが、サイトのURLをご連絡頂けますでしょうか。
それではよろしくお願い致します。

[9] Posted by yujiro Author Profile Page : April 4, 2008 3:26 PM

こんばんわ。返事が遅くなってしまい、申し訳ありませんでした。
二つ問題ありましたが、無事に解決できました。お手数おかけしてすみません;
わざわざお忙しいときに、質問にご対応して下さり、有り難う御座いました!

[10] Posted by しゅが : May 15, 2008 10:27 PM

>しゅがさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!

[11] Posted by yujiro Author Profile Page : May 17, 2008 3:29 AM
コメントする

*必須



お知らせ:2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!