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

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

アイコン付きサイトマップ(親子カテゴリ非対応)

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


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

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";
を好きなだけ追加してアイコンを表示してください。


【関連記事】


関連記事
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2016/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2016/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。