Blog Parts Changer Ver.2(その2)：Blogパーツ表示用タグと切り替え用タグの設置

Blog Parts Changer Ver.2の設置の2回目として、Blogパーツの表示と切り替えのためのタグを入れる方法を解説します。

●1.divタグを入れる
まず、Blogパーツを表示する位置で、なおかつBlog Parts Changer本体のスクリプトの前に、HTMLのdivタグを入れます。
タグの書き方は以下のようになります。

<div id="bpc2_block○"></div>

「○」はブロックの番号です。最初のブロックの番号を0として、1、2、・・・と順に番号をつけます。
例えば、3つのブロックに分けてBlogパーツを表示したい場合は、以下のようにdivタグを入れます。

<div id="bpc2_block0"></div>
<div id="bpc2_block1"></div>
<div id="bpc2_block2"></div>

●2.aタグでBlogパーツを切り替える
次に、1.のdivタグの後に、Blogパーツを切り替えるためのタグを入れます。
aタグを使って個々のパーツへのリンクを作る方法と、selectタグを使って一覧から選ぶようにする方法を取ることができます。

aタグを使ってリンクを作る場合、以下のようなタグを入れます。

<a href="javascript:bpc2_show_blog_parts(○,△)">Blogパーツの名前</a>

「○」の部分には、ブロックの番号を入れます。また、「△」の部分には、ブロックの中でのパーツの番号を入れます。ブロックの番号／パーツの番号とも、先頭のものを0とします。

例えば、先頭のブロックで3種類のBlogパーツを切り替える場合だと、以下のようなaタグを入れます。

<a href="javascript:bpc2_show_blog_parts(0,0)">1つめのBlogパーツの名前</a>
<a href="javascript:bpc2_show_blog_parts(0,1)">2つめのBlogパーツの名前</a>
<a href="javascript:bpc2_show_blog_parts(0,2)">3つめのBlogパーツの名前</a>

●3.selectタグでBlogパーツを切り替える
一方、selectタグでBlogパーツを切り替える場合は、以下のようなタグを入れます。

<form name="bpc2_form○">
<select id="bpc2_form○_sel" name="bpc2_form○_sel" onChange="bpc2_show_select(○);">
  <option value="0">1つめのBlogパーツの名前</option>
  <option value="1">2つめのBlogパーツの名前</option>
  ・
  ・
  ・
</select>
</form>

「○」の箇所には、ブロックの番号を入れます。
また、<select>と</select>のタグの間には<option>タグを入れます。「value」の部分で、個々のBlogパーツの番号を指定します。また、<option>と</option>の間に、個々のBlogパーツの名前を入れます。

例えば、先頭のブロックで3種類のBlogパーツを切り替える場合だと、以下のようなタグを入れます。

<form name="bpc2_form0">
<select id="bpc2_form0_sel" name="bpc2_form0_sel" onChange="bpc2_show_select(0);">
  <option value="0">1つめのBlogパーツの名前</option>
  <option value="1">2つめのBlogパーツの名前</option>
  <option value="2">3つめのBlogパーツの名前</option>
</select>
</form>

●4.ランダム表示のオン／オフを切り替えるチェックボックスを入れる
ページが表示された後も、Blogパーツをランダム表示させることができますが、そのオン／オフを切り替えるためのチェックボックスを入れることもできます。

aタグでBlogパーツを切り替えるようにする場合、aタグの後に以下のようなタグを入れます。なお、「○」はブロックの番号です。

<form name="bpc2_form○">
ランダム表示<input type="checkbox" id="bpc2_form○_random" name="bpc2_form○_random" onclick="bpc2_random_change(○);">
</form>

例えば、先頭のブロックにランダム表示切替のチェックボックスを入れる場合だと、以下のようなタグを入れます。

<form name="bpc2_form0">
ランダム表示<input type="checkbox" id="bpc2_form0_random" name="bpc2_form0_random" onclick="bpc2_random_change(0);">
</form>

一方、selectタグでBlogパーツを切り替えるようにする場合、各ブロックの</select>タグの後に、以下のタグを入れます。「○」はブロックの番号です。

<br />
ランダム表示<input type="checkbox" id="bpc2_form○_random" name="bpc2_form○_random" onclick="bpc2_random_change(○);">