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

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

アイコン付きツリー化カテゴリーにリンクタイトル説明文を設定する

以前に共有プラグイン『アイコン付きツリー化カテゴリー』を紹介しましたが、リンクにマウスを乗せたときにはカテゴリ名が表示されるようになっていました。この表示文言を自由に設定する方法を紹介します。


プラグインHTMLを編集します。

<style type="text/css" media="all">
<!--
#ICA p {
margin: 4px 0 2px;
}
#ICA ul {
margin:2px 0 4px;
padding:0;
}
#ICA li {
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
margin:0;
padding:2px 0;
}
#ICA li.branch {
background-image: url(http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif); /*ツリー画像 */
padding-left:20px;
}
#ICA li.branch_end {
background-image: url(http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif); /*ツリー画像(最後尾) */
padding-left:20px;
}
//-->
</style>

<div class="tree" id="ICA"><ul>
<!--category--><li>
<a href="<%category_link>" title=""><%category_name>&nbsp;(<%category_count>)</a>
</li><!--/category-->
</ul></div>

<script type="text/javascript"><!--
var A=document.getElementById('ICA').getElementsByTagName('A');
var C=new Array(); var icon=new Array(); var n=1; I="";

/* ■ツリー化設定 */
C[1]="グループA,1,2";
C[2]="グループB,3,4";

/* ■アイコン画像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";
icon[8] = "http://blog44.fc2.com/image/e/187.gif";
icon[9] = "http://blog44.fc2.com/image/e/188.gif";

/* ■各カテゴリの説明 */
var t=new Array(); var tn=1;
t[1]="説明1";
t[2]="説明2";
t[3]="説明3";
t[4]="説明4";
t[5]="説明5";
t[6]="説明6";
t[7]="説明7";
t[8]="説明8";
t[9]="説明9";


for (i=1;i<C.length;i++){ p=C[i].split(','); l=p.length; if(l>1){
I=I+'<p><img src='+icon[n++]+' align="absmiddle" border="0"> <b>'+p[0]+'</b></p>';
I=I+'<ul>';
for (k=1;k<l;k++){ q=p[k]-1;
if(k==l-1) {I+='<li class="branch_end"><a href="'+A[q].href+'" title="'+t[tn++]+'">'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
else {I+='<li class="branch"><a href="'+A[q].href+'" title="'+t[tn++]+'">'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
} I+='</ul>';
} }
for (i=0;i<A.length;i++){if (A[i].title!="-") {
p= A[i].innerHTML.split('&nbsp;');
I+='<ul><li><img src='+icon[n++]+' align="absmiddle" border="0"> <a href="'+A[i].href+'" title="'+t[tn++]+'">'+p[0]+'</a></li></ul>';
} }
document.getElementById('ICA').innerHTML=I;
--></script>


赤い部分が新しく追加、紫の部分が一部置き換えされた箇所です。
説明1、説明2、、、のところにお好みの説明分をいれてください。
関連記事
[ 2942 ]
失礼します。
突然ですが、左のカテゴリーの欄のように、
「カスタマイズ」「共有プラグイン」を
表示させるのは、どうすればいいんでしょうか?
お願いします
[ 2007/11/12 16:24 ] [ 編集 ]
[ 3392 ] リンクのツリー化をしたいのですが…
こちらのテンプレートを利用させて頂いてる葵と申します
様々なカスタマイズをチャレンジしていますが
一つ 乗り越えられない物があり ご質問させて
頂きました。

「アイコン付きツリー化カテゴリー」を
「アイコン付きツリー化リンク」に出来れば…と思い、
テンプレート工房様のサイトの中を
色々探してみてるのですが
未だ出来てません。
申し訳ありませんが、教えて下さいませんでしょうか?
[ 2008/06/12 12:06 ] [ 編集 ]
[ 3401 ] > 葵さん
記事を掲載したのでこちらを参考にしてください。

アイコン付きツリー化リンク
http://10plate.blog44.fc2.com/blog-entry-168.html
[ 2008/06/15 18:32 ] [ 編集 ]
コメントの投稿









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

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

いたお

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

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

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
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 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

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

09 | 2023/10 | 11
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 31 - - - -
ユーザータグ


△ ページトップへ戻る