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

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

<script type="text/javascript">
<!--
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
//-->
</script>


<div id="PlagOpen1" style="display: none">
<ul><li><a href="#" title="OPEN" onclick="showPlagin(1);return false;">OPEN</a></li></ul></div>
<div id="PlagClose1" style="display: block">
<!-- ▼▼ -->

プラグインのHTMLを編集し、ここを表示させたいものに置き換えてください。

<!-- ▲▲ -->
<ul><li><a href="#" title="CLOSE" onclick="showPlagin(1);return false;">CLOSE</a></li></ul></div>

赤い箇所を上記のように編集すれば初期設定で開いた状態にすることが出来ます。

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

<script type="text/javascript">
<!--
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
//-->
</script>

<div id="PlagOpen1">
<ul><li><a href="#" title="OPEN" onclick="showPlagin(1);return false;">OPEN</a></li></ul></div>
<div id="PlagClose1" style="display: none">
<ul><li><a href="#" title="CLOSE" onclick="showPlagin(1);return false;">CLOSE</a></li></ul>
<!-- ▼▼ -->

プラグインのHTMLを編集し、ここを表示させたいものに置き換えてください。

<!-- ▲▲ -->
<ul><li><a href="#" title="CLOSE" onclick="showPlagin(1);return false;">CLOSE</a></li></ul></div>

赤い部分の記述を加えれば上部にも『Close』が表示されます。
青い部分の記述を削除すれば、下部に表示されていた『Close』を消すことができます。

プラグイン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"><!--
function icw(num) {
if(document.getElementById) {
if (document.getElementById('icu'+ num ).style.display=='block') {
document.getElementById('icu'+ num ).style.display='none';} else {
document.getElementById('icu'+ num ).style.display='block';}}}
--></script>

<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]="グループＡ,1,2";
C[2]="グループＢ,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";

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><a href="javascript:onclick=icw('+i+')">'+p[0]+'</a></b></p>';
I=I+'<ul id="icu'+i+'" style="display:none">';
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="'+A[q].innerHTML+'">'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
else {I+='<li class="branch"><a href="'+A[q].href+'" title="'+A[q].innerHTML+'">'+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="'+p[0]+'">'+p[0]+'</a></li></ul>';
} }
document.getElementById('ICA').innerHTML=I;
--></script>

赤い記述がオリジナルから新たに加わった部分です。
初期状態で展開した状態にしておきたい場合は none を block としてください。

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

〜
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="'+A[q].innerHTML+'">'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
else {I+='<li class="branch"><a href="'+A[q].href+'" title="'+A[q].innerHTML+'">'+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="'+p[0]+'">'+p[0]+'</a></li></ul>';
} }
document.getElementById('ICA').innerHTML=I;
--></script>

この赤い部分を削除してください。これだけでアイコンは表示されなくなります。

プラグインの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]="グループＡ,1,2";
C[2]="グループＢ,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";

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="'+A[q].innerHTML+'">'+A[q].innerHTML+'</a></li>'; A[q].title="-";}
else {I+='<li class="branch"><a href="'+A[q].href+'" title="'+A[q].innerHTML+'">'+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="'+p[0]+'">'+p[0]+'</a></li></ul>';
} }
document.getElementById('ICA').innerHTML=I;
--></script>

【ツリー化の手順】
FCafeのdanielさんのTree-CATEGORYと同様です。C[n]を編集します。
例

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

この場合１番目と２番目にあったカテゴリが『グループＡ』、３番目と４番目にあったカテゴリが『グループＢ』としてツリー化されます。C[3],C[4]…と好きなだけ追加してください。

【アイコン画像設定】
アイコン画像は各カテゴリごとに自由に変えられます。icon[n]を編集します。
例

/* ■アイコン画像URL */
icon[1] = "http://〜/A.gif";
icon[2] = "http://〜/B.gif";

icon[1]に設定したアイコン画像A.gifは、C[1]のアイコンとして表示されます。これもicon[3],icon[4]…と好きなだけ追加してください。

【アイコンは付けたいがグループ化は不要】
アイコンは付けたいけどグループ化(ツリー化)は必要ないという場合は

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

この部分を削除してください。

【行間を変えたい】
グループ(ツリー)内の行間を変更したい場合

#ICA li {
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
margin:0;
padding:2px 0;
}

グループ(ツリー)同士の間を変更したい場合

#ICA ul {
margin:2px 0 4px;
padding:0;
}

この赤い数値をお好みの間隔になるように設定してください。

【グループの大見出しの色を個別に変えたい】

/* ■ツリー化設定 */
C[1]="グループＡ,1,2";
C[2]="グループＢ,3,4";
/* ■見出しの色設定 */
var col=new Array(); var r=1;
col[1]="#ff0000";
col[2]="#0000ff";
/* ■アイコン画像URL */
〜
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 style="color:'+col[r++]+'">'+p[0]+'</b></p>';

この赤い部分の記述を加えてください。col[1]の色がC[1]の見出しの色に対応しています。
col[2],col[3]…と増やしてそれぞれの見出しの色を個別に設定できます。

この共有プラグインを一つだけ使うならそのまま使用できますが、複数使う場合は少し編集が必要です。

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

<script type="text/javascript">
<!--
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
//-->
</script>


<div id="PlagOpen1">
<ul><li><a href="#" title="OPEN" onclick="showPlagin(1);return false;">OPEN</a></li></ul></div>
<div id="PlagClose1" style="display: none">
<!-- ▼▼ -->

プラグインのHTMLを編集し、ここを表示させたいものに置き換えてください。

<!-- ▲▲ -->
<ul><li><a href="#" title="CLOSE" onclick="showPlagin(1);return false;">CLOSE</a></li></ul></div>

折りたたみしたい内容を
『プラグインのHTMLを編集し、ここを表示させたいものに置き換えてください。』
の部分に置き換えてください。

このプラグインを増やす度に
4箇所ある赤い数字の箇所を2,3,4…と他と重ならない適当な数字に変えてください。
これでそれぞれが正常に動作します。