以前に「
ブログのサイトマップの作り方」を紹介したことがありますが、これは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 シリーズの場合は赤い３カ所を変更してください。
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--) {
お好みに合わせてカスタマイズしてください。
【関連記事】
