以下の内容はhttp://10plate.blog44.fc2.com/blog-entry-220.htmlより取得しました。


親子カテゴリ対応サイトマップ

以前に「ブログのサイトマップの作り方」を紹介したことがありますが、これはFC2が親子カテゴリ機能を追加する前のことでした。

hatena chipsさんが、親子カテゴリに対応したカテゴリ別記事一覧表示方法を紹介してくれています。小粋空間さんのスクリプトを用いて、カテゴリ別の折りたたみも可能にしています。

これにナビゲーション等を付加し、サイトマップとして当サイトのテンプレートに導入する方法を紹介します。

【参考記事】
サイドメニューの折りたたみ for FC2 ブログ (小粋空間さん)
hatena chips: カテゴリ別全記事一覧を折りたたむ (hatena chipsさん)


HTMLを編集します。
<!--▲トラックバック表示▲-->の下に、下記を挿入してください。

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="plugin3_outline">
<div class="plugin3_title" id="mapnavi_title">サイトマップ</div>
<div class="plugin3_body">

<div id="sitemap">

<noscript><p>サイトマップを利用するためには JavaScript を有効にしてください。</p></noscript>

<!-- ▽ サイトマップ ナビゲーション ▽ -->
<b>■ カテゴリ一覧 ■</b><br />
<ul class="main_menu">
<!--category-->
<!--category_nosub-->
<li class="main_list">
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list">
<!--/category_parent-->
<!--category_sub_begin-->
<ul class="sub_menu">
<!--/category_sub_begin-->
<!--category_sub_hasnext-->
<li class="sub_list">
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end">
<!--/category_sub_end-->
<a href="#c<%category_no>" title="<%category_name>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>
</li>
<!--/category_sub_end-->
<!--/category-->
</ul>
<br />
<!-- △ サイトマップ ナビゲーション △ -->

<div class="display_no">
<ul>
<!--titlelist-->
<li name="<%titlelist_category_no>" id="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_title>"><%titlelist_title></a>
- <%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>
<!--/titlelist-->
</ul>
</div>

<!--category-->

<!--category_parent-->■<!--/category_parent-->
<!--category_nosub-->■<!--/category_nosub-->
<!--category_sub_hasnext--> □<!--/category_sub_hasnext-->
<!--category_sub_end--> □<!--/category_sub_end-->

<span id="subcategories<%category_no>name">
<a href="<%category_link>" title="<%category_name>" name="c<%category_no>" id="c<%category_no>"><b><%category_name></b> (<%category_count>)</a>
</span> <br />

<div id="subcategories<%category_no>list">

<script type="text/javascript">
<!--
var list = document.getElementsByName('<%category_no>');
var elm; var s;
if(list.length > 0) document.write('<ul class="sitemap_list">');
for (var i = 0; i < list.length; i++) {
elm = list.item(i);
s = elm.innerHTML;
if(i == list.length-1) {
document.write('<li class="branch_end">', s,'</li>');
} else {
document.write('<li class="branch">', s,'</li>');
}
}
if(list.length > 0) document.write('</ul>');
FoldNavigation('subcategories<%category_no>','on',false);
//--></script>

<div class="pgtop"><a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">△ カテゴリ一覧へ戻る</a></div>

</div>

<!--/category-->

</div><!-- /maplist -->
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--/titlelist_area-->
<!--▲サイトマップ▲-->


※上記は lightframe シリーズを想定しています。standard シリーズの場合は赤い3カ所を変更してください。
plugin3_outline → menu_outline3
plugin3_title → menu_title3
plugin3_body → menu_cont3


次にスタイルシートの末尾に以下を加えてください。

/* ▼ サイトマップ ▼ */
#sitemap {
margin-top:5px; /* 上の余白 */
text-align:left;
}

#sitemap ul.sitemap_list {
margin-left:30px; /* 各記事リストの左余白 */
}

.display_no {
display:none;
}

/* カテゴリ一覧へ戻る */
.pgtop {
text-align:right; /* 右寄せ */
}
/* ▲ サイトマップ ▲ */


