Top > CMS・ブログ > FC2ブログ > カスタマイズ > 折りたたみ > 2007年6月
2007年6月 1日

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

June 1,2007 2:05 AM
Tag:[, , ]
Permalink

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 では他の表示に影響があるかもしれませんので、クラス属性等の設定が必要かもしれません)。

Comments [22] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3