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>

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

#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)

≪ 同窓で開くリンクと別窓で開くリンク | HOME | リストの「・」を消す ≫

[ 1173 ]

早速つけてみました！
私も記事数が多くでサイトマップが長く伸びていたので、
これで簡単に行き来ができるようになりました＾＾
便利な機能をありがとうございました！

ただ最初赤字の部分を全部付けてしまったので
何も表示されなくて焦りました＾＾；
よく見れば
for (j=0;j<S.length;j++) {
から

までは重複なんだって気がつきました＾＾；

[ 2007/02/13 11:21 ] [ 編集 ]

[ 1178 ] > sionさん

こんばんは、sionさん。
早速つけましたね＾＾
そういわれて見ると赤い部分は全て追加部分のように受け取れますね。変わったところだけ赤くすれば良いのに手抜きしてしまいました＾＾；

[ 2007/02/13 23:41 ] [ 編集 ]

[ 1179 ]

いたお様、こんばんは。
ちょっとたいへんなカスタマイズの相談でしたが、想像以上のナビが付き大満足です。
とっても便利になりました。

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

[ 2007/02/13 23:45 ] [ 編集 ]

[ 1181 ] > かどりんさん

こんばんは、かどりんさん。
焦らずにすみましたか。先行者のsionさんに感謝です＾＾；
大変な記事だったので実際にこのカスタマイズをしてくれる方がいると嬉しいです＾＾

[ 2007/02/13 23:57 ] [ 編集 ]

[ 1183 ] > しんさん

こんばんは、しんさん。
ナビゲーション付きブログサイトマップは好評のようです。素晴らしいアイデアを有難う御座いました。
また何かご希望があったら教えてくださいね＾＾

[ 2007/02/14 00:06 ] [ 編集 ]

[ 1561 ]

こちらも参考にさせていただきました。
サイトマップはあると便利だと思っていたので、
とても助かります。
ありがとうございました。
また何かあれば参考にさせていただきますので
よろしくお願いします。

[ 2007/03/28 01:44 ] [ 編集 ]

[ 1851 ] サイトマップがうまく表示されません

こちらの記事を参考にしてサイトマップを作ってみたのですがなぜかうまく表示されません。何回も入力ミスが無いか確認もしたのですが、さっぱり原因が掴めません。
何か制約とかあるんでしょうか？よろしかったら当方ブログを覗いてやってください。

[ 2007/05/06 23:25 ] [ 編集 ]

[ 1854 ] >かどりんさん

あ！そういうことか(^-^;
と思って早速やってみましたが、ダメでした。
頭がパニックになりそうなので、今夜はこれくらいにしてまた明日やってみます。
それでも、すぐに救いの手を差し伸べてくださって、本当にありがとうございました。

[ 2007/05/07 00:37 ] [ 編集 ]

[ 1858 ] > racchiさん、かどりんさん

かどりんさん、早くて丁寧です＾＾
いつも有り難うございます。

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

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

もう一度この記述を正しく貼付けてください。これで解決すると思います。

[ 2007/05/07 01:24 ] [ 編集 ]

[ 1860 ] > いたおさん、かどりんさん

寝る前にこちらのコメントを確認して再度チェックしてみると３行ほど重複箇所がありましたが、修正後、無事に表示されるようになりました！

かどりんさん、いたおさん、素早い対応本当に助かりました。
感謝感謝です♪

[ 2007/05/07 01:35 ] [ 編集 ]

[ 1862 ] > racchiさん

サイトマップが表示されましたね＾＾
racchiさんのように記事件数が多いブログにはサイトマップがとても役立つと思いますよ。

[ 2007/05/07 23:39 ] [ 編集 ]

[ 1866 ]

ＮＡＶＩは　プルダウンメニューでも
利用できたので　大変助かりました。
重ね重ねありがとうございました。　

[ 2007/05/08 17:08 ] [ 編集 ]

[ 1870 ] > えるさん

プルダウンメニューでも利用できることは私も知りませんでした。嬉しい誤算です＾＾；

[ 2007/05/08 23:07 ] [ 編集 ]

[ 3097 ] このナビゲーションのリストマークを画像に・・・

こちらのカスタマイズも取り入れさせて頂きました。
(ブログ自体の記事がすくないのでまだ必要ないかも
しれないのですが、後からいじるのは大変そうなので・・)
ありがとうございますっ。

そこで質問なのですが、このナビゲーションの
リストマークを画像にすることはできるのでしょうか？
よーく見てみたのですが、どうしていいのか
わからなくて。
お時間あるときにでも教えてくださいませ。

[ 2008/02/06 13:50 ] [ 編集 ]

[ 3101 ] 教えてください。。

はじめまして。
「ブログのサイトマップの作り方」と「ナビゲーション付きブログサイトマップ」の記事を参考にしてみたのですが
どうしても、うまく表示されません。。
まだ記事のないカテゴリーに別のカテゴリーの記事がズラーっと表示されてしまいます。
どこがいけなかったのかもわからずこちらにコメントさせていただきました。。
まだ記事数が少なくってわかりにくいかと思いますが、どうぞよろしくお願いします。。

[ 2008/02/08 23:35 ] [ 編集 ]

[ 3112 ] 度々すみません。。

かどりん様ありがとうございました。
記事数０件のカテゴリを表示させないようにしたら
ズラーっと並んだ件は解決いたしましたが、
1番目のカテゴリの記事が２番目のカテゴリの記事にも入ってしまいます。
もしよろしければ当ｻｲﾄを覗いてくださいませんか？

[ 2008/02/12 01:51 ] [ 編集 ]

[ 3117 ] ありがとうございました

かどりん様
早急な回答ありがとうございます。
ご指摘どおり訂正したら解決いたしました。

半角スペースがあるだけでフォームが違ってくるなんて
思ってもみませんでした（汗）
これからは、すみずみまでチェックするよう心がけます＾＾

[ 2008/02/12 23:45 ] [ 編集 ]

[ 3126 ] 教えてください＞＜

はじめまして。
ブログサイトマップつけさせていただきました。
ありがとうございます＞＜
このサイトマップを右のプロフィールの部分のように
枠で囲むことってできますか？
やりかた教えて下さい御願いします＞＜

[ 2008/02/20 03:05 ] [ 編集 ]

[ 3127 ] すいません＞＜；

すいません；
いろいろいじくっていたらできてしましました＞＜
もしおかしいところなどがあったら指摘御願いします。

[ 2008/02/20 04:25 ] [ 編集 ]

[ 3266 ] ありがとうございます

Cottonwoodhill 別別館の管理人　Cottonwoodhillと申します。今回、こちらの管理人様ご提供のサイトマップ作成記事を利用して、当ブログでもサイトマックを作る事が可能となりました。有難うございます。

私のブログには記事が総数4300を超え、どうしたものかと今まで悩んでおりました。有難うございます。全部の記事を表示する事は諦め、アルバム・レビューの記事だけに限定してみましたがそれでも大満足です。

[ 2008/05/06 22:00 ] [ 編集 ]

[ 3784 ] 初めまして

はじめまして(*- -)(*_ _)ﾍﾟｺﾘ
此方のテンプレを使わせて頂いたり記事を参考にカスタマイズさせて頂いています。
そして今ナビゲーション付きサイトマップがうまくいかなくて行き詰ってますorz
一つもない記事のカテゴリを指定していて、表示させない方がいいようなので消したんですが反映されず。
何回も自分でやったのですがうまくいかないのでよろしければ時間の都合がよい時間に目を通して頂けるとありがたいです。

[ 2009/03/29 16:32 ] [ 編集 ]

[ 3787 ] > abaさん

HTMLがこの記事の赤い部分と一致していません。今一度コピーペーストして確認してみてください。

[ 2009/03/29 19:17 ] [ 編集 ]

[ 3798 ] あら

一度元に戻していたようです(;´▽｀A``
わざわざ有難うございました。

[ 2009/03/31 02:27 ] [ 編集 ]

[ 4426 ] ナビゲーションの各タイトルがセンターに・・・

こんにちは<(_ _)>
気になっていたサイトマップ（カテゴリ別　記事一覧）、
使わせて頂きました！

サイトマップの各カテゴリ名や
タイトルの文字が何故か大きくなってしまい、
スタイルシートに

#maplist {
text-align:left;
font-size:12px; /* フォントサイズ */
}

と追記してみたらどうにか直ったのですが、
ナビゲーションの各カテゴリ名がセンターになってしまいます。
ほかは左寄りなので、ここも左寄りにしたいのですが
何がいけないのでしょうか…。

[ 2009/05/24 16:37 ] [ 編集 ]

[ 4434 ]

私が配布しているテンプレートではないので確かなことは言えないのですが、スタイルシートの末尾に以下を追加してみてください。

#maplist {
text-align:left;
}

[ 2009/05/24 20:19 ] [ 編集 ]

[ 4479 ] ありがとうございました

テンプレートが違うのに大変失礼致しましたm(_ _)m
残念ながら左に寄りませんでしたが、センターのままにしておきます。
お手数おかけ致しました<(_ _)>

折りたたみプラグインもすごく使いやすく（説明も分かりやすく）、このサイトマップもホントに求めているものでした。これからも愛用させて頂きます<(_ _)>

[ 2009/05/26 20:51 ] [ 編集 ]

[ 4483 ] > Kilinさん

そうでしたか、すみません。

#main_block {
text-align:left;
}

