以下の内容は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>
<!--/titlelist_area-->

<!--▲サイトマップ▲-->


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

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



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

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


【関連記事】

関連記事



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-138.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.13