FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

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

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

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-->
までは重複なんだって気がつきました^^;
[ 2007/02/13 11:21 ] [ 編集 ]
私も早速カスタマイズしました。
ブログは更新するほど記事が増えていくので
こういう機能があると更に便利ですね。

また、sionさんの書き込みで
重複部分をチェックしながら編集したので
焦らずにすみました^^;

ARIGATOございました☆
[ 2007/02/13 17:03 ] [ 編集 ]
こんばんは、sionさん。
早速つけましたね^^
そういわれて見ると赤い部分は全て追加部分のように受け取れますね。変わったところだけ赤くすれば良いのに手抜きしてしまいました^^;
[ 2007/02/13 23:41 ] [ 編集 ]
いたお様、こんばんは。
ちょっとたいへんなカスタマイズの相談でしたが、想像以上のナビが付き大満足です。
とっても便利になりました。

いたお様はほんとすごいですね。
これからも使いやすいカスタマイズ楽しみにしています。
m(__)m

[ 2007/02/13 23:45 ] [ 編集 ]
こんばんは、かどりんさん。
焦らずにすみましたか。先行者のsionさんに感謝です^^;
大変な記事だったので実際にこのカスタマイズをしてくれる方がいると嬉しいです^^
[ 2007/02/13 23:57 ] [ 編集 ]
こんばんは、しんさん。
ナビゲーション付きブログサイトマップは好評のようです。素晴らしいアイデアを有難う御座いました。
また何かご希望があったら教えてくださいね^^
[ 2007/02/14 00:06 ] [ 編集 ]
こちらも参考にさせていただきました。
サイトマップはあると便利だと思っていたので、
とても助かります。
ありがとうございました。
また何かあれば参考にさせていただきますので
よろしくお願いします。
[ 2007/03/28 01:44 ] [ 編集 ]
こちらの記事を参考にしてサイトマップを作ってみたのですがなぜかうまく表示されません。何回も入力ミスが無いか確認もしたのですが、さっぱり原因が掴めません。
何か制約とかあるんでしょうか?よろしかったら当方ブログを覗いてやってください。
[ 2007/05/06 23:25 ] [ 編集 ]
ブログのサイトマップの作り方
http://10plate.blog44.fc2.com/blog-entry-119.html
の記事の中で、カテゴリー名を記述するところがありますが、
racchiさんの場合、

/*--- カテゴリ名を記述 ---*/
C[0]="Bicycle";
C[1]="デジカメ";
C[2]="iPAQ hx2750";
C[3]="Favorites";
C[4]="戯れ言";
/*---カテゴリ名を記述 ---*/

というようにツリー化した大見出し(大カテゴリ名)を入力しているのが原因です。

大見出しではなく、各カテゴリ名を入力してみて下さい。
それで、正常に動作すると思います。

例としては↓このような感じで。
/*--- カテゴリ名を記述 ---*/
C[0]="FSR";
C[1]="Goods";
C[2]="昼ポタ";
C[3]="夜ポタ";
 〜
