FC2ブログのテンプレートこうぼう

プラグイン『フリーエリア』をダウンロードしてつぎのきじゅつをてんぷけてください。

<style type="text/css" media="all">
<!--
#ILI p {
margin: 4px 0 2px;
}
#ILI ul {
margin:2px 0 4px;
padding:0;
}
#ILI li {
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
margin:0;
padding:2px 0;
}
#ILI li.branch {
background-image: url(http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif); /*ツリーがぞう */
padding-left:20px;
}
#ILI 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="ILI">
<ul>
<!--link-->
<li &align><a href="<%link_url>" title="<%link_name>" target="_blank"><%link_name></a></li>
<!--/link-->
<li><a href="./?admin">かんりしゃページ</a></li>
</ul>
</div>

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

【ツリーかのてじゅん】
アイコンつきツリーかカテゴリーとどうようです。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]…とすきなだけついかしてください。

【ぎょうかんをかえたい】
グループ(ツリー)ないのぎょうかんをへんこうしたいばあい

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

グループ(ツリー)どうしのかんをへんこうしたいばあい

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

このあかいすうちをおこのみのかんかくになるようにせっていしてください。

【かんりしゃページへのリンクがひつようないばあい】
リンクのいちばんしたにある『かんりしゃページ』がひつようなければこのぶぶんをさくじょしてください。

<li><a href="./?admin">かんりしゃページ</a></li>

【かんれんきじ】

• アイコンつきツリーかカテゴリー
• 『アイコンつきツリーかカテゴリー』のアイコンをけす
• アイコンつきツリーかカテゴリーをグループでおりたたむ
• 「かんりしゃページ」をいどうする

このカスタマイズはしようしているテンプレートによりことなります。
わたしのテンプレートのばあい、つぎのきじゅつをスタイルシートのまつびにくわえてください。

【standardシリーズのばあい】

.article a img {
border-top: #999999 1px solid;
border-right: #999999 1px solid;
border-left: #999999 1px solid;
border-bottom: #999999 1px solid;
}

【lightframeシリーズのばあい】

.ently_body a img {
border-top: #999999 1px solid;
border-right: #999999 1px solid;
border-left: #999999 1px solid;
border-bottom: #999999 1px solid;
}

これで
きじいがいのリンクがぞうはリンクがぞうのわくをかえるカスタマイズが、
きじのなかのリンクがぞうはこんかいのカスタマイズがはんえいされます。

【かんれんきじ】

• リンクがぞうのわくをかえる

スタイルシートのまつびにつぎのきじゅつをついかしてください。

a img {
border-top: #999999 1px solid;
border-right: #999999 1px solid;
border-left: #999999 1px solid;
border-bottom: #999999 1px solid;
}

しへんあるわくのひとつひとつをこべつにせっていできます。
じょうきのばあい、うえからうわべ、うへん、さへん、かへんのじゅんでしょく、はば、かたちをせっていしています。

かたちはsolid（じっせん）のほかにdotted（てんせん）、dashed（あらいてんせん）、double（にじゅうせん）、groove（たにせん）、ridge（やません）、inset（ないせん）、outset（がいせん）などがあります。

わくをけしたいばあいはつぎのきじゅつをスタイルシートのまつびについかしてください。

a img {
border:none;
}

【かんれんきじ】

• きじにとうこうしたリンクがぞうだけわくをかえる
  

くずれるげんいんとしては

１、プラグイン
２、きじ
３、テンプレート

の３つがかんがえられます。このうちどれがげんいんかきりわけしなければなりません。

まずあらたにわたしのテンプレートをダウンロードして、きょうゆうプラグインとてをくわえたこうしきプラグインをすべていちじてきにひひょうじにしてかくにんしてください。これでせいじょうにひょうじされれば「１、プラグイン」がげんいんです。
ひひょうじにしていたプラグインをひとつずつひょうじさせていくともんだいとなるプラグインがみつけられます。

じょうきでせいじょうにひょうじされなければ、きょうゆうプラグインとてをくわえたこうしきプラグインをひひょうじじょうたいのまま、きじひょうじけんすうを１けんにしてかんたんなぶんしょうのみのテストきじをかいてひょうじしてみてください。これでせいじょうにひょうじされればかこにかいた「２、きじ」がげんいんです。
かこのきじをひとつずつひょうじさせていくともんだいとなるきじがみつけられます。

きょうゆうプラグインとてをくわえたこうしきプラグインをすべてひひょうじ、かつかんたんなぶんしょうのみのテストきじいっけんひょうじでくずれるようなら「３、テンプレート」がげんいんです。
そのテンプレートのせいさくしゃにといあわせてください。

HTMLをへんしゅうします。
わたしのテンプレートのばあい、つぎのようなかしょがあるはずです。

【light_frameのばあい】

<!--▼▼ ヘッダー ▼▼-->
<div id="header_outline">
<div id="header_body">
<h1><a href="<%url>" title="<%blog_name> トップページへ"><%blog_name></a></h1>
<div class="intro"><%introduction></div>
</div><!--/header-->
</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->

【standardのばあい】

<!--▼▼▼▼ ヘッダー（タイトルぶぶん）▼▼▼▼-->
<tr><td id="header">