とすれば左に寄るかもしれません。
ただし余計なものまで左に寄って弊害がでるかもしれませんが・・・

[ 2009/05/26 22:43 ] [ 編集 ]

[ 4488 ] またまたありがとうございます。

#main_block {
を入れてみても変わらなかったのですが

#maplist ul.navi li {
に
text-align:left; を追加してみたら
左に寄りました！！
お手数お掛けしました<(_ _)>

サイトマップ、あるとホントに分かりやすいので
（自分でもタイトルがおかしいのに気がついたり）
助かります！！

[ 2009/05/27 19:50 ] [ 編集 ]

[ 4491 ] > Kilinさん

またしても私の指摘が外れてしまい申しわけありません。
でも解決されたようで良かったです＾＾

[ 2009/05/27 22:41 ] [ 編集 ]

[ 4732 ]

いたお様、はじめまして。
以前からちょくちょくカスタマイズのお知恵を拝借していました。おかげ様で、念願だった「サイトのイメージにマッチした全記事表示ページ（カテゴリごと）」になりました。
本当にありがとうございます。自力では絶対に無理でした。
今後も参考にさせていただきたいと思います。

[ 2009/06/26 05:42 ] [ 編集 ]

[ 4733 ] > sakuraさん

お役に立てれて嬉しいです＾＾
なかなか更新が滞っていますが、どうぞ参考にしてくださいね。

[ 2009/06/27 01:43 ] [ 編集 ]

コメントの投稿