これで記事をカテゴリ別に一覧表示することができます。

さらにカテゴリ別に折りたたみたい、ツリー表示したい方は、以下を参考にしてください。

【カテゴリ別に折りたたみたい】

小粋空間さんのスクリプトページから menufolder.js をダウンロードし、これをFC2管理画面の「ファイルアップロード」よりアップロードしてください。

そして HTML の<haad> ~ </head>の間に下記を加えてください。

<script type="text/javascript" src="http://~/menufolder.js" charset="utf-8"></script>


http://~の部分は menufolder.js をアップロードしたURLに置き換えてください。

これでカテゴリ別に折りたたみができます。
折りたたみマークを変えたければ、menufolder.js を編集する必要があります。
詳細は小粋空間さんのマニュアルを参考にしてください。

折りたたみが必要ないならば、HTMLの
FoldNavigation('subcategories<%category_no>','on',false);
を削除してください。

【ツリー表示にしたい】

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

/* ▼ サイトマップ(ツリー表示) ▼ */
#sitemap ul.sitemap_list li {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif");
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
padding:0 0 0 20px;
margin:0;
}

#sitemap ul.sitemap_list li.branch_end {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif");
}
/* ▲ サイトマップ(ツリー表示) ▲ */



【記事表示順序を逆(古い順)にしたい】

表示される記事の順序はトップページと同じく新しい記事ほど上に表示されます。この順序は環境設定で逆にすることができますが、サイトマップの表示順も同じく逆になります。

トップページでは新しい記事を上にしたいが、サイトマップでは古い記事を上にする、つまり通常の逆の順序で表示させたい場合、次の箇所を置き換えてください。

置き換え箇所

