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

<table style="width:90%; font-size:11pt; color:#000000;">
<tr>
<td valign="top">

１列目に表示される部分

</td>
<td valign="top">

２列目に表示される部分

</td>
<td valign="top">

３列目に表示される部分

</td>
</tr>
</table>

各パラーメタの数値をお好みに設定して使用してください。
width: (テーブルの幅)
font-size: (文字の大きさ)
color: (文字の色)

以前はカテゴリー等をツリー化する方法としてJUGEMカスタマイズ講座のtakkyunさんが紹介しているスクリプトを利用した方法が有名でした。
(ワンダと巨像と土と空のNICOさんがカテゴリーのツリー化の手順を解説されています)

しかしこの方法は全ての記事のカテゴリーを編集し直す必要があり、既に記事を沢山書いている方にとっては敷居が高いカスタマイズでした。

今現在で私が知る最も簡単にツリー化できる方法は、FCafeのdanielさんが紹介している共有プラグインTree-CATEGORYを使う方法です。

【Tree-CATEGORY】
まず共有プラグインからTree-CATEGORYをダウンロードします。
(検索機能を使うとすぐに見つけられます)

次にプラグインTree-CATEGORYのHTMLを編集します。
(管理画面→プラグインの設定→HTMLの編集)

<div class="tree" id="CA" style="line-height:1.3;"><ul>
～
/*--------------------- 各カテゴリの説明 -------------*/
t[1]="";
t[2]="";
t[3]="";
t[4]="";
t[5]="";
t[6]="";
t[7]="";
t[8]="";
t[9]="";
/*---------------------- グループ（大カテゴリ） --------*/
C[1]="GROUP-A,1,2,3";
C[2]="GROUP-B";
/*---------------------------------------------------*/
～

この場合、通常の公式プラグイン「カテゴリ」で表示される１行目,２行目,３行目のカテゴリをGROUP-Aという大見出しでツリー化されます。
同様に必要な数だけC[2],C[3]と増やしてください。このツリー化プラグインの優れている点は、ツリー化する必要の無いカテゴリはそのままに出来ることです。C[*]に記述しなかったカテゴリはツリー化されないまま表示されます。
ツリー化の行間はstyle="line-height:1.3;"の記述を書き加えることで制御できます。お好みの数値に設定してください。


【説明つきカテゴリーリスト】
ツリー化とはまた少し違うかも知れませんが、ブログで小説！の麻生(Adankadan)さんが紹介する共有プラグイン「説明つきカテゴリーリスト」もお薦めです。

<!--
下記「説明*」の部分を書き換えてください。

要らない行は、
「 cattl[*] = ""; 」
こんな感じで文字無しに。「 + ulstyl」も削る必要があります。

カテゴリーの数が20越えると「cattl[*]…」の追加が必要です。

プラグイン提出元：『ブログで小説！』http://adankadan.blog47.fc2.com/
-->

<SCRIPT language="JavaScript"><!--
cattl = new Array();
ulstyl = "<ul style='padding:0;margin-top:5px;margin-bottom:10px;'>"
cattl[1] = "<b>【カスタマイズ】</b>" + ulstyl ;
cattl[2] = "";
cattl[3] = "" ;
cattl[4] = "</ul><b>【その他】</b>" + ulstyl ;
cattl[5] = "";
cattl[6] = "";
cattl[7] = "</ul>説明7" + ulstyl ;
cattl[8] = "</ul>説明8" + ulstyl ;
cattl[9] = "</ul>説明9" + ulstyl ;
～

プラグインのHTMLソース中に説明があるとおりです。
上記の例で行くと１行目のカテゴリの上に【カスタマイズ】,４行目のカテゴリの上に【その他】と表示されます。

[表示例]

【カスタマイズ】
・～
・～
・～
【その他】
・～
・～
・～

各間隔もお好きな数値を入れて設定すると良いでしょう。
margin-top: (説明見出しからカテゴリが始るまでの間隔)
margin-bottom: (各最後尾のカテゴリから次の説明見出しまでの間隔)

【左カラムを消して２カラムにする】

HTMLを編集します。下記箇所に赤い部分の記述を加えてください。

<!--▼▼▼ 左側ブロック ▼▼▼-->
<td class="left_outline" valign="top">

