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を表示してみて、パーツを表示したい位置に「ただいま工事中です。」と表示されれば、設置は成功しています。

お知らせ

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

おすすめ