★ コンテンツ表示部分の切り替え
● 内容
① サイドバーメニュー項目をクリックするとその項目の内容が
記事部分に表示されます。記事は非表示になります。
② 最初のページ（ブログを最初に開いたとき）は記事が表示されます。
③ 記事・サイドバー項目の表示の切り替えが可能です。
④ サイドバーのＰＲやＰＲ下のアメーバ広告は、対象外です。
（広告の非表示は規約違反になる可能性があるため）
● 条件
① ３カラム（右サイドバーワイド）を基本に説明しています。
２カラムの場合は、個別に質問してください。
② サイドバーメニューは、全て左サイドバー（PRがない方のサイドバー）へ
サイドバーの配置で移動してください。
但し、切り替えをしない項目は、移動は自由です。
● やり方
① フリープラグインへ追記する
切り替えしたくないサイドバーの項目は消してください。
<div class="Contents_view">
<br><a href="javascript:void(0)" onclick="Contents_disp(11);">ARTICLE</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(0);">CALENDAR</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(1);">PROFILE</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(2);">THEME</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(3);">ARCHIVE</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(4);">RANKING</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(5);">READER</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(6);">FAVORITE</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(7);">BOOKMARK</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(8);">COMMENT</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(9);">ENTRIES</a>
<br><a href="javascript:void(0)" onclick="Contents_disp(10);">SEARCH</a>
</div>
<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/6d/7d/10030757386.css'></script>
<script type="text/javascript">
var c_name = new Array(".calendarMenu",".profileMenu",".themeMenu",".archiveMenu",".rankingMenu",".readerMenu",".favoriteMenu",".bookmarkMenu",".recentCommentMenu",".recentEntriesMenu",".blogSearchForm",".skinMainArea");
Contents_view_init();
</script>
◆ 説明
・ 下記はフリープラグインの最初に１つあればOKです。
<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/6d/7d/10030757386.css'></script>
・ Contents_disp(0);の 0 は下記の .calendarMenu の位置を表します。
var c_name = new Array(".calendarMenu",".profileMenu",".themeMenu",".archiveMenu",".rankingMenu",".readerMenu",".favoriteMenu",".bookmarkMenu",".recentCommentMenu",".recentEntriesMenu",".blogSearchForm",".skinMainArea");
Contents_disp(0) ・・・ ".calendarMenu" ・・・・・カレンダー
Contents_disp(1) ・・・ ".profileMenu"・・・・・・プロフィール
Contents_disp(2) ・・・ ".themeMenu"・・・・・・・テーマ一覧
Contents_disp(3) ・・・ ".archiveMenu"・・・・・・アーカイブス
Contents_disp(4) ・・・ ".rankingMenu"・・・・・・ランキング
Contents_disp(5) ・・・ ".readerMenu" ・・・・・・読者一覧
Contents_disp(6) ・・・ ".favoriteMenu" ・・・・・お気に入り
Contents_disp(7) ・・・ ".bookmarkMenu" ・・・・・ブックマーク
Contents_disp(8) ・・・ ".recentCommentMenu"・・・コメント一覧
Contents_disp(9) ・・・ ".recentEntriesMenu"・・・最新の記事
Contents_disp(10) ・・・ ".blogSearchForm"・・・・ 検索
Contents_disp(11) ・・・ ".skinMainArea"・・・・・ 記事全体
② ＣＳＳへ下記を追加します。
切り替えしたくないサイドバーの項目は消してください。
もし、最新の記事を消す場合は、その前の行にある , は消してください。
位置などは調整してください。
/* ------------------------------------------------------- */
/* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */
/* ------------------------------------------------------- */
.skinFrame2{
width:980px; /* コンテンツ幅を設定 */
margin:auto; /* 自動中央寄せ */
position:relative; /* 起点指定 */
}
/* ------------------------------------------------------- */
/* コンテンツ表示部分の切り替え */
/* ------------------------------------------------------- */
.Contents_view{ /* コンテンツ表示メニュー */
position:fixed; /* 位置固定*/
top:300px; /* 上からの位置 */
left:300px; /* 左からの位置 */
text-align:center; /* 中央寄せ */
z-index:100;
}
.Contents_view a{ /* サイドバーメニュー */
outline:none; /* クリック時に点線を表示しない */
}
.Contents_view a{ /* サイドバーメニュー */
margin-bottom:10px; /* 下の余白 */
display:block;
}
.Contents_view a:hover{ /* サイドバーメニュー(カーソルを乗せた時) */
background-color:#000000;/* 背景色 */
text-decoration:none; /* 下線なし */
}
/* ------------------ */
/* サイドバーメニュー */
/* ------------------ */
.calendarMenu, /* カレンダー */
.profileMenu, /* プロフィール */
.themeMenu, /* テーマ一覧 */
.archiveMenu, /* アーカイブス */
.rankingMenu, /* ランキング */
.readerMenu, /* 読者一覧 */
.favoriteMenu, /* お気に入り */
.bookmarkMenu, /* ブックマーク */
.recentCommentMenu, /* コメント一覧 */
.recentEntriesMenu, /* 最新の記事 */
.blogSearchForm /* 検索 */
{
display:none; /* 表示しない */
width:470px; /* 横幅の指定 */
float:left; /* 左寄せ */
text-align:center; /* 中央寄せ */
}
/* ------------------ */
/* 右サイドバー */
/* ------------------ */
.skinSubA{ /* 右サイドバー(ＰＲがある方) 点滅を防ぐ */
position:absolute; /* 絶対配置 */
top:155px; /* 上からの位置 */
left:700px; /* 左からの位置 */
z-index:100;
}
/* ------------------------------------------------------- */
◆ スクリプトの内容
function Contents_view_init(){// コンテンツ表示部分の切り替え初期処理
$(document).ready(function(){
for(i = 0; i < c_name.length; i++){
if(c_name[i]!=".skinMainArea"){$(c_name[i]).insertAfter(".skinMainArea");}
}
});}
function Contents_disp(C_num){// コンテンツ表示部分の切り替え
for(i = 0; i < c_name.length; i++){$(c_name[i]).fadeOut(75);}
$(c_name[C_num]).fadeIn(75);
}