<!--index_area-->
<!--▼▼ プラグイン カテゴリー１ ▼▼-->
<!--plugin-->
<!--plugin_first-->

～

<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー１ ▲▲-->
<!--/index_area-->

</td>
<!--▲▲▲ 左側ブロック ▲▲▲-->

これでトップ以外の個別記事ページ等では左カラム(プラグイン１)が消えます。

消えた左カラム(プラグイン１)を右カラム(プラグイン２)の下に表示させたい場合は、さらに下記箇所に赤い部分の記述を加えます。

<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー２ ▲▲-->

<!--not_index_area-->
<!--▼▼ プラグイン カテゴリー１ ▼▼-->
<!--plugin-->
<!--plugin_first-->

<div class="menu_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<table width="100%"><tr><td class="menu_cont">
<div style="margin: 10px 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description></div>
<div style="margin: 10px 0; text-align:<%plugin_first_align>">
<%plugin_first_content>
</div>
<div style="margin: 10px 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description2></div>
</td></tr></table><!--/menu_cont-->
<hr class="left_width" />

<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー１ ▲▲-->
<!--/not_index_area-->

</td>
<!--▲▲▲ 右側ブロック ▲▲▲-->

これでトップ以外の個別記事ページ等では、左カラムにあったものが右カラムの下に移動します。


【右カラムを消して２カラムにする】

HTMLを編集します。下記箇所に赤い部分の記述を加えてください。

<!--▼▼▼ 右側ブロック ▼▼▼-->
<td class="right_outline" valign="top">

<!--index_area-->
<!--▼▼ プラグイン カテゴリー２ ▼▼-->
<!--plugin-->
<!--plugin_second-->

～

<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー２ ▲▲-->
<!--/index_area-->

</td>
<!--▲▲▲ 右側ブロック ▲▲▲-->

これでトップ以外の個別記事ページ等では右カラム(プラグイン２)が消えます。

消えた右カラム(プラグイン２)を左カラム(プラグイン１)の下に表示させたい場合は、さらに下記箇所に赤い部分の記述を加えます。

<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー１ ▲▲-->

<!--not_index_area-->
<!--▼▼ プラグイン カテゴリー２ ▼▼-->
<!--plugin-->
<!--plugin_second-->

<div class="menu_title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></div>
<table width="100%"><tr><td class="menu_cont">
<div style="margin: 10px 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description></div>
<div style="margin: 10px 0; text-align:<%plugin_second_align>">
<%plugin_second_content>
</div>
<div style="margin: 10px 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description2></div>
</td></tr></table><!--/menu_cont-->
<hr class="right_width" />

<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー２ ▲▲-->
<!--/not_index_area-->

</td>
<!--▲▲▲ 左側ブロック ▲▲▲-->

これでトップ以外の個別記事ページ等では、右カラムにあったものが左カラムの下に移動します。

HTMLを編集します。
まず次のような箇所を見つけてください。

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

<!--more_link-->
<div id="varP<%topentry_no>">
～
<!--more-->
<%topentry_more><!--/more-->

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

この部分を下記記述に書き換えます。

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

<!--more_link-->
<div class="readmore"><a href="<%topentry_link>#more">続きを読む</a></div>
<!--/more_link-->
<!--more-->
<a name="more"></a>
<hr noshade size="1">
<%topentry_more>
<!--/more-->

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

これで「続きを読む」をクリックしたときに個別ページに遷移されるようになります。

【2009/08/02 追記】

HTMLにclass="readmore"を加えました。

【2009/09/03 追記】

遷移先を追記部分からではなくページトップにしたい場合は、青い部分の#moreと<a name="more"></a>を削除してください。
追記部分を分ける罫線が不要であれば、紫部分の<hr noshade size="1"> を削除してください。前文から追記までの余白を増やしたければ、ここに改行タグ<br />を加えてください。

HTMLを編集します。
テンプレートにより編集箇所が違います。

【standardの場合】

<!--▼▼▼▼ メインボディ（コンテンツ部分）▼▼▼▼-->
<tr><td id="main_body">

