カスタマイズ・レコードⅩⅣ －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で新たに 「チャイルドンモモ」 を飼うことに致しました。
今日が「モモ」のお誕生！！。
「あー」「うー」と赤ちゃん言葉を話しながら元気に動き回っています！。
しっかり育てなくちゃネ！？。
| 固定リンク | コメント (0) | トラックバック (0)
