★ ページ内ナビゲーション
● 自動的にページ内ナビゲーションを作成します。
下記ナビゲーションが自動で指定した位置に作成されます。
記事数は、アメブロで指定可能な１ページ１０件以内です。（意識する必要はありません）
① ページトップ
② メッセージボード
③ 各記事
④ コメント
⑤ 次のページ
⑥ 前のページ
⑦ 記事一覧
● ①〰④は、リンクされたナビゲーションをクリックすると
該当箇所にページ内移動します。
（尚、スムーズ移動（ゆっくり該当箇所に移動の意味）には適用していません）
● 表示形式には下記があります。
① 記事タイトルをページ内ナビに表示する方式。
（記事名が自動的にナビゲーションリンクに表示されます）
② 記事番号を表示する方式。
（記事名は表示されません。ページ内の記事を１〰１０で番号で表示します）
● ページ内ナビゲーションは、右下にあるページナビのように
右下・左下・右上・左上など固定で自由な場所に設置できます。
● 設置方法
① フリープラグインへ追記
<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 Title_sw="1";// 記事タイトル方式の場合 "1" を指定。それ以外は "0" を指定
// トップページ(1)・メッセージボード(2)・記事(3)・コメント(4)・前のページ(5)・次のページ(6)・記事一覧(7)・予備(8 9 10)
var disp = new Array(1,1,1,1,1,1,1,1,1,1);// 表示する項目に 1 を指定 表示しない項目は 0 を指定
var Art_no = new Array("①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩");// 記事番号
var Art_title_n="記事";// 記事番号前の表示
var p_top_n="ページトップ";// ページトップの表示名称
var mag_n="メッセージ";// メッセージボードの表示名称
var com_n="コメント";// コメントの表示名称
var pp_n="前のページ";// 前のページの表示名称
var np_n="次のページ";// 次のページの表示名称
var ic_n="記事一覧";// 記事一覧の表示名称
window.onload = function(){pg_navi();}
</script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/b2/ea/10024848068.css'></script>
<script type="text/javascript">
var Title_sw="1";// 記事タイトル方式の場合 "1" を指定。それ以外は "0" を指定
// トップページ(1)・メッセージボード(2)・記事(3)・コメント(4)・前のページ(5)・次のページ(6)・記事一覧(7)・予備(8 9 10)
var disp = new Array(1,1,1,1,1,1,1,1,1,1);// 表示する項目に 1 を指定 表示しない項目は 0 を指定
var Art_no = new Array("①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩");// 記事番号
var Art_title_n="記事";// 記事番号前の表示
var p_top_n="ページトップ";// ページトップの表示名称
var mag_n="メッセージ";// メッセージボードの表示名称
var com_n="コメント";// コメントの表示名称
var pp_n="前のページ";// 前のページの表示名称
var np_n="次のページ";// 次のページの表示名称
var ic_n="記事一覧";// 記事一覧の表示名称
window.onload = function(){pg_navi();}
</script>
◆ パラメータ説明
・var Title_sw="1"; ・・・ 記事タイトルをページ内ナビに表示する方式
・var Title_sw="0"; ・・・ 記事番号を表示する方式
・var disp = new Array(1,1,1,1,1,1,1,1,1,1);・・・ 0 にすれば該当箇所はリンク
表示されません。
１番目・・・トップページ
２番目・・・メッセージボード
３番目・・・記事
４番目・・・コメント
５番目・・・前のページ
６番目・・・次のページ
７番目・・・記事一覧
８番目・・・予備
９番目・・・予備
１０番目・・予備
・var Art_no = new Array("①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩");
・・・ 記事の後ろに付く番号の識別
・var Art_title_n="記事"; 〰 ic_n="記事一覧"; ・・ それぞれ表示する文字です
・var Title_sw="0"; ・・・ 記事番号を表示する方式
・var disp = new Array(1,1,1,1,1,1,1,1,1,1);・・・ 0 にすれば該当箇所はリンク
表示されません。
１番目・・・トップページ
２番目・・・メッセージボード
３番目・・・記事
４番目・・・コメント
５番目・・・前のページ
６番目・・・次のページ
７番目・・・記事一覧
８番目・・・予備
９番目・・・予備
１０番目・・予備
・var Art_no = new Array("①","②","③","④","⑤","⑥","⑦","⑧","⑨","⑩");
・・・ 記事の後ろに付く番号の識別
・var Art_title_n="記事"; 〰 ic_n="記事一覧"; ・・ それぞれ表示する文字です
◆ 注意
・ <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>
は、フリープラグインに１つあればＯＫです。
・ window.onload = function(){pg_navi();} は、ほかにも window.onload が
ある場合は、１つにまとめる必要があります。
例
下記をひとつにする場合
window.onload = function(){Enter_disp_new();}
window.onload = function(){pg_navi();}
下記の様にする
window.onload = function(){Enter_disp_new(),pg_navi();}
は、フリープラグインの最初に１つあればＯＫです。
・ <script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/b2/ea/10024848068.css'></script>
は、フリープラグインに１つあればＯＫです。
・ window.onload = function(){pg_navi();} は、ほかにも window.onload が
ある場合は、１つにまとめる必要があります。
例
下記をひとつにする場合
window.onload = function(){Enter_disp_new();}
window.onload = function(){pg_navi();}
下記の様にする
window.onload = function(){Enter_disp_new(),pg_navi();}
② ＣＳＳへ追記
/* ------------------------------------------------------- */
/* ページ内ナビゲーション */
/* ------------------------------------------------------- */
.pgin_navi {
border:0px solid #00ffff !important;/* 枠線 */
display: block !important;
overflow: hidden;
position: fixed;
bottom:85px;/* bottom→下からの位置 top→上からの位置 */
right: 25px;/* right→右からの位置 left→左から」の位置 */
max-width: 280px;/* 幅(最大幅) */
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
.pgin_navi, .pgin_navi li {
border: 0 none;/* 枠なし */
list-style-type: none;/* リスト表示(・)なし */
margin: 0;/* 余白なし */
padding: 0;/* 余白なし */
}
.pgin_navi li {
background-color:#ffccff;/* 背景色 */
text-align:center;/* 文字を中央寄せ */
font-size:12px;/* 文字の大きさ */
padding:1px 4px 1px 4px;/* 余白設定(上・右・下・左) */
}
.pgin_navi li:hover{/* カーソルを乗せたとき */
background-color:#ccffcc;/* 背景色 */
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
.pgin_navi li a{
color:#444444;/* 文字の色 */
display:block;
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
.pgin_navi li a:hover{/* カーソルを乗せたとき */
color:#ff00ff;/* 文字の色 */
text-decoration:none;/* 下線なし */
}
/* ページ内ナビゲーション */
/* ------------------------------------------------------- */
.pgin_navi {
border:0px solid #00ffff !important;/* 枠線 */
display: block !important;
overflow: hidden;
position: fixed;
bottom:85px;/* bottom→下からの位置 top→上からの位置 */
right: 25px;/* right→右からの位置 left→左から」の位置 */
max-width: 280px;/* 幅(最大幅) */
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
.pgin_navi, .pgin_navi li {
border: 0 none;/* 枠なし */
list-style-type: none;/* リスト表示(・)なし */
margin: 0;/* 余白なし */
padding: 0;/* 余白なし */
}
.pgin_navi li {
background-color:#ffccff;/* 背景色 */
text-align:center;/* 文字を中央寄せ */
font-size:12px;/* 文字の大きさ */
padding:1px 4px 1px 4px;/* 余白設定(上・右・下・左) */
}
.pgin_navi li:hover{/* カーソルを乗せたとき */
background-color:#ccffcc;/* 背景色 */
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
.pgin_navi li a{
color:#444444;/* 文字の色 */
display:block;
border-radius: 5px;/* CSS3角丸 */
-moz-border-radius: 5px;/* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
.pgin_navi li a:hover{/* カーソルを乗せたとき */
color:#ff00ff;/* 文字の色 */
text-decoration:none;/* 下線なし */
}
③ ページ（画面）の右下のページナビを消したい場合は
下記をＣＳＳへ追記
/* ------------------------------------------------------- */
/* ページの右下のページナビを消す */
/* ------------------------------------------------------- */
.footerNav{
display:none !important;
}
/* ページの右下のページナビを消す */
/* ------------------------------------------------------- */
.footerNav{
display:none !important;
}
④ 個別に色を変えたい場合は、下記をＣＳＳへ追記
/* ------------------------------------------------------- */
/* ページ内ナビゲーション 個別背景色 */
/* ------------------------------------------------------- */
.page_top{background-color:#cc0000 !important;}/* トップページ */
.messageB{background-color:#ccffcc !important;}/* メッセージボード */
.Art_n0,.Art_n1,.Art_n2,.Art_n3,.Art_n4,.Art_n5,
.Art_n6,.Art_n7,.Art_n8,.Art_n9,.Art_n10{/* 記事 */
background-color:#ffccff !important;}
.commentA{background-color:#ccffcc !important;}/* コメント */
.next_p{background-color:#ccffcc !important;}/* 次のページ */
.prev_p{background-color:#ccffcc !important;}/* 前のページ */
.ichiran{background-color:#ccffcc !important;}/* 記事一覧 */
/* カーソルを乗せたとき */
.page_top:hover{background-color:#0000cc !important;}/* トップページ */
.messageB:hover{background-color:#00ff00 !important;}/* メッセージボード */
.Art_n0:hover,.Art_n1:hover,.Art_n2:hover,.Art_n3:hover,.Art_n4:hover,.Art_n5:hover,
.Art_n6:hover,.Art_n7:hover,.Art_n8:hover,.Art_n9:hover,.Art_n10:hover{/* 記事 */
background-color:#ffcc00 !important;}
.commentA:hover{background-color:#00ff00 !important;}/* コメント */
.next_p:hover{background-color:#00ff00 !important;}/* 次のページ */
.prev_p:hover{background-color:#00ff00 !important;}/* 前のページ */
.ichiran:hover{background-color:#00ff00 !important;}/* 記事一覧 */
/* ------------------------------------------------------- */
/* ページ内ナビゲーション 個別文字色 */
/* ------------------------------------------------------- */
.page_top a{color:#000000 !important;}/* トップページ */
.messageB a{color:#444444 !important;}/* メッセージボード */
.Art_n0 a,.Art_n1 a,.Art_n2 a,.Art_n3 a,.Art_n4 a,.Art_n5 a,
.Art_n6 a,.Art_n7 a,.Art_n8 a,.Art_n9 a,.Art_n10 a{/* 記事 */
color:#777777 !important;}
.commentA a{color:#999999 !important;}/* コメント */
.next_p a{color:#999999 !important;}/* 次のページ */
.prev_p a{color:#999999 !important;}/* 前のページ */
.ichiran a{color:#999999 !important;}
/* カーソルを乗せたとき */
.page_top a:hover{color:#ff0000 !important;}/* トップページ */
.messageB a:hover{color:#ffccff !important;}/* メッセージボード */
.Art_n0 a:hover,.Art_n1 a:hover,.Art_n2 a:hover,.Art_n3 a:hover,.Art_n4 a:hover,.Art_n5 a:hover,
.Art_n6 a:hover,.Art_n7 a:hover,.Art_n8 a:hover,.Art_n9 a:hover,.Art_n10 a:hover{/* 記事 */
color:#ccffcc !important;}
.commentA a:hover{color:#ffff00 !important;}/* コメント */
.next_p: ahover{color:#ffff000 !important;}/* 次のページ */
.prev_p: ahover{color:#ffff00 !important;}/* 前のページ */
.ichiran: ahover{color:#ffff00 !important;}/* 記事一覧 */
/* ページ内ナビゲーション 個別背景色 */
/* ------------------------------------------------------- */
.page_top{background-color:#cc0000 !important;}/* トップページ */
.messageB{background-color:#ccffcc !important;}/* メッセージボード */
.Art_n0,.Art_n1,.Art_n2,.Art_n3,.Art_n4,.Art_n5,
.Art_n6,.Art_n7,.Art_n8,.Art_n9,.Art_n10{/* 記事 */
background-color:#ffccff !important;}
.commentA{background-color:#ccffcc !important;}/* コメント */
.next_p{background-color:#ccffcc !important;}/* 次のページ */
.prev_p{background-color:#ccffcc !important;}/* 前のページ */
.ichiran{background-color:#ccffcc !important;}/* 記事一覧 */
/* カーソルを乗せたとき */
.page_top:hover{background-color:#0000cc !important;}/* トップページ */
.messageB:hover{background-color:#00ff00 !important;}/* メッセージボード */
.Art_n0:hover,.Art_n1:hover,.Art_n2:hover,.Art_n3:hover,.Art_n4:hover,.Art_n5:hover,
.Art_n6:hover,.Art_n7:hover,.Art_n8:hover,.Art_n9:hover,.Art_n10:hover{/* 記事 */
background-color:#ffcc00 !important;}
.commentA:hover{background-color:#00ff00 !important;}/* コメント */
.next_p:hover{background-color:#00ff00 !important;}/* 次のページ */
.prev_p:hover{background-color:#00ff00 !important;}/* 前のページ */
.ichiran:hover{background-color:#00ff00 !important;}/* 記事一覧 */
/* ------------------------------------------------------- */
/* ページ内ナビゲーション 個別文字色 */
/* ------------------------------------------------------- */
.page_top a{color:#000000 !important;}/* トップページ */
.messageB a{color:#444444 !important;}/* メッセージボード */
.Art_n0 a,.Art_n1 a,.Art_n2 a,.Art_n3 a,.Art_n4 a,.Art_n5 a,
.Art_n6 a,.Art_n7 a,.Art_n8 a,.Art_n9 a,.Art_n10 a{/* 記事 */
color:#777777 !important;}
.commentA a{color:#999999 !important;}/* コメント */
.next_p a{color:#999999 !important;}/* 次のページ */
.prev_p a{color:#999999 !important;}/* 前のページ */
.ichiran a{color:#999999 !important;}
/* カーソルを乗せたとき */
.page_top a:hover{color:#ff0000 !important;}/* トップページ */
.messageB a:hover{color:#ffccff !important;}/* メッセージボード */
.Art_n0 a:hover,.Art_n1 a:hover,.Art_n2 a:hover,.Art_n3 a:hover,.Art_n4 a:hover,.Art_n5 a:hover,
.Art_n6 a:hover,.Art_n7 a:hover,.Art_n8 a:hover,.Art_n9 a:hover,.Art_n10 a:hover{/* 記事 */
color:#ccffcc !important;}
.commentA a:hover{color:#ffff00 !important;}/* コメント */
.next_p: ahover{color:#ffff000 !important;}/* 次のページ */
.prev_p: ahover{color:#ffff00 !important;}/* 前のページ */
.ichiran: ahover{color:#ffff00 !important;}/* 記事一覧 */