Blog Parts Changerその5:パーツを複数ブロックに分けて表示する

Blog Parts Changerでは複数のBlogパーツを切り替えて表示することができます。
ただ、ここまでで紹介してきたスクリプトでは、パーツを表示する場所が1箇所で、そこですべてのパーツを切り替えるという形になっています。
しかし、パーツが多くなってくると、「パーツをグループに分けて、複数のブロックに表示したい」ということも出てくると思います。
例えば、「パーツAとパーツBはブロック1に表示し、パーツCとパーツDはブロック2に表示する」といった場合です。
そこで、パーツを複数のブロックに分けて表示できるようにしてみました。

●1.Blog Parts Changer本体の書き換え
まず、Blog Parts Changer本体を以下のような形に書き換えます。

function show_blog_parts(block_no, parts_no)
{
    parts_html = "";
    if (block_no == 0) {
        if (parts_no == -1) {
            parts_html = "<p>ただいま工事中です。</p>\n";
        }
        else if (parts_no == 0) {
            // 1つ目のブロックの1つ目のパーツを表示する処理
        }
        else if (parts_no == 1) {
            // 1つ目のブロックの2つ目のパーツを表示する処理
        }
        else if (parts_no == 2) {
            // 1つ目のブロックの3つ目のパーツを表示する処理
        }
        ・・・
    }
    else if (block_no == 1) 
        else if (parts_no == 0) {
            // 2つ目のブロックの1つ目のパーツを表示する処理
        }
        else if (parts_no == 1) {
            // 2つ目のブロックの2つ目のパーツを表示する処理
        }
        ・・・
    }
    else if (block_no == 2) {
        ・・・
    }
    document.getElementById('blog_parts_changer_' + block_no).innerHTML = parts_html;
}


「// 1つ目のブロックの1つ目のパーツを表示する処理」などの部分には、Blogパーツを表示するためのスクリプトを入れます(これまでに紹介してきたものです)。
また、「・・・」の部分は「同様に繰り返す」ことを意味しています。

●2.divタグの書き換え
次に、個々のブロックを表示したい位置に、以下の対応するdivタグを入れます。
「○」はブロックの番号で、1番目のブロックは「0」、2番目のブロックは「1」・・・のようにします。

<div id="blog_parts_changer_"></div>


●3.初期表示パーツを決める
次に、以下のようなスクリプトを入れて、各ブロックに最初に表示するパーツを決めます。
手順2.でdivタグを複数箇所に入れましたが、それらすべてのdivタグの後に以下のスクリプトを入れます。
「○」は、1つ目のブロックに最初に表示するパーツの番号です。また、「□」は2つ目のブロックに最初に表示するパーツの番号です。
また、3つ以上のブロックに分ける場合は、「・・・」の部分に、同様の手順で初期表示パーツを決める文を入れます。

<script language="javascript" type="text/javascript">
<!--
show_blog_parts(0, );
show_blog_parts(1, );
・・・
//-->
</script>


●4.パーツを切り替えるためのリンクを入れる
最後に、パーツを切り替えるためのリンクを入れます。
手順2.でdivタグを入れましたが、各ブロックのdivタグの後に、以下のようなタグを入れます。
「○」はブロックの番号(1番目=0、2番目=1・・・)で、「□」はパーツの番号(1つ目=0、2つ目=1・・・)です。

<a href="javascript:show_blog_parts(○, □)">パーツ名</a><br />

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください