サイドバーの項目をスイチャー04スキン風に開閉型にする

★　サイドバーの項目をスイチャー04スキン風に開閉型にする。


　　サイドバーのメニュータイトルをクリックすると項目の中身が開きます。
　　絶対配置で、メニュータイトルを設置します。

　　スイチャー04は旧スキンで現在は、選択できません。



●　間違えがあったので大幅に変更します
黄色い部分が変更箇所





●　開閉対象メニュー項目は下記です。
（ＰＲやアメブロ広告は、対象外です。）

◆ プロフィール
◆ このブログの読者
◆ ブログ内検索
◆ カレンダ
◆ ブログテーマ一覧
◆ アーカイブ
◆ 最近の記事一覧
◆ お気に入りブログ
◆ ブックマーク
◆ 最近のコメント
◆ アメブロランキング

★　注意事項

　●　絶対配置するので、ＰＲを絶対配置しているブログは、ＰＲがない
　　サイドバーの方に各項目をサイドバーの配置で配置してください。


　●　ブログ内検索を開閉型にしたい場合は、下記をフリープラグインに入れます。
　　　下記を入れると、項目のヘッダーのブログ内検索のタイトルが付きます。
　　　ブログ内検索は変更できます。他の項目と同じ様なＨＴＭＬ構造になります。


<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
var bgs=$(".blogSearchForm").html();
$(".blogSearchForm").html('<div class="skinMenuHeader"><span class="skinMenuTitle">ブログ内検索</span></div><div class="skinMenuBody">'+bgs+'</div>');})
</script>




①　フリープラグインへ追記する。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/b2/ea/10024848068.css"></script>
<script type="text/javascript">
var cl4_sw = new Array(0,0,0,0,0,0,0,0,0,0,0);
var cl4_sw2 = new Array(1,1,0,1,1,1,1,0,0,0,0);
var s_name = new Array(".profileMenu",".readerMenu",".blogSearchForm",".calendarMenu",".themeMenu",".archiveMenu",".recentEntriesMenu",".favoriteMenu",".bookmarkMenu",".recentCommentMenu",".rankingMenu");
window.onload = function(){ side_op_cl4();}
</script>

●　説明

var cl4_sw2 = new Array(1,1,0,1,1,1,1,0,0,0,0);
の部分で、開閉型にするかどうかを指定します


◆　1・・・開閉型にする　0・・・開閉型にしない

１番目 ・・・ プロフィール
２番目 ・・・ このブログの読者
３番目 ・・・ ブログ内検索
４番目 ・・・ カレンダ
５番目 ・・・ ブログテーマ一覧
６番目 ・・・ アーカイブ
７番目 ・・・ 最近の記事一覧
８番目 ・・・ お気に入りブログ
９番目 ・・・ ブックマーク
１０番目 ・・ 最近のコメント
１１番目 ・・ アメブロランキング



var s_name = new Array(".profileMenu",".readerMenu",".blogSearchForm",".calendarMenu",".themeMenu",".archiveMenu",".recentEntriesMenu",".favoriteMenu",".bookmarkMenu",".recentCommentMenu",".rankingMenu");
　・・・・・　開閉型にしたいもののみをセットしてください。
不要なものは消してください

例・・・プロフィールと読者になるのみ開閉型にしたい場合


var s_name = new Array(".profileMenu",".readerMenu");




　



②　http://usrcss.ameblo.jp/skin/templates/68/2d/10018015921.css　を使いたくない場合は
下記をフリープラグインに追記する。

<script type="text/javascript">
var cl4_sw = new Array(0,0,0,0,0,0,0,0,0,0,0);
var s_name = new Array(".profileMenu",".readerMenu",".blogSearchForm",".calendarMenu",".themeMenu",".archiveMenu",".recentEntriesMenu",".favoriteMenu",".bookmarkMenu",".recentCommentMenu",".rankingMenu");
var cl4_sw2 = new Array(1,1,0,1,1,1,1,0,0,0,0);
function side_op_cl4(){
for (var k=0; k < s_name.length; k++){
$(s_name[k] + " .skinMenuBody").css("cssText","visibility:visible !important");
}
$(".skinMenuBody").addClass("disp_Class");
if(cl4_sw2[0]==1) {$(".profileMenu .skinMenuHeader").click(function(){cl4_cl(0);})};
if(cl4_sw2[1]==1) {$(".readerMenu .skinMenuHeader").click(function(){cl4_cl(1);})};
if(cl4_sw2[2]==1) {$(".blogSearchForm .skinMenuHeader").click(function(){cl4_cl(2);})};
if(cl4_sw2[3]==1) {$(".calendarMenu .skinMenuHeader").click(function(){cl4_cl(3);})};
if(cl4_sw2[4]==1) {$(".themeMenu .skinMenuHeader").click(function(){cl4_cl(4);})};
if(cl4_sw2[5]==1) {$(".archiveMenu .skinMenuHeader").click(function(){cl4_cl(5);})};
if(cl4_sw2[6]==1) {$(".recentEntriesMenu .skinMenuHeader").click(function(){cl4_cl(6);})};
if(cl4_sw2[7]==1) {$(".favoriteMenu .skinMenuHeader").click(function(){cl4_cl(7);})};
if(cl4_sw2[8]==1) {$(".bookmarkMenu .skinMenuHeader").click(function(){cl4_cl(8);})};
if(cl4_sw2[9]==1) {$(".recentCommentMenu .skinMenuHeader").click(function(){cl4_cl(9);})};
if(cl4_sw2[10]==1){$(".rankingMenu .skinMenuHeader").click(function(){cl4_cl(10);})};
}
function cl4_cl(same1){
for (var j=0; j < s_name.length; j++){
if(cl4_sw[j]==1){
$(s_name[j] + " .skinMenuBody").toggleClass("disp_Class");cl4_sw[j]=0;
}else{
if(same1==j){
$(s_name[j] + " .skinMenuBody").toggleClass("disp_Class");cl4_sw[j]=1;
}
}
}
}
window.onload = function(){ side_op_cl4();}
</script>

③　下記をＣＳＳへ追記する。
不要行は消してください。

/* ------------------------------------------------------- */
/* 絶対配置起点を設定　画面の大きさを変えて同じ位置に　　　*/
/* ------------------------------------------------------- */
.skinFrame2{
width:980px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
/* ------------------------------------------------- */
/* ■ サイドバー開閉用ＣＳＳ　　　　　　　　　　　　 */
/* ------------------------------------------------- */
/* 各項目を非表示 不要な行は消してください　*/
.profileMenu .disp_Class{ display:none !important; }
.readerMenu .disp_Class{ display:none !important; }
.blogSearchForm .disp_Class{ display:none !important; }
.calendarMenu .disp_Class{ display:none !important; }
.themeMenu .disp_Class{ display:none !important; }
.archiveMenu .disp_Class{ display:none !important; }
.recentEntriesMenu .disp_Class{ display:none !important; }
.favoriteMenu .disp_Class{ display:none !important; }
.bookmarkMenu .disp_Class{ display:none !important; }
.recentCommentMenu .disp_Class{ display:none !important; }
.rankingMenu .disp_Class{ display:none !important; }
/* ------------------------------------------------- */
/* 各項目を絶対配置 不要なものは消してください　*/
.profileMenu,.readerMenu,.blogSearchForm,.calendarMenu,.themeMenu,
.archiveMenu,.recentEntriesMenu,.favoriteMenu,.bookmarkMenu,
.recentCommentMenu,.rankingMenu{/* サイドバーの項目 */
position:absolute;/* 絶対配置指定 */
width:180px;/* 横幅の指定 */
}
/* ------------------------------------------------- */
/* ★ 不要なものは、取り除いてください */

.profileMenu{/* プロフィール */
top:160px;/* 上からの位置 */
left:0px; /* 左からの位置 */
}
.readerMenu{/* このブログの読者 */
top:160px; /* 上からの位置 */
left:190px;/* 左からの位置 */
}
div.blogSearchForm{/* ブログ内検索 */
top:140px; /* 上からの位置 (個別位置調整）*/
left:380px;/* 左からの位置 */
}
.calendarMenu{/* カレンダ */
top:160px; /* 上からの位置 */
left:570px;/* 左からの位置 */
}
.themeMenu{/* ブログテーマ一覧 */
top:160px; /* 上からの位置 */
left:760px;/* 左からの位置 */
}
.archiveMenu{/* アーカイブ */
top:200px;/* 上からの位置 */
left:0px; /* 左からの位置 */
}
.recentEntriesMenu{/* 最近の記事一覧 */
top:200px; /* 上からの位置 */
left:190px;/* 左からの位置 */
}
.favoriteMenu{/* お気に入りブログ */
top:200px; /* 上からの位置 */
left:380px;/* 左からの位置 */
}
.bookmarkMenu{/* ブックマーク */
top:200px; /* 上からの位置 */
left:570px;/* 左からの位置 */
}
.recentCommentMenu{/* 最近のコメント */
top:200px; /* 上からの位置 */
left:760px;/* 左からの位置 */
}
.rankingMenu{/* アメブロランキング */
top:240px;/* 上からの位置 */
left:0px; /* 左からの位置 */
}
/* ------------------------------------------------- */
/* 各項目を相対配置 不要なものは消してください　*/
.profileMenu .skinMenuBody,.readerMenu .skinMenuBody,.blogSearchForm .skinMenuBody,
.calendarMenu .skinMenuBody,.themeMenu .skinMenuBody,.archiveMenu .skinMenuBody,
.recentEntriesMenu .skinMenuBody,.favoriteMenu .skinMenuBody,.bookmarkMenu .skinMenuBody,
.recentCommentMenu .skinMenuBody,.rankingMenu .skinMenuBody{/* 各種メニューフレーム */
position:relative;/* 相対配置 */
left:-10px;/* 上からの位置 */
top:0px;/* 左からの位置 */
z-index:9999;/* 他の物と重なった場合の優先順位 */
}
/* ------------------------------------------------- */
/* 各項目の属性設定 不要なものは消してください　*/
.profileMenu .skinMenuBody,.readerMenu .skinMenuBody,.blogSearchForm .skinMenuBody,
.calendarMenu .skinMenuBody,.themeMenu .skinMenuBody,.archiveMenu .skinMenuBody,
.recentEntriesMenu .skinMenuBody,.favoriteMenu .skinMenuBody,.bookmarkMenu .skinMenuBody,
.recentCommentMenu .skinMenuBody,.rankingMenu .skinMenuBody{/* 各種メニューフレーム */
background-color:#000000;/* 背景色 */
padding:10px;/* 上下に余白 */
width:165px;/* 横幅調整 */
color:#ffffff;/* 文字色 */
font-size:12px;/* 文字の大きさ */
vertical-align:middle;/* 文字の縦の位置 */
}
/* ------------------------------------------------- */
/* カーソル設定 不要なものは消してください　*/
.profileMenu .skinMenuHeader,.readerMenu .skinMenuHeader,.blogSearchForm .skinMenuHeader,
.calendarMenu .skinMenuHeader,.themeMenu .skinMenuHeader,.archiveMenu .skinMenuHeader,
.recentEntriesMenu .skinMenuHeader,.favoriteMenu .skinMenuHeader,.bookmarkMenu .skinMenuHeader,
.recentCommentMenu .skinMenuHeader,.rankingMenu .skinMenuHeader{/* タイトル */
cursor:pointer;/* カーソルを乗せたときのカーソル設定 */
}
/* 開閉部分を非表示 不要なものは消してください　*/
.profileMenu .skinMenuBody,.readerMenu .skinMenuBody,.blogSearchForm .skinMenuBody,
.calendarMenu .skinMenuBody,.themeMenu .skinMenuBody,.archiveMenu .skinMenuBody,
.recentEntriesMenu .skinMenuBody,.favoriteMenu .skinMenuBody,.bookmarkMenu .skinMenuBody,
.recentCommentMenu .skinMenuBody,.rankingMenu .skinMenuBody{/* 各種メニューフレーム */
visibility:hidden !important;
}
/* ブログ内検索 不要な場合消してください*/
.blogSearchForm .skinMenuBody{
height:60px;
width:180px;
}
/* ------------------------------------------------- */

◆　追記

　●　ページが表示されるときに、メニューのボディ部分の背景が表示されない様にする。



①　一括で指定する場合は、下記をＣＳＳへ追記する

.skinMenu,.skinMenu2,.skinMenuBody{
background-color:transparent;/* 透明 */
}

②　個別で入れたい場合は、下記をＣＳＳへ追記する（不要部分は消す）

.profileMenu .skinMenu,.profileMenu .skinMenu2,.profileMenu .skinMenuBody{
background-color:transparent;/* プロフィール */
}
.readerMenu .skinMenu,.readerMenu .skinMenu2,.readerMenu .skinMenuBody{
background-color:transparent;/* このブログの読者 */
}
.blogSearchForm .skinMenu,.blogSearchForm .skinMenu2,.blogSearchForm .skinMenuBody{
background-color:transparent;/* ブログ内検索 */
}
.calendarMenu .skinMenu,.calendarMenu .skinMenu2,.calendarMenu .skinMenuBody{
background-color:transparent;/* カレンダ */
}
.themeMenu .skinMenu,.themeMenu .skinMenu2,.themeMenu .skinMenuBody{
background-color:transparent;/* ブログテーマ一覧 */
}
.archiveMenu .skinMenu,.archiveMenu .skinMenu2,.archiveMenu .skinMenuBody{
background-color:transparent;/* アーカイブ */
}
.recentEntriesMenu .skinMenu,.recentEntriesMenu .skinMenu2,.recentEntriesMenu .skinMenuBody{
background-color:transparent;/* 最近の記事一覧 */
}
.favoriteMenu .skinMenu,.favoriteMenu .skinMenu2,.favoriteMenu .skinMenuBody{
background-color:transparent;/* お気に入りブログ */
}
.bookmarkMenu .skinMenu,.bookmarkMenu .skinMenu2,.bookmarkMenu .skinMenuBody{
background-color:transparent;/* ブックマーク */
}
.recentCommentMenu .skinMenu,.recentCommentMenu .skinMenu2,.recentCommentMenu .skinMenuBody{
background-color:transparent;/* 最近のコメント */
}
.rankingMenu .skinMenu,.rankingMenu .skinMenu2,.rankingMenu .skinMenuBody{
background-color:transparent;/* アメブロランキング */
}