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を編集します。

〜

for (j=0;j<S.length;j++) {
if (C[i]==S[j].innerHTML) {
if (Flg==true) {
I+='<li><a href="'+A[k].href+'" target="_blank">'+A[k].innerHTML+'</a></li>';}
k=j;Flg=true;}}
I+='<li class="end"><a href="'+A[k].href+'" target="_blank">'+A[k].innerHTML+'</a></li>';
I+='</ul>';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->

〜

上記赤い部分を付け加えてください。これで各記事が別窓で開かれるようになります。

HTMLを編集します。

<head>
〜
<title><%blog_name> <%sub_title></title>
〜
</head>

この部分を次のように編集します。

<head>
〜
<title><%sub_title> <%blog_name></title>
〜
</head>

これでページタイトルは「記事タイトル+ブログタイトル」となります。

HTMLを編集します。

<!--▼ エントリー（記事）▼-->
<!--not_index_area-->

〜

<!--/not_index_area-->
<!--▲ エントリー（記事）▲-->

これでトップページでは記事が表示されなくなります。
ブログらしくなく見せるテクニックとして有効かも知れません。


追記（2007年5月19日）
このカスタマイズを適用すると、「次ページ≫」で新しい記事が表示されない問題がありました。
（例：１ページの記事表示数を５つと設定していた場合、トップページの「次ページ≫」をクリックすると６つ目の記事から表示されてしまいます）
この問題を解決するために更に次のカスタマイズを施してください。

HTMLに次のような箇所があります。

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
〜
<!--▲ページナビゲーション(個別記事)▲-->
<!--/permanent_area-->

<!--not_permanent_area-->
<!--▼ページナビゲーション(全体ページ)▼-->
〜
<!--▲ページナビゲーション(全体ページ)▲-->
<!--/not_permanent_area-->

※standardシリーズには(個別記事)と(全体ページ)の表示がありません。

これを次のように編集します。

<!--permanent_area-->
<!--▼ページナビゲーション(個別記事)▼-->
〜
<!--▲ページナビゲーション(個別記事)▲-->
<!--/permanent_area-->

<!--not_index_area-->
<!--not_permanent_area-->
<!--▼ページナビゲーション(全体ページ)▼-->
〜
<!--▲ページナビゲーション(全体ページ)▲-->
<!--/not_permanent_area-->
<!--/not_index_area-->

<!--index_area-->
<!--▼ページナビゲーション(トップページ)▼-->
<p class="page_navi">
| <a href="<%url>" title="<%blog_name>">HOME</a> |
<a href="<%url>page-0.html" title="次ページへ進む">次ページ≫</a>
</p><!--page_navi-->
<!--▲ページナビゲーション(トップページ)▲-->
<!--/index_area-->

赤い部分を加えてください。これでトップページの「次ページ≫」で最新の記事が表示されます。