<!--▼ 横カレンダー ▼-->
<div class="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>
≪
<!--calender2-->
<span class="line_cal_day"><%days></span>
<!--/calender2-->
≫
<a href="<%next_month_link>"><%next_year> <%next_month></a>
</div>
<!--▲ 横カレンダー ▲-->

<table style="margin: 1em" border="0" cellspacing="0">

<tr>

<!--▼▼▼ 左側ブロック ▼▼▼-->

【lightframeの場合】

<!--▲▲ ヘッダー ▲▲-->

<!--▼ 横カレンダー ▼-->
<div class="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>
≪
<!--calender2-->
<span class="line_cal_day"><%days></span>
<!--/calender2-->
≫
<a href="<%next_month_link>"><%next_year> <%next_month></a>
</div>
<!--▲ 横カレンダー ▲-->

<div id="center-left">

<div id="center">

<!--▼▼ プラグイン カテゴリー３ ▼▼-->

次にスタイルシートを編集します。
standard,lightframe共に何処でもいいので下記記述を加えます。

/* 横カレンダー */
.line_calendar {
font-size:10pt; /* 文字の大きさ */
color:#cccccc; /* 文字の色 */
margin-bottom:10px; /* カレンダー下の間隔 */
text-align:center;
}
.line_cal_day {
margin-left:3px; /* 日付の間隔(左) */
margin-right:3px; /* 日付の間隔(右) */
}

文字の色や大きさ、文字間の間隔はお好みに設定してください。

【2009/10/21 追記】

記事のある日付の背景に画像を設定したいときは、スタイルシートの末尾に以下を加えてください。

.line_cal_day a {
background-image: url("画像URL");
padding:2px; /* 余白 */
}

横カレンダーの両脇には、前月、翌月へのリンクが表示されます。翌月が未来だった場合リンクを表示させたくない場合は、HTMLに以下の赤い部分を加えてください。

<!--▼ 横カレンダー ▼-->
<div class="line_calendar" id="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>
≪
<!--calender2-->
<span class="line_cal_day"><%days></span>
<!--/calender2-->
<!--not_index_area-->
≫
<a href="<%next_month_link>"><%next_year> <%next_month></a>
<!--/not_index_area-->
</div>
<!--▲ 横カレンダー ▲-->

ただしこれには欠点があり、過去月からリンクを辿ると未来の月へのリンクも表示されてしまうのでご了承ください。

HTMLを編集します。

～
<!--▲▲ プラグイン カテゴリー2 ▲▲-->

</div><!--/right-->

<br class="c-both">

<!--▼▼ ページ下部フリーエリア ▼▼-->
<div class="plugin3_outline">
<div class="plugin3_title">ここにタイトルを記述</div>
<div class="plugin3_body">

ここに好きなタグや文言を挿入

</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--▲▲ ページ下部フリーエリア ▲▲-->

<!--▼▼ フッター ▼▼-->
～

これでプラグイン３と同じデザインの枠でフリースペースを設置できます。お好きなようにご活用ください。


【追記 2008/06/15】
上記カスタマイズはフリースペースが全体のサイズ幅で設置されます。
プラグイン３の幅（記事の幅）と同じ幅で設置したい場合は次の箇所に挿入してください。

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

<!--▼▼ ページ下部フリーエリア ▼▼-->
<div class="plugin3_outline">
<div class="plugin3_title">ここにタイトルを記述</div>
<div class="plugin3_body">

ここに好きなタグや文言を挿入

</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--▲▲ ページ下部フリーエリア ▲▲-->

<!--▲▲ メイン表示 ▲▲-->

</div><!--/center-->
～

記事入力画面で画像を挿入しようとするとタグが書き込まれますが、このタグに下記記述を加えます。

【画像を左、文字を右にする場合】

<a href="http://blog-imgs-19.fc2.com/1/0/p/10plate/eaglegd.gif" target="_blank"><img style="float:left; margin-right:10px;" src="http://blog-imgs-19.fc2.com/1/0/p/10plate/eaglegd.gif" alt="光の翼" border="0"></a>ここに書いた文字が画像の右に表示されます。<br clear="all">
ここから書いた文章が画像の下に表示されます。

【画像を右、文字を左にする場合】

