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

ＦＣ２ブログの全記事をカテゴリ別で一覧表示する、つまりサイトマップを作る方法を紹介します。
古い記事がどんどん奥へ流されてしまうブログにこそサイトマップが必要だと思います。
SEOにも効果的なお薦めカスタマイズなので是非挑戦してみてください。

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]…と必要なだけ付け足してください。
全てのカテゴリを記述する必要はありません。サイトマップに表示させたいカテゴリだけ記述してください。

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

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

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

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

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

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