/*--- カテゴリ名を記述 ---*/
[ 2007/05/06 23:55 ] [ 編集 ]
あ!そういうことか(^-^;
と思って早速やってみましたが、ダメでした。
頭がパニックになりそうなので、今夜はこれくらいにしてまた明日やってみます。
それでも、すぐに救いの手を差し伸べてくださって、本当にありがとうございました。
[ 2007/05/07 00:37 ] [ 編集 ]
かどりんさん、早くて丁寧です^^
いつも有り難うございます。

racchiさん、JavaScriptの中に重複している記述が見受けられます。

ナビゲーション付きブログサイトマップ
http://10plate.blog44.fc2.com/blog-entry-138.html

もう一度この記述を正しく貼付けてください。これで解決すると思います。
[ 2007/05/07 01:24 ] [ 編集 ]
寝る前にこちらのコメントを確認して再度チェックしてみると3行ほど重複箇所がありましたが、修正後、無事に表示されるようになりました!

かどりんさん、いたおさん、素早い対応本当に助かりました。
感謝感謝です♪
[ 2007/05/07 01:35 ] [ 編集 ]
サイトマップが表示されましたね^^
racchiさんのように記事件数が多いブログにはサイトマップがとても役立つと思いますよ。
[ 2007/05/07 23:39 ] [ 編集 ]
NAVIは プルダウンメニューでも
利用できたので 大変助かりました。
重ね重ねありがとうございました。 
[ 2007/05/08 17:08 ] [ 編集 ]
プルダウンメニューでも利用できることは私も知りませんでした。嬉しい誤算です^^;
[ 2007/05/08 23:07 ] [ 編集 ]
こちらのカスタマイズも取り入れさせて頂きました。
(ブログ自体の記事がすくないのでまだ必要ないかも
しれないのですが、後からいじるのは大変そうなので・・)
ありがとうございますっ。

そこで質問なのですが、このナビゲーションの
リストマークを画像にすることはできるのでしょうか?
よーく見てみたのですが、どうしていいのか
わからなくて。
お時間あるときにでも教えてくださいませ。
[ 2008/02/06 13:50 ] [ 編集 ]
はじめまして。
「ブログのサイトマップの作り方」と「ナビゲーション付きブログサイトマップ 」の記事を参考にしてみたのですが
どうしても、うまく表示されません。。
まだ記事のないカテゴリーに別のカテゴリーの記事がズラーっと表示されてしまいます。
どこがいけなかったのかもわからずこちらにコメントさせていただきました。。
まだ記事数が少なくってわかりにくいかと思いますが、どうぞよろしくお願いします。。
[ 2008/02/08 23:35 ] [ 編集 ]
>まだ記事のないカテゴリーに別のカテゴリーの記事がズラーっと表示されてしまいます。
これに関しては下記の記事でいたおさんが書いてます。

ブログのサイトマップの作り方
http://10plate.blog44.fc2.com/blog-entry-119.html#comment2015

仕様上0件のものをサイトマップに表示させることはできません。記事数0件のカテゴリはサイトマップに表示させないようにしてください。
[ 2008/02/09 10:43 ] [ 編集 ]
かどりん様ありがとうございました。
記事数0件のカテゴリを表示させないようにしたら
ズラーっと並んだ件は解決いたしましたが、
1番目のカテゴリの記事が2番目のカテゴリの記事にも入ってしまいます。
もしよろしければ当サイトを覗いてくださいませんか?
[ 2008/02/12 01:51 ] [ 編集 ]
サイトマップのカテゴリ名を記述するところで

/*--- カテゴリ名を記述 ---*/
C[0]="当サイトについて";
C[1]="なぜタダで稼げるのか ";
C[2]="フリーメールアドレス";
 〜

「なぜタダで稼げるのか」の後に半角のスペースが入っていませんか?
見たところ、半角スペースが入ってるのが原因かと思います。

/*--- カテゴリ名を記述 ---*/
C[0]="当サイトについて";
C[1]="なぜタダで稼げるのか";

半角を入れないようにすれば大丈夫かと思いますが。
[ 2008/02/12 11:10 ] [ 編集 ]
かどりん様
早急な回答ありがとうございます。
ご指摘どおり訂正したら解決いたしました。

半角スペースがあるだけでフォームが違ってくるなんて
思ってもみませんでした(汗)
これからは、すみずみまでチェックするよう心がけます^^
[ 2008/02/12 23:45 ] [ 編集 ]
はじめまして。
ブログサイトマップつけさせていただきました。
ありがとうございます><
このサイトマップを右のプロフィールの部分のように
枠で囲むことってできますか?
やりかた教えて下さい御願いします><
[ 2008/02/20 03:05 ] [ 編集 ]
すいません;
いろいろいじくっていたらできてしましました><
もしおかしいところなどがあったら指摘御願いします。
[ 2008/02/20 04:25 ] [ 編集 ]
Cottonwoodhill 別別館 の管理人 Cottonwoodhillと申します。今回、こちらの管理人様ご提供のサイトマップ作成記事を利用して、当ブログでもサイトマックを作る事が可能となりました。有難うございます。

私のブログには記事が総数4300を超え、どうしたものかと今まで悩んでおりました。有難うございます。全部の記事を表示する事は諦め、アルバム・レビューの記事だけに限定してみましたがそれでも大満足です。
[ 2008/05/06 22:00 ] [ 編集 ]
コメントの投稿













管理者にだけ表示を許可する
この記事のトラックバックURL


ブログ検索
カテゴリー
プロフィール

Author:いたお
皆さんに喜ばれるテンプレートを目指して頑張ります!


当サイトはリンクフリーです。
ブログ全記事表示
ブロとも申請フォーム
カレンダー
06 | 2008/07 | 08
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -