カスタマイズ・レコード１４ －BlogPartsの切替表示－

【BlogParts の切替表示 】

…可愛かったり、便利だったり… と、BlogPartsをいいように増やしていたら
サイドバーの表示が重くなって　…zzz…。
…何とかならないかしら？？…　と思っていたところ、
KOROPPYの本棚さんが
　・ブログペット切り替え表示スクリプト～リニューアル対応版～
　・ブログペット切り替え表示スクリプトを、複数個所で利用
という、とても便利なスクリプトを紹介なさっていたので
導入させていただきました m(__)m

このスクリプトは、難しいモジュール表示も必要なく、
どなたでも手軽にBlog Partsを切替表示できます。
しかも、BlogPet と他の BlogParts を区別することも簡単に出来ました。
表示できた時はかなりの感動ものです！。
BlogParts でサイドバーが重くなっていらっしゃる方は是非、お試し下さい。
以下の手順で設定出来ますので、どうぞ！。

★＜マイリスト＞　に記述

①共通スクリプト
　※BlogPET用を表示 ：
　　他のBlogParts用は　Part(s)／part　に変更

<script type="text/javascript">
<!--
function changePet(pid) {
var e = document.getElementById(pid);
var p = document.getElementById('myBlogPets').getElementsByTagName('div');
for (var i=0;i<p.length;i++) {
var c = getClassName(p[i]);
if (c == 'pet') {
if (p[i].id != pid) {
p[i].style.display = 'none';
} else {
p[i].style.display = 'block';
}
}
}
}
function getClassName(e) {
var r = null;
r = e.getAttribute('class') || e.getAttribute('className');
return r;
}
// -->
</script>

②共通タグ
　※BlogPET用を表示 ：
　　他のBlogParts用は　Part(s)／part　に変更
　※赤字：BlogPET用と他のBlogParts用での重複注意

<div id="myBlogPets">
<div id="pet1" class="pet">
<!-- ↓ ペット1の貼り付けコード ↓ -->
<script language="JavaScript" type="text/javascript"
src="http://www.blogpet.net/js/*****.js" charset="UTF-8"></script>
　　　※各BlogPartsで案内されている設定用のURL
</div>
<div id="pet2" class="pet" style="display:none">
<!-- ↓ ペット2の貼り付けコード ↓ -->
<script language="JavaScript" type="text/javascript"
src="http://www.blogpet.net/js/*****.js" charset="UTF-8"></script>
</div>
<form id="petControl">
<input type="radio" name="pc" id="pc1"
onclick="changePet('pet1')" checked>　　　　　
　★checked：表示されているパーツがアクセス時に表示
<label for="pc1">ちょろ栞</label>
<input type="radio" name="pc" id="pc2" onclick="changePet('pet2')">
<label for="pc2">モモ</label><br />
</form>
</div>

＜注意＞
BlogPetの同一IDは切替表示が出来ませんので
各ペット毎にIDを取得なさって下さい。

この切替表示が成功した記念に
BlogPetで新たに　「チャイルドンモモ」　を飼うことに致しました。
今日が「モモ」のお誕生！！。
「あー」「うー」と赤ちゃん言葉を話しながら元気に動き回っています！。
しっかり育てなくちゃネ！？。