http://10plate.blog44.fc2.com/blog-entry-138.html

ナビゲーション付きブログサイトマップ

以前にブログのサイトマップの作り方をご紹介しましたが、今回はこれにナビゲーションをつけるカスタマイズをご紹介します。

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>

上記赤い記述のように書き換えてください。
次にスタイルシートを編集します。

#maplist ul.navi li {
background-image: none;
list-style-type:disc;
margin-left:20px;
padding-left:0px;
}

スタイルシートの末尾にこの記述を加えてください。

これでサイトマップにナビゲーションがつきます。記事が沢山あってサイトマップが長く伸びてしまう方にはお薦めのカスタマイズです。

【関連記事】

関連記事

[ 2007/02/13 00:34 ] カスタマイズ共通カスタマイズ | TB(0) | CM(31)