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

サイトマップ（親子カテゴリ非対応）の各カテゴリにアイコン画像を表示する方法を紹介します。


HTMLを編集します。

<!--▼サイトマップ▼-->
<!--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]="カテゴリ名その４";
/*------------------------*/

var icon=new Array();
/* ■アイコン画像URL */
icon[1] = "http://blog44.fc2.com/image/e/180.gif";
icon[2] = "http://blog44.fc2.com/image/e/181.gif";
icon[3] = "http://blog44.fc2.com/image/e/182.gif";
icon[4] = "http://blog44.fc2.com/image/e/183.gif";
icon[5] = "http://blog44.fc2.com/image/e/184.gif";
icon[6] = "http://blog44.fc2.com/image/e/185.gif";
icon[7] = "http://blog44.fc2.com/image/e/186.gif";

for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<p><b><img src='+icon[i+1]+' align="absmiddle" border="0" /> 【 '+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-->
<!--▲サイトマップ▲-->

赤い箇所が新たに加わった記述です。
icon[n]="画像URL";
を好きなだけ追加してアイコンを表示してください。


【関連記事】

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

関連記事

• 新着記事にサムネイル画像表示 (2009/06/15)
• 記事タイトルの最初の一文字を大きくする (2009/06/12)
• アイコン付きサイトマップ（親子カテゴリ対応） (2009/06/09)
• アイコン付きサイトマップ（親子カテゴリ非対応） (2009/06/09)
• 親子カテゴリの折りたたみ (2009/06/02)
• コメントの投稿者名と日付をコメントタイトルの右に表示する (2009/05/31)
• コメントに番号（通番）を表示する (2009/05/26)