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


ブログのサイトマップの作り方

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

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

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


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]="カテゴリ名その1";
C[1]="カテゴリ名その2";
C[2]="カテゴリ名その3";
C[3]="カテゴリ名その4";
/*------------------------*/

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]="カテゴリ名その1";
C[1]="カテゴリ名その2";
C[2]="カテゴリ名その3";
C[3]="カテゴリ名その4";
/*------------------------*/

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


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

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


【関連記事】

関連記事



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

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