ＦＣ２ブログの全記事をカテゴリ別で一覧表示する、つまりサイトマップを作る方法を紹介します。

古い記事がどんどん奥へ流されてしまうブログにこそサイトマップが必要だと思います。

お薦めカスタマイズなので是非挑戦してみてください。


HTMLを編集します。
テンプレートstandard,lightframeにより少し異なるので下記手順に従ってください。

【standard の場合】

～
<!--▲トラックバック表示▲-->

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="menu_outline3">
<div class="menu_title3">サイトマップ</div>
<div class="menu_cont3">
<div id="maplist">
<ul><!--titlelist--><li>
<span><%titlelist_category></span>
<a href="<%titlelist_url>"><%titlelist_title></a></li>
<!--/titlelist--></ul>
</div><!--/maplist-->
</div><!--/menu_cont3-->
</div><!--/menu_outline3-->
<script type="text/javascript"><!--
var A=document.getElementById('maplist').getElementsByTagName('A');
var S=document.getElementById('maplist').getElementsByTagName('span');
var C=new Array(); var I=""; var Flg=false;

/*--- カテゴリ名を記述 ---*/
C[0]="カテゴリ名その１";
C[1]="カテゴリ名その２";
C[2]="カテゴリ名その３";
C[3]="カテゴリ名その４";
/*------------------------*/

for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<p><b>【 '+C[i]+' 】</b></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><br />';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->

<!--permanent_area-->
<!--▼ページナビゲーション▼-->
～

最新バージョン(standard_ver.08以降)では上記該当箇所に<!--▼全記事一覧▼-->から<!--▲全記事一覧▲-->で囲まれた部分があります。そこに上記スクリプトを上書きしてください。


【lightframe の場合】

～
<!--▲トラックバック表示▲-->

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="plugin3_outline">
<div class="plugin3_title">サイトマップ</div>
<div class="plugin3_body" align="left">
<div id="maplist">
<ul><!--titlelist--><li>
<span><%titlelist_category></span>
<a href="<%titlelist_url>"><%titlelist_title></a></li>
<!--/titlelist--></ul>
</div><!--/maplist-->
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<script type="text/javascript"><!--
var A=document.getElementById('maplist').getElementsByTagName('A');
var S=document.getElementById('maplist').getElementsByTagName('span');
var C=new Array(); var I=""; var Flg=false;

/*--- カテゴリ名を記述 ---*/
C[0]="カテゴリ名その１";
C[1]="カテゴリ名その２";
C[2]="カテゴリ名その３";
C[3]="カテゴリ名その４";
/*------------------------*/

for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<p><b>【 '+C[i]+' 】</b></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><br />';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
～

カテゴリ名その～の部分にカテゴリを記述してください。
カテゴリ数に応じてC[4],C[5]…と必要なだけ付け足してください。
全てのカテゴリを記述する必要はありません。サイトマップに表示させたいカテゴリだけ記述してください。

【2009/04/09 追記】
記事が無いカテゴリは記述しないでください。正しく表示されません。

次に公式プラグインから「全記事表示リンク」をダウンロードします。
プラグインの設定→プラグインの追加[公式]→全記事表示リンクをダウンロード

全記事表示リンクを使ってみてください。全ての記事が自サイト内にカテゴリ別に表示されるはずです。プラグインタイトルの「全ての記事を表示する」は設定の変更で「サイトマップ」等お好みの文言に変えてください。

「サイトマップ」というタイトルから記事リストが始まるまでの間隔が狭いと感じたら、次の記述をスタイルシートに加えてください。

#maplist p {
margin-top:5px;
}

お好みの間隔になるように数値を設定してください。


現段階では各記事がリスト形式(・から始まる形)です。
これをツリー化形式にしたい方は更にスタイルシートを編集します。

スタイルシートの何処でもいいので
standard,lightframe共に同じく下記記述を加えます。

【ツリー化表示のためのスタイルシート追記】

#maplist 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;
}
#maplist li.end {
background-image: url(http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif);
}

これでサイトマップがツリー化で表示されます。

サイトマップでカテゴリ別に表示された全ての記事が一覧できれば、過去の記事にアクセスしてもらえる機会も増えそうですね。


【関連記事】

• サイトマップの各記事に日付を表示する
• ナビゲーション付きブログサイトマップ
• ブログサイトマップの記事表示順序を逆(古い順)にする
• サイトマップの記事を別窓で開く
• サイトマップに記事番号（通番）を表示する
• 親子カテゴリ対応サイトマップ
• アイコン付きサイトマップ（親子カテゴリ非対応）
• アイコン付きサイトマップ（親子カテゴリ対応）

関連記事

• Tree-CATEGORYの大見出しの前にアイコンを設置する (2007/01/18)
• 記事下部の日付、カテゴリ、トラックバック、コメントを編集する。 (2007/01/15)
• サイトマップの各記事に日付を表示する (2007/01/14)
• ブログのサイトマップの作り方 (2007/01/02)
• フリーエリア等に３列で表示させる (2006/12/27)
• カテゴリーのツリー化 (2006/12/26)
• 続きを読むを個別記事ページに遷移させる (2006/12/22)