もぜひご覧ください。
今日は、先日ご紹介した「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を表示してみて、パーツを表示したい位置に「ただいま工事中です。」と表示されれば、設置は成功しています。
コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。
早速導入して、メロの複数飼いをはじめました♪
便利なスクリプトを有難うございます!
PS
ハーボットはIFRAMEでしかできないのでしょうか?
こんにちは～。
メロ、かわいすぎて、どうしてもどの子も飼ってみたくなったので
こちらのスクリプトを 利用させていただきました。
あちこちのブログさんでよく見かけるので、やむやむではない別ブログに入れてる
タグフレンズっていうBlogPartsがあるのですが、それも チェンジできたらいいな～、
そしたら やむやむに持ってくるんだけど・・・なんて考えてます。
昨日は、 モフモフ・メロリンまでありがとうございました＾＾
今夜他メロ2匹も登録して、早速「Blog Parts Changer」導入させて頂きたいと思います。
重さを考慮したスクリプトは本当に助かります！
導入していただきありがとうございます。
＞KOROPPYさん
ハーボットは、これまでは複数のページで表示できるように、IFRAMEで貼っていました。そこで、暫定的にそれを利用しています。
IFRAMEなしでできるかどうかは、今後調べる予定です。
＞さえらさん
タグフレンズは後日調べたいと思います。
＞Mirayさん
メロにすっかりはまっていらっしゃるようで（笑）。
将来さらに種類が増えるようですが、そのときにもBlog Parts Changerがあれば安心です（笑）。
こんにちは～。
お願いしていたタグふれんずなのですが、やむやむでは
横幅の関係で、どうしても メロと同じ右サイドバーに置けないので
Blog Parts Changer で 切り換えできないことになりました。
なので、ほかの方でご要望がなければ、お調べいただくこともないかな～と
お願いを取り下げます。あーだこーだと すみません。
はじめまして あやびったんと申します
メロにハマッていてぜひアタシも3種切り替えたい思い一応2種再度登録したのですが出来ないのです。どこをどうしたらよいのかわからず半日戦って悪戦苦闘しております＾＾；スクリプトの骨格の設置はして現在工事中になってます メロの場合この作業はいらないのですか？？
メロの3種‥の記事も拝見したのですが‥ほんま初心者なんでもう泣きそうな勢いです 悔しいのなんのって‥３種‥の記事のところのスクリプトは全部で4種類ありましたが全部張るものなんでしょうか‥ほんま初心者ですみません お時間があれば教えていただきたく思っています よろしくお願いします
＞あやびったんさん
はじめまして。
メロの切り替えだけでよければ、メロ専用版があります。
そちらの方が簡単に設置できます。
以下のページを参照してください。
http://www.h-fj.com/blog/archives/2005/06/blog_parts_chan_11.php
ありがとうございます＾＾
出来ました＾＾しかもランダムもついて＾＾
ちょっと切り替えの部分が変ですががんばっていじってみます＾＾
本当に感謝です
ちゃんとできた際はTBさせていただきたく思ってます
ありがとうございました＾＾
ほんま感謝です＾＾
こんばんわ
少々またお伺いしたいのですが…
ブログマスコット関係ではないのですが…メロのフラッシュを3つばらばらに表示してるのですがこちらのちぇンジャーを応用してつかえるのでしょうか
ちょっとがんばってみたのですが…やはり不可能でしょうか…
＞ayabittan76さん
こんにちは。
そちらのBlogを拝見しましたが、背景が薄いオレンジ色になっている3つのFlashのことでしょうか。
単なるFlashのようですので、やろうと思えばBlog Parts Changerで切り替えることは可能です。
そうです その通りです
って事は…
○つ目のパーツを表示する処理のとこのそれぞれのスクリプトをいれたらＯＫなのですか？？
でparts_html = "";
if (parts_no == -1) {
parts_html = "ただいま工事中です。\n";
}
の部分はそのままでいいのですか？？
とりあえず工事中を表示させようとおもったのですが…それすら表示さえれません
JavaScriptはってdivタグそしてパーツを指定のJavaScriptいれたのですが…文字コードもあってるのですが…普通工事中になりますよね なんか初歩的なことでもうしわけないです
＞ayabittan76さん
こんにちは。
まず、それぞれのFlashを出力するタグの部分で、途中にある改行を削除して、タグを1行につなげてください。
それから、Flashのタグの前の「//」を削除して、代わりに「parts_html = '」を入れてください。そして、タグの後に「';」を入れてください。
最後に、パーツを切り替えるためのaタグを入れてやれば完成です。
あとひといきだとおもうのですが…切り替えおいたのですが…
全くしらんとこにいきます
もうちょっとやってみますが…
何度もホントすみません
できました ちゃんときりかわってます ありがとうございました
なんか何回もくだらない質問してしまい…
スクリプトについて勉強しようおもっても何度本など読んでもわからずいつも教えてもらっててホントすみません 感謝してます ありがとうございました＾＾