小粋空間  -  a cheap joke and a play on words site

FC2ブログでプラグインに表示しているブログパーツを折りたたむ

当サイトで公開している、FC2ブログのカスタマイズ「サイドメニューの折りたたみ for FC2 ブログ」で、プラグインに対して折りたたみを設定するカスタマイズを紹介します。

　　　　　　　　　　↓

2009.04.22 「hatena chips - サイドメニュー折りたたみスクリプトを導入」を参考に、記事の２項を修正しました。

１．元記事のカスタマイズで正常に折りたためない問題

FC2ブログのプラグインとは、サイドバーにブログパーツを表示するための機能です。プラグインを利用するためには、テンプレートに下記のようなブロック変数を設定しておきます。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle">
<%plugin_first_title>
</div>
 
<div class="fold">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->

このプラグイン用ブロック変数は、テンプレート内に合計3つ（plugin_first/plugin_second/plugin_third）まで設定することができ、これを「プラグインカテゴリ1～3」と呼びます。

また、プラグインの中に表示するブログパーツは、次のように管理画面から設定します。ひとつのプラグインカテゴリには複数のブログパーツを表示することができます。

さて、プラグインに表示するブログパーツに対して折りたたみを行いたい場合、下記のように、プラグイン用ブロック変数に折りたたみの設定を行なっても正常に動作しません。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle" id="hogename">
<%plugin_first_title>
</div>
 
<div class="fold" id="hogelist">
<%plugin_first_content>
</div>
 
<script type="text/javascript">
FoldNavigation('hoge','on',false);
</script>
<!--/plugin_first-->
<!--/plugin-->

理由は、ブロック変数内の内容は、設定したブログパーツ数だけ繰り返し表示されます。つまり、追加設定した、折りたたみ用の id 属性値（hogename/hogelist）は、追加したプラグイン数だけ繰り返し表示されてしまいます。

言い換えると、異なるプラグインパーツに同じ id 属性値が設定されるので、仮にプラグインカテゴリ1に3つのブログパーツを表示している場合、JavaScript で最初にみつけた id 属性のブログパーツ、つまり一番最初のブログパーツしか折りたたみができません。

ということで、以下、プラグインを使って表示するブログパーツで折りたたみを行う場合のカスタマイズを紹介します。

１．前処理

まず、「サイドメニューの折りたたみ for FC2 ブログ」の１～３項の設定を行います。

２．HTMLの修正

テンプレート編集画面（HTML編集）のプラグイン用ブロック変数をさがし、次の青色部分の class 属性を追加してください。

プラグインカテゴリ1の場合

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle" id="fold<%plugin_first_no>name">
<%plugin_first_title>
</div>
 
<div class="fold" id="fold<%plugin_first_no>list">
<%plugin_first_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_first_no>','on',false);
</script>
<!--/plugin_first-->
<!--/plugin-->

<!--plugin-->
<!--plugin_second-->
<div class="foldtitle" id="fold<%plugin_second_no>name">
<%plugin_second_title>
</div>
 
<div class="fold" id="fold<%plugin_second_no>list">
<%plugin_second_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_second_no>','on',false);
</script>
<!--/plugin_second-->
<!--/plugin-->

プラグインカテゴリ3の場合

<!--plugin-->
<!--plugin_third-->
<div class="foldtitle" id="fold<%plugin_third_no>name">
<%plugin_third_title>
</div>
 
<div class="fold" id="fold<%plugin_third_no>list">
<%plugin_third_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_third_no>','on',false);
</script>
<!--/plugin_third-->
<!--/plugin-->

class 属性を設定するポイントは次の2つです。

• <%plugin_first_title> を括っている (X)HTML 要素に、class="foldtitle" を設定する。
• <%plugin_first_content> を括っている (X)HTML 要素に、class="fold" を設定する。

設定が終わったら「更新」をクリックします。

３．スタイルシートの修正

テンプレート編集画面（スタイルシート編集）の任意の場所に、下記の CSS を追加してください。

.foldtitle a {
    width: auto;
}
 
/* 通常 */
.foldtitle a:link,
.foldtitle a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999; /* 枠線 */
    color:#666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    text-decoration: none;
}
 
/* マウスポイント時 */
.foldtitle a:hover {
    padding: 2px;
    border: 1px solid #999; /* 枠線 */
    color: #fff; /* 文字色 */
    background-color: #999; /* 背景色 */
    text-decoration: none;
}

配色等のデザインは、CSS に記載しているコメントを参考に適宜変更してください。

設定が終わったら「更新」をクリックします。これでページを開いて、ブログパーツで折りたたみができれば完成です。

2009.05.19
スタイルシートのセレクタ名が誤っていたので修正しました。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle">
<%plugin_first_title>
</div>
 
<div class="fold">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->

<script type="text/javascript">
//<![CDATA[
var elements = document.getElementsByTagName('div');
var counter = 1;
var buffer = new Array();
 
for (i = 0; i < elements.length; i++) {
    if (elements[i].className == "foldtitle" &&
        elements[i+1].className == "fold") {
        var name = 'fold' + counter;
        elements[i].setAttribute('id', name + 'name');
        elements[i+1].setAttribute('id', name + 'list');
        buffer[buffer.length] = "FoldNavigation('" + name + "','on',false);";
        counter++;
    }
}
var element = document.createElement("script");
element.type = "text/javascript";
element.text = buffer.join('\n');
document.body.appendChild(element);
//]]>
</script>