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]="グループＡ,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";

/* ■各カテゴリの説明 */
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、、、のところにお好みの説明分をいれてください。

プラグイン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 としてください。

まずヘッダー内<head>～</head>の中のJavaScriptを確認してください。

<head>
～

<script language="JavaScript"><!--

function mySetCookie(myCookie,myValue,myDay){
myExp = new Date();
myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000));
myItem = "@" + myCookie + "=" + escape(myValue) + ";";
myExpires = "expires="+myExp.toGMTString();
document.cookie = myItem + myExpires;
}
function myGetCookie(myCookie){
myCookie = "@" + myCookie + "=";
myValue = "";
myStr = document.cookie + ";" ;
myOfst = myStr.indexOf(myCookie);
if (myOfst != -1){
myStart = myOfst + myCookie.length;
myEnd = myStr.indexOf(";" , myStart);
myValue = unescape(myStr.substring(myStart,myEnd));
}
return myValue;
}

// --></script>

～

<script language="JavaScript"><!--

function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}

// --></script>

～
</head>

<script language="JavaScript"><!--　から　// --></script>　まで囲まれた部分をメモ帳などのテキストエディタに貼り付けてください。

メモ帳などのテキストエディタに貼り付ける内容

function mySetCookie(myCookie,myValue,myDay){
myExp = new Date();
myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000));
myItem = "@" + myCookie + "=" + escape(myValue) + ";";
myExpires = "expires="+myExp.toGMTString();
document.cookie = myItem + myExpires;
}
function myGetCookie(myCookie){
myCookie = "@" + myCookie + "=";
myValue = "";
myStr = document.cookie + ";" ;
myOfst = myStr.indexOf(myCookie);
if (myOfst != -1){
myStart = myOfst + myCookie.length;
myEnd = myStr.indexOf(";" , myStart);
myValue = unescape(myStr.substring(myStart,myEnd));
}
return myValue;
}

function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}

これを拡張子.jsとして適当な名前で保存してください。（例：test.js）

このファイルをサーバにアップします。
FC2ブログの場合は管理画面からファイルのアップロード→ファイルの選択→アップロード

ヘッダー内のJavaScriptは削除し、代わりの次の一行を加えてください。

<script type="text/javascript" src="jsファイルのURL"></script>

あれだけ大量にあったJavaScriptの記述がこの一行になり随分スッキリしました。
検索エンジンはソース上部に書かれているキーワードほど重要視するので、上部を占める無意味なJavaScriptを外部化することでSEO効果が得られるようです。

1. なんでもいいので適当なテンプレートをダウンロードし、『バックアップ１』など適当な名前に変える



2. 『バックアップ１』のテンプレート編集画面を開いたまま、別窓でオリジナルテンプレートの編集画面を開く



3. オリジナルテンプレートのHTMLにマウスカーソルを置いて、Ctrlキー押しながら[A] (全て選択)、次にCtrlキー押しながら[C] (コピー)



4. 『バックアップ１』のHTMLにマウスカーソルを置いて、Ctrlキー押しながら[V] (貼り付け)



5. HTMLと同様にスタイルシートもオリジナルテンプレートから『バックアップ１』へコピー



6. 『バックアップ１』のテンプレート編集画面下にある更新を押して終了

これでもしオリジナルテンプレートに何か問題が起きても、『バックアップ１』に切り替えれば問題はありません。
難しそうなカスタマイズの前にはバックアップをとることをお薦めします。

便利ナビは次のタグを目印に遷移します。

【standardの場合】

<!--▼ エントリー（記事）▼-->
<!--topentry-->
<h3><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照"><%topentry_title>&nbsp;</a></h3>

【lightframeの場合】

<!--▼ エントリー（記事）▼-->
<!--topentry-->
<div class="ently_outline">
<h2 class="ently_title">
<a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照">
<%topentry_title>&nbsp;</a></h2>

この赤い部分を削除し、お望みの所に次のタグを挿入してください。

<a name="entry<%topentry_no>" id="entry<%topentry_no>"></a>

便利ナビはこの記述が挿入された箇所に遷移します。

プラグイン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を編集します。

<!--▼サイトマップ▼-->
～
/*--- カテゴリ名を記述 ---*/
～
/*------------------------*/

for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<p><b>【 '+C[i]+' 】</b></p><ul>';
for (j=S.length-1;j>=0;j--) {
if (C[i]==S[j].innerHTML) {
if (Flg==true) {
～
<!--▲サイトマップ▲-->

この赤い一行だけ置き換えてください。これで通常の逆、古い記事ほど上に表示されます。
記事内容が前回掲載記事に関係するもの、例えば連載小説などの場合は有効なカスタマイズですね。


【関連記事】

• ブログのサイトマップの作り方
• サイトマップの各記事に日付を表示する
• ナビゲーション付きブログサイトマップ
• サイトマップの記事を別窓で開く
• サイトマップに記事番号（通番）を表示する
• 親子カテゴリ対応サイトマップ
• アイコン付きサイトマップ（親子カテゴリ非対応）
• アイコン付きサイトマップ（親子カテゴリ対応）

HTMLのリンクを入れたい場所に次の記述を挿入します。

【画像使用】

<a href="#top" title="ページ最上部へ"><img src="画像URL"></a>

【テキストリンク】

<a href="#top">ページ最上部へ</a>

ちゃんさんご紹介有難う御座いました。

【2009/04/17 追記】
FireFoxではリンクの飛び先指定が必要でした。
HTMLの<body>の下に、次の行を加えてください。

<body>
<a name="top"></a>

これですべてのブラウザで、同ページの最上部へ移動するリンクが作れます。

この『未分類』は消すことが出来ませんが、名前を変えることは出来ます。これを利用して

1.最も記事数が少ないカテゴリ名(例：はじめに)を適当な名前(例：はじめにＢ)に変える

2.『未分類』を『はじめに』と名前を変える

3.全ての『はじめにＢ』の記事を『はじめに』へカテゴリを変える

4.はじめにＢを削除する

これで余計なカテゴリ『未分類』を事実上消すことが出来ると思います。