for (var i = 0; i < list.length; i++) {


置き換え後

for (var i = list.length - 1; i >= 0; i--) {



お好みに合わせてカスタマイズしてください。

【2009/07/22 追記】このカスタマイズは 2009年07月22日以降にダウンロードされたテンプレート(standardならver.09、lightframeならver.04)では実装されています。バージョンはHTMLかCSSの一番下を見ると確認できます。

【2009/09/02 追記】不必要なタグや文法違反等があったため、上記HTMLを新たに修正しました。
以下は以前掲載していたHTMLです。

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="plugin3_outline">
<div class="plugin3_title"><a name="mapnavi_title">サイトマップ</a></div>
<div class="plugin3_body">

<div id="sitemap">

<noscript><p>サイトマップを利用するためには JavaScript を有効にしてください。</p></noscript>

<!-- ▽ サイトマップ ナビゲーション ▽ -->
<b>■ カテゴリ一覧 ■</b><br />
<ul class="main_menu">
<!--category-->
<!--category_nosub-->
<li class="main_list" &align>
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list" &align>
<!--/category_parent-->
<!--category_sub_begin-->
<ul class="sub_menu">
<!--/category_sub_begin-->
<!--category_sub_hasnext-->
<li class="sub_list" &align>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end" &align>
<!--/category_sub_end-->
<a href="#c<%category_no>" title="<%category_name>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>
</li>
<!--/category_sub_end-->
<!--/category-->
</ul>
<br />
<!-- △ サイトマップ ナビゲーション △ -->

<div class="display_no">
<ul>
<!--titlelist-->
<li Name="<%titlelist_category_no>" ID="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>
- <%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>
<!--/titlelist-->
</ul>
</div>

<!--category-->

<!--category_parent-->■<!--/category_parent-->
<!--category_nosub-->■<!--/category_nosub-->
<!--category_sub_hasnext--> □<!--/category_sub_hasnext-->
<!--category_sub_end--> □<!--/category_sub_end-->

<span id="subcategories<%category_no>name">
<a href="<%category_link>" title="<%category_name>" name="c<%category_no>"><b><%category_name></b> (<%category_count>)</a>
</span> <br>

<div id="subcategories<%category_no>list">

<script type="text/javascript">
<!--
var list = document.getElementsByName('<%category_no>');
var elm; var s;
if(list.length > 0) document.write('<ul class="sitemap_list">');
for (var i = 0; i < list.length; i++) {
elm = list.item(i);
s = elm.innerHTML;
if(i == list.length-1) {
document.write('<li class="branch_end">', s,'</li>');
} else {
document.write('<li class="branch">', s,'</li>');
}
}
if(list.length > 0) document.write('</ul>');
FoldNavigation('subcategories<%category_no>','on',false);
//--></script>

<div class="pgtop"><a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">△ カテゴリ一覧へ戻る</a></div>

</div>

<!--/category-->

</div><!-- /maplist -->
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--/titlelist_area-->
<!--▲サイトマップ▲-->


【2009/09/05 追記】IEが対応していないJavaScript (document.getElementsByClassName) を使用したため、IEではサイトマップが正常に表示されない問題がありました。誠に申しわけありませんm(__)m
この問題に対応し上記HTMLを修正しました。以前のHTMLは以下になります。

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="plugin3_outline">
<div class="plugin3_title" id="mapnavi_title">サイトマップ</div>
<div class="plugin3_body">

<div id="sitemap">

<noscript><p>サイトマップを利用するためには JavaScript を有効にしてください。</p></noscript>

<!-- ▽ サイトマップ ナビゲーション ▽ -->
<b>■ カテゴリ一覧 ■</b><br />
<ul class="main_menu">
<!--category-->
<!--category_nosub-->
<li class="main_list">
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list">
<!--/category_parent-->
<!--category_sub_begin-->
<ul class="sub_menu">
<!--/category_sub_begin-->
<!--category_sub_hasnext-->
<li class="sub_list">
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end">
<!--/category_sub_end-->
<a href="#c<%category_no>" title="<%category_name>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>
</li>
<!--/category_sub_end-->
<!--/category-->
</ul>
<br />
<!-- △ サイトマップ ナビゲーション △ -->

<div class="display_no">
<ul>
<!--titlelist-->
<li class="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_title>"><%titlelist_title></a>
- <%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>
<!--/titlelist-->
</ul>
</div>

<!--category-->

<!--category_parent-->■<!--/category_parent-->
<!--category_nosub-->■<!--/category_nosub-->
<!--category_sub_hasnext--> □<!--/category_sub_hasnext-->
<!--category_sub_end--> □<!--/category_sub_end-->

<span id="subcategories<%category_no>name">
<a href="<%category_link>" title="<%category_name>" name="c<%category_no>" id="c<%category_no>"><b><%category_name></b> (<%category_count>)</a>
</span> <br />

<div id="subcategories<%category_no>list">

<script type="text/javascript">
<!--
var list = document.getElementsByClassName('<%category_no>');
var elm; var s;
if(list.length > 0) document.write('<ul class="sitemap_list">');
for (var i = 0; i < list.length; i++) {
elm = list.item(i);
s = elm.innerHTML;
if(i == list.length-1) {
document.write('<li class="branch_end">', s,'</li>');
} else {
document.write('<li class="branch">', s,'</li>');
}
}
if(list.length > 0) document.write('</ul>');
FoldNavigation('subcategories<%category_no>','on',false);
//--></script>

<div class="pgtop"><a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">△ カテゴリ一覧へ戻る</a></div>

</div>

<!--/category-->

</div><!-- /maplist -->
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--/titlelist_area-->
<!--▲サイトマップ▲-->


【2009/09/06 追記】この記事の修正はlightframeシリーズのver.05以降、standardシリーズのver.10以降には実装済みです。各バージョン情報はHTMLかCSSの最下部に記されています。


【2009/10/31 追記】サイトマップの各記事へのリンクを別窓で開きたい場合は、以下のように赤い部分を加えてください。


<!-- △ サイトマップ ナビゲーション △ -->

<div class="display_no">
<ul>
<!--titlelist-->
<li name="<%titlelist_category_no>" id="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_title>" target="_blank"><%titlelist_title></a>
- <%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>
<!--/titlelist-->
</ul>
</div>





【関連記事】


関連記事



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

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