Blog Parts Changerその1:スクリプトの骨格の設置

今日は、先日ご紹介した「Blog Parts Changer」の骨格部分を設置する方法を紹介します。

●本体部分のJavaScriptの設置
まず、Blog Parts Changerの本体部分のJavaScriptを設置します。
テンプレートの編集等の機能を使って、BlogPartsを表示したい部分に、以下のようなJavaScriptを入れます。

<script language="javascript" type="text/javascript" charset="UTF-8">
<!--
function show_blog_parts(parts_no)
{
    parts_html = "";
    if (parts_no == -1) {
        parts_html = "<p>ただいま工事中です。</p>\n";
    }
    else if (parts_no == 0) {
        // 1つ目のパーツを表示する処理
    }
    else if (parts_no == 1) {
        // 2つ目のパーツを表示する処理
    }
    document.getElementById('blog_parts_changer').innerHTML = parts_html;
}
//-->
</script>


1行目の「UTF-8」の部分は、お使いのBlogの文字コードに合わせて変えてください。
文字コードを調べるには、以下の手順で操作します(Internet Explorerの場合)

1.ご自分のBlogを普通に表示します。
2.Blog上のどこかを右クリックして、メニューの「ソースの表示」を選びます。
3.Blogのソース(HTML)が表示されるので、以下のような部分を探します(先頭の方にあります)。

<meta http-equiv="Content-Type" content="text/html; charset=○○○">


4.「○○○」の部分が文字コードです。

なお、上記の手順でソースが表示されないときは、こちらをご覧になって対処してください。

次に、「else if (parts_no == ○) { ・・・ }」の部分を、表示したいパーツの数に応じて増やします。
個々のパーツには0から順に番号を付け、「○」の箇所にその番号を指定します。
例えば、4つのパーツを切り替え表示できるようにしたければ、スクリプトを以下のようにします。

<script language="javascript" type="text/javascript" charset="UTF-8">
<!--
function show_blog_parts(parts_no)
{
    parts_html = "";
    if (parts_no == -1) {
        parts_html = "<p>ただいま工事中です。</p>\n";
    }
    else if (parts_no == 0) {
        // 1つ目のパーツを表示する処理
    }
    else if (parts_no == 1) {
        // 2つ目のパーツを表示する処理
    }
    else if (parts_no == 2) {
        // 3つ目のパーツを表示する処理
    }
    else if (parts_no == 3) {
        // 4つ目のパーツを表示する処理
    }
    document.getElementById('blog_parts_changer').innerHTML = parts_html;
}
//-->
</script>


「// 1つ目のパーツを表示する処理」などの部分は、パーツを表示するためのスクリプトに置き換えていきます。
その手順は今後順次ご紹介していきます。

●divタグの設置
上記のスクリプトの下に、以下のdivタグを入れます。

<div id="blog_parts_changer"></div>


●最初に表示するパーツを指定する
上のdivタグの下に、以下のJavaScriptを入れます。

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


今はまだパーツを表示する処理がないので、「ただいま工事中です。」と表示するようにしています。
パーツを表示する処理を追加したら、「show_blog_parts(-1);」の「-1」を、表示したいパーツの番号に変えます。
例えば、最初のパーツ(0番)を表示するなら、「show_blog_parts(0);」とします。

●Blogを表示する
ここまでで、骨格部分の設置は終わりです。
Blogを表示してみて、パーツを表示したい位置に「ただいま工事中です。」と表示されれば、設置は成功しています。

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