以前に
ブログのサイトマップの作り方をご紹介しましたが、今回はこれにナビゲーションをつけるカスタマイズをご紹介します。
HTMLを編集します。
<!--▼サイトマップ▼-->
〜
<div class="〜"><a name="mapnavi_title">サイトマップ</a></div>
〜
/*--- カテゴリ名を記述 ---*/
〜
/*------------------------*/
I+='<p><b>■ カテゴリ一覧 ■</b></p>'
I+='<ul class="navi">'
for (i=0;i<C.length;i++) { I+='<li><a href="#'+i+'">'+C[i]+'</a></li>' }
I+='</ul>'
for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<a name="'+i+'" id="'+i+'"></a><br />';
I=I+'<p><b>【 '+C[i]+' 】</b>';
if (i!=C.length-1) {I=I+' <a href ="#'+(i+1)+'" title="次のカテゴリへ進む">▽</a>';}
if (i!=0) {I=I+' <a href ="#'+(i-1)+'" title="前のカテゴリへ戻る">△</a>';}
I=I+' <a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">▲</a>';
I=I+'</p><ul>';
for (j=0;j<S.length;j++) {
if (C[i]==S[j].innerHTML) {
if (Flg==true) {
I+='<li><a href="'+A[k].href+'">'+A[k].innerHTML+'</a></li>';}
k=j;Flg=true;}}
I+='<li class="end"><a href="'+A[k].href+'">'+A[k].innerHTML+'</a></li>';
I+='</ul>';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->
上記赤い記述のように書き換えてください。
次にスタイルシートを編集します。
#maplist ul.navi li {
background-image: none;
list-style-type:disc;
margin-left:20px;
padding-left:0px;
}
スタイルシートの末尾にこの記述を加えてください。
これでサイトマップにナビゲーションがつきます。記事が沢山あってサイトマップが長く伸びてしまう方にはお薦めのカスタマイズです。
HTMLを編集します。
<!--▼サイトマップ▼-->
〜
<div class="〜"><a name="mapnavi_title">サイトマップ</a></div>
〜
/*--- カテゴリ名を記述 ---*/
〜
/*------------------------*/
I+='<p><b>■ カテゴリ一覧 ■</b></p>'
I+='<ul class="navi">'
for (i=0;i<C.length;i++) { I+='<li><a href="#'+i+'">'+C[i]+'</a></li>' }
I+='</ul>'
for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<a name="'+i+'" id="'+i+'"></a><br />';
I=I+'<p><b>【 '+C[i]+' 】</b>';
if (i!=C.length-1) {I=I+' <a href ="#'+(i+1)+'" title="次のカテゴリへ進む">▽</a>';}
if (i!=0) {I=I+' <a href ="#'+(i-1)+'" title="前のカテゴリへ戻る">△</a>';}
I=I+' <a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">▲</a>';
I=I+'</p><ul>';
for (j=0;j<S.length;j++) {
if (C[i]==S[j].innerHTML) {
if (Flg==true) {
I+='<li><a href="'+A[k].href+'">'+A[k].innerHTML+'</a></li>';}
k=j;Flg=true;}}
I+='<li class="end"><a href="'+A[k].href+'">'+A[k].innerHTML+'</a></li>';
I+='</ul>';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->
上記赤い記述のように書き換えてください。
次にスタイルシートを編集します。
#maplist ul.navi li {
background-image: none;
list-style-type:disc;
margin-left:20px;
padding-left:0px;
}
スタイルシートの末尾にこの記述を加えてください。
これでサイトマップにナビゲーションがつきます。記事が沢山あってサイトマップが長く伸びてしまう方にはお薦めのカスタマイズです。
私も記事数が多くでサイトマップが長く伸びていたので、
これで簡単に行き来ができるようになりました^^
便利な機能をありがとうございました!
ただ最初赤字の部分を全部付けてしまったので
何も表示されなくて焦りました^^;
よく見れば
for (j=0;j<S.length;j++) {
から
<!--/titlelist_area-->
までは重複なんだって気がつきました^^;