<h1><a href="<%url>"><%blog_name></a></h1>
<h2><%introduction></h2>

</td></tr>
<!--▲▲▲▲ ヘッダー（タイトルぶぶん）▲▲▲▲-->

じょうきのあかいぶぶんをつぎのきじゅつにおきかえてください。

<!--not_permanent_area--><%blog_name><!--/not_permanent_area--> <!--permanent_area--><%sub_title><!--/permanent_area-->

これできじページごとにブログタイトルをきじタイトルにかえることができます。

HTMLをへんしゅうします。

<!--▼さいしんきじナビゲーション▼-->
〜
<!--topentry-->
<li>
<!--▼newマーク▼-->
<script type="text/javascript">
nw(<%topentry_year>,<%topentry_month>,<%topentry_day>,<%topentry_hour>)
</script>
<!--▲newマーク▲-->
<a href="#entry<%topentry_no>" title="きじのせんとうへ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
〜
<!--▲さいしんきじナビゲーション▲-->

あかいぶぶんをくわえてください。これで『さいしんのきじ』のべんりナビにも「NEW」マークがつきます。

HTMLをへんしゅうします。

<!--▼ エントリー（きじ）▼-->
〜
<!--more--><%topentry_more><!--/more-->

<!--permanent_area-->
<br />
ここをひょうじさせたいものにおきかえてください。
<br />
<!--/permanent_area-->

あかいぶぶんをくわえてください。これできじページのみにひょうじさせることができます。

HTMLをへんしゅうします。
しょきじょうたいのlightframeはつぎのようなこうせいになっています。

〜

<div id="center-left">

<div id="center">
〜
</div><!--/center-->

<div id="left">
〜
</div><!--/left-->

<br class="c-both">

</div><!--/left_center-->

<div id="right">
〜
</div><!--/right-->

〜

これをつぎのようにならべかえます。〜のぶぶんもふくめてならべかえてください。

〜

<div id="right">
〜
</div><!--/right-->

<div id="center-left">

<div id="left">
〜
</div><!--/left-->

<div id="center">
〜
</div><!--/center-->

<br class="c-both">

</div><!--/left_center-->

〜

ひだりメニュー、うきことの２カラムにしたいばあいは
<div id="right">
〜
</div><!--/right-->
を、
みぎメニュー、さきことの２カラムにしたいばあいは
<div id="left">
〜
</div><!--/left-->
をそれぞれさくじょしてください。
つぎにスタイルシートをへんしゅうします。

/******** ▼ サイトのはば ▼ */
#outline {
width:1000px;
margin:0 10px;
}
#center {
width:526px; /* さくじょ */
float:right; /* さくじょ */
margin-left:230px; /* leftのはば+かんかく */
}
#left {
width:217px;
float:left;
}
#right {
width:217px;
float:right;
}
#center-left {
width:763px; /* さくじょ */
float:left; /* さくじょ */
margin-right:230px; /* rightのはば+かんかく */
}
/******** ▲ サイトのはば ▲ */

はいいろのぶぶんをさくじょ、ちゃいろぶぶんをついかしてください。ただし
ひだりメニュー、うきことの２カラムにしたいばあいは
margin-right:230px; /* rightのはば+かんかく */を、
みぎメニュー、さきことの２カラムにしたいばあいは
margin-left:230px; /* leftのはば+かんかく */
をそれぞれさくじょしてください。

これでさゆうのメニューカラムはこてい、きじぶぶんのちゅうおうカラムはブラウザにあわせたかへんはばになります。
しょうしょうむずかしいカスタマイズなので「ふくせい」でコピーをバックアップしてからカスタマイズしてください。

HTMLをへんしゅうします。
プラグイン３のうえにせっちしたいばあいは
<!--▼▼ プラグイン カテゴリー３ ▼▼-->のうえに、
プラグイン３のしたにせっちしたいばあいは
<!--▲▲ プラグイン カテゴリー３ ▲▲-->のしたにつぎのきじゅつをくわえてください。

<!--▼さいしんきじナビゲーション▼-->
<!--not_permanent_area-->
<!--not_category_area-->
<!--not_date_area-->
<!--not_search_area-->
<!--not_titlelist_area-->
<!--index_area-->
<div class="menu_title">さいしんのきじ</div>
<!--/index_area-->
<!--not_index_area-->
<div class="menu_title">アーカイブ</div>
<!--/not_index_area-->
<div class="menu_cont" style="margin-top: 1em;">
<ul>
<!--topentry-->
<li><a href="#entry<%topentry_no>" title="きじのせんとうへ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
</ul>
</div><!--/menu_cont-->
<div class="page_navi">
<!--prevpage-->
<a href="<%prevpage_url>">≪まえページ</a>
<!--/prevpage-->
<!--nextpage-->
<a href="<%nextpage_url>">じぺーじ≫</a>
<!--/nextpage-->
</div><!--/page_navi-->
<!--/not_titlelist_area-->
<!--/not_search_area-->
<!--/not_date_area-->
<!--/not_category_area-->
<!--/not_permanent_area-->
<!--▲さいしんきじナビゲーション▲-->

これでさいしんのきじのべんりナビがせっちできます。