<a href="http://blog-imgs-19.fc2.com/1/0/p/10plate/eaglegd.gif" target="_blank"><img style="float:right; margin-left:10px;" src="http://blog-imgs-19.fc2.com/1/0/p/10plate/eaglegd.gif" alt="光の翼" border="0"></a>ここに書いた文字が画像の左に表示されます。<br clear="all">
ここから書いた文章が画像の下に表示されます。

marginの数値は画像と文字の間隔です。お好みの数値に設定してください。

【lightframe の場合】

スタイルシートを編集します。

/*********************** ▼ サイトの幅 ▼ */
～
#center {
width:526px;
float:left;
}
#left {
width:217px;
float:right;
}
～
/*********************** ▲ サイトの幅 ▲ */

これで記事を左カラム、プラグインを中央と右カラムに表示することができます。


【standard の場合】

HTMLを編集します。
<!--▼▼▼ 左側ブロック ▼▼▼-->
から
<!--▲▲▲ 左側ブロック ▲▲▲-->
で囲まれた部分を下記位置に移動します。

</td>
<!--▲▲▲ 中央ブロック ▲▲▲-->

<!--▼▼▼ 左側ブロック ▼▼▼-->
<td class="left_outline" valign="top">

～

</td>
<!--▲▲▲ 左側ブロック ▲▲▲-->

<!--▼▼▼ 右側ブロック ▼▼▼-->
<td class="right_outline" valign="top">

これで記事部分とプラグイン１のカラムが入れ替わります。簡単なカスタマイズですが左と中央を入れ替えるだけでかなりイメージが変わりますよ。

HTMLを編集します。

【standard】

<!--▼▼ メイン表示 ▼▼-->

<!--▼ エントリー（記事）▼-->
<!--topentry-->
<h3><img src="http://～" align=absmiddle />
<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">
<img src="http://～" align=absmiddle />
<a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照">
<%topentry_title>&nbsp;</a></h2>

"http://～"にはアイコン画像があるURLを記述してください。
アイコン画像と文字列の中央が揃えて表示されるはずですが、下端を揃えたい場合は
align=absmiddle
を
align=absbottom
と書き換えてください。

HTMLを編集します。

<!--▼▼ カテゴリ、月別、検索結果ナビゲーション ▼▼-->

<!--▼カテゴリー別記事ナビゲーション▼-->
<!--category_area-->
<div class="category_navi">
<div class="menu_title">カテゴリー &nbsp;[<%sub_title> ]</div>
～
</div><!--/page_navi-->
</div><!--/category_navi-->
<!--/category_area-->
<!--▲カテゴリー別記事ナビゲーション▲-->

<!--▼月別記事ナビゲーション▼-->
<!--date_area-->
<div class="date_navi">
<div class="menu_title">月別アーカイブ &nbsp;[ <%now_year>年<%now_month>月 ]&nbsp;</div>
～
</div><!--/page_navi-->
</div><!--/date_navi-->
<!--/date_area-->
<!--▲月別記事ナビゲーション▲-->

<!--▼検索結果ナビゲーション▼-->
<!--search_area-->
<div class="search_navi">
<div class="menu_title">[<%sub_title> ] を含む記事</div>
～
</div><!--/page_navi-->
</div><!--/search_navi-->
<!--/search_area-->
<!--▲検索結果ナビゲーション▲-->

<!--▲▲ カテゴリ、月別、検索結果ナビゲーション ▲▲-->

次にスタイルシートを編集します。
スタイルシートの何処でもいいので次の記述を加えます。

/* カテゴリナビゲーションの背景 */
.category_navi {
background-image: url(http://～); /* 画像のURL */
background-repeat: no-repeat; /* 繰り返し表示しない場合 */
background-position: center; /* 画像を中央寄せする場合 */
}

/* 月別アーカイブナビゲーションの背景 */
.date_navi {
background-image: url(http://～); /* 画像のURL */
background-repeat: no-repeat; /* 繰り返し表示しない場合 */
background-position: center; /* 画像を中央寄せする場合 */
}

/* 検索ナビゲーションの背景 */
.search_navi {
background-image: url(http://～); /* 画像のURL */
background-repeat: no-repeat; /* 繰り返し表示しない場合 */
background-position: center; /* 画像を中央寄せする場合 */
}

該当記事数によってナビゲーション部分の広さが変わってくるので、それを考慮した背景画像を用意しなければなりません。