もぜひご覧ください。
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(○);">
コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。
お世話になっております。
BlogPartsChangerを導入したのですが、
どうもうまくいきません。
メロ×１、ブログペット×４で使用したいのですが、
メロが表示されません。
メロ＆ペットという形でPHPモジュール化をしています。
それで、メロは諦めて、ペットだけでもと思いましたが、
Changer本体のArray部分にメロのコードを入れないと、
表示されません。
// 各ブロックに表示するBlogパーツのID
var bpc2_parts_ids = Array(
Array(1000,1001,1002,1003),
Array(2000)
);
// 各ブロックに最初に表示するBlogパーツの番号
var bpc2_first = Array(-1,0);
// 各ブロックのランダム表示の表示間隔
var bpc2_interval = Array(120,0);
// 各ブロックのランダム表示の初期状態
var bpc2_is_random = Array(0,0);
しかし、IEで以下のようなエラーを吐きます。
「エラー：document.getElementById(...)はNULL、またはオブジェクトではありません。」
と表示されます。
なにか原因が考えられますでしょうか？
＞showBOOさん
こんにちは。
「各ブロックに表示するBlogパーツのID」の部分に「Array(2000)」という行がありますが、ここが引っかかっていると思われます。
「『2000』という値の要素を持つ配列」を宣言したいところですが、この書き方だと「要素が2000個ある配列」が宣言されます。
var bpc2_parts_ids = Array(
Array(1000,1001,1002,1003),
Array(2000)
);
の部分を、
var bpc2_parts_ids = Array(
Array(1000,1001,1002,1003),
Array(1)
);
bpc2_parts_ids[1][0] = 2000;
に変えて、メロ表示用のdivタグや表示の関数を入れて、試してみてください。
ありがとうございます！！
無事解決しました！！
なるほど、、配列が2000になってしまうんですね。。。（＾＾；）