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

HTMLを編集します。
赤い部分を加え、青い部分を削除してください。

【standardの場】

<!--▼コメント表示▼-->
<!--comment_area-->
<a name="comment_list"></a><br />
<div class="article">
<!--comment-->
<p><strong><a name="comment<%comment_no>" id="comment<%comment_no>"><%comment_title></a> <%comment_url+name> [ <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> ] </strong></p>
<%comment_body>
<div class="comment_navi">
[ <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> ]
<SCRIPT LANGUAGE="JavaScript">
v = "<%comment_url>";
iffunc(v);
function iffunc(b)
{
if (b) {
document.write("<a href='<%comment_url>' target='_blank'>"+"<%comment_mail>"+"</a> <a href='<%comment_url>' target='_blank'><%comment_name></a>");
} else {
document.write("<%comment_mail> <%comment_name>");
}
}
</SCRIPT>
[ <a href="<%comment_edit_link>" title="コメントを編集する">編集</a> ]
</div><!--/comment_navi-->
<!--/comment-->
<!--▲コメント表示▲-->

【lightframeの場合】

<!--▼コメント表示▼-->
<!--comment_area-->
<a name="comment_list"></a>
<!--comment-->
<div class="comment_outline">
<div class="comment_title"><a name="comment<%comment_no>" id="comment<%comment_no>">[ <%comment_no> ] <%comment_title></a> <%comment_url+name> [ <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> ] </div>
<div class="comment_body">
<div class="comment_text"><%comment_body></div>
<div class="comment_navi">
[ <%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute> ]
<SCRIPT LANGUAGE="JavaScript">
v = "<%comment_url>";
iffunc(v);
function iffunc(b)
{
if (b) {
document.write("<a href='<%comment_url>' target='_blank'>"+"<%comment_mail>"+"</a> <a href='<%comment_url>' target='_blank'><%comment_name></a>");
} else {
document.write("<%comment_mail> <%comment_name>");
}
}
</SCRIPT>
[ <a href="<%comment_edit_link>" title="コメントを編集する">編集</a> ]
</div><!--/comment_navi-->
</div><!--/commnet_body-->
</div><!--/comment_outline-->
<!--/comment-->
<!--▲コメント表示▲-->

これでコメントの投稿者名と日付をコメントタイトルの右に表示することができます。

HTMLを編集します。赤い箇所を追加してください。

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

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

<div class="menu_title" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<table width="100%" class="p_waku"><tr><td class="menu_cont">

～

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

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

<div class="menu_title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></div>
<table width="100%" class="p_waku"><tr><td class="menu_cont">

～

次にスタイルシートを編集します。
赤い箇所の行を削除してください。

/* ▼ レフトカラム(左側メニュー) ▼ */
/* レフトカラム(左側メニューカラム)の外枠 */
.left_outline {
border: 1px #dddddd solid; /* レフトカラムの外枠の色 */
padding: 0;
}
～
/* ▲ レフトカラム(左側メニュー) ▲ */

/* ▼ ライトカラム(右側メニュー) ▼ */
/* ライトカラム(右側メニューカラム)の外枠 */
.right_outline {
border: 1px #dddddd solid; /* ライトカラムの外枠の色 */
padding: 0;
}
～
/* ▲ ライトカラム(右側メニュー) ▲ */

そしてスタイルシートの末尾に下記を加えてください。

.p_waku {
border: 1px #dddddd solid; /* プラグインの外枠の色 */
}

これでlightframeのようにプラグインが離れて表示されます。

HTMLを編集します。

【standardの場合】

<!--▼コメント表示▼-->
<!--comment_area-->
<a name="comment_list"></a><br />
<div class="article">
<!--comment-->
～
<!--/comment-->
<!--▲コメント表示▲-->

この赤い部分を切り取り、下記の位置に貼付けてください。

<!--▼コメント投稿▼-->
～
<p><input type="submit" value="送信" /></p>
</form>

<br />

<!--comment-->
～
<!--/comment-->

</div><!--/article-->
<!--/comment_area-->
<!--▲コメント投稿▲-->

<br />はコメント投稿欄とコメントの間隔を空けるために挿入しています。間隔を空けたいだけいくつでも挿入してください。


【lightframeの場合】

<!--▼コメント表示▼-->
<!--comment_area-->
<a name="comment_list"></a>
<!--comment-->
～
<!--/comment-->
<!--▲コメント表示▲-->

この赤い部分を切り取り、下記の位置に貼付けてください。

<!--/comment_area-->
<!--▲コメント投稿▲-->

<!--comment-->
～
<!--/comment-->

<!--▼コメント編集▼-->
<!--edit_area-->

これでコメント投稿欄が記事のすぐ下に表示されます。

コメント投稿欄の下に表示されることになる各コメントは、新しいコメントほど上になるように設定すると良いかも知れません。これは環境設定から変更できます。

環境設定の変更→ブログの設定→コメント設定→コメント一覧表示「新しい順」

コメントが非常に多い方には有効なカスタマイズかも知れませんね。

HTMLを編集します。
赤い部分を加えてください。

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

<!--▼カテゴリー別記事ナビゲーション▼-->
<!--category_area-->
<div class="various_outline">
<div class="various_title">カテゴリー &nbsp;[<%sub_title> ]<%cno></div>
<div class="various_body cno_<%cno>" >
<div class="various_text">
～
<!--▲カテゴリー別記事ナビゲーション▲-->

次にスタイルシートの末尾に以下を加えてください。

/* カテゴリ１(blog-category-1)の便利ナビ */
.cno_1 {
background-image: url("http://～"); /* 画像URL */
background-repeat: no-repeat; /* 繰り返し表示の有無 */
background-position: right bottom; /* 画像の配置 */
height:300px; /* 高さ */
}

/* カテゴリ２(blog-category-2)の便利ナビ */
.cno_2 {
background-image: url("http://～"); /* 画像URL */
background-repeat: no-repeat; /* 繰り返し表示の有無 */
background-position: right bottom; /* 画像の配置 */
height:300px; /* 高さ */
}

以下同じように .cno_3 .cno_4 ・・・といくらでも追加できます。

http://～に背景にしたい画像のURLを入れてください。
高さ、繰り返し表示、画像の配置はお好みに合わせて設定してください。

高さを一定ではなく、リスト数にあわせたければ、高さを設定している行を削除してください。

便利ナビに背景があれば、各カテゴリをユーザーへ直感的に伝えられるかも知れませんね。

HTMLを編集します。

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

<!--▼カテゴリー別記事ナビゲーション▼-->
～
<ul>
<!--topentry-->
<li><a href="#entry<%topentry_no>" title="記事の先頭へ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
</ul>
～
<!--▲カテゴリー別記事ナビゲーション▲-->

<!--▼月別記事ナビゲーション▼-->
～
<ul>
<!--topentry-->
<li><a href="#entry<%topentry_no>" title="記事の先頭へ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
</ul>
～
<!--▲月別記事ナビゲーション▲-->

<!--▼検索結果ナビゲーション▼-->
～
<ul>
<!--topentry-->
<li><a href="#entry<%topentry_no>" title="記事の先頭へ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
</ul>
～
<!--▲検索結果ナビゲーション▲-->

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

この赤い部分を下記のように変えてください。

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

<!--▼カテゴリー別記事ナビゲーション▼-->
～
<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="記事の先頭へ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
</ul>
～
<!--▲カテゴリー別記事ナビゲーション▲-->

<!--▼月別記事ナビゲーション▼-->
～
<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="記事の先頭へ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
</ul>
～
<!--▲月別記事ナビゲーション▲-->

<!--▼検索結果ナビゲーション▼-->
～
<ul>
<!--topentry-->
<li><a href="<%topentry_link>" title="記事の先頭へ">
<%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]
</a></li>
<!--/topentry-->
</ul>
～
<!--▲検索結果ナビゲーション▲-->

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

これで便利ナビのリンク先が個別記事ページになります。

【自分以外の名前に「さん」をつける】

プラグインのHTMLにある<%rcomment_name>の後ろに、次の記述を加えてください。

<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name><span class="cm_<%rcomment_name>">さん</span> :<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>

そしてスタイルシートの末尾に次の記述を加えてください。

.cm_自分の名前{display:none;}

自分の名前は、普段あなたがコメントに入力する自分の名前に置き換えてください。
私を例にするとこうなります。

.cm_いたお{display:none;}

これで、自分以外の名前の後ろに「さん」が表示されます。


【自分には「@管理人」を、他の人には「さん」をつける】

プラグインのHTMLにある<%rcomment_name>の後ろに、次の記述を加えてください。

<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name><span class="cm_<%rcomment_name>">さん</span><span class="c cm_<%rcomment_name>1">＠管理人</span> :<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>

そしてスタイルシートの末尾に次の記述を加えてください。

.c{display:none;}
.cm_自分の名前{display:none;}
.cm_自分の名前1{display:inline;}

自分の名前は、普段あなたがコメントに入力する自分の名前に置き換えてください。
私を例にするとこうなります。

.c{display:none;}
.cm_いたお{display:none;}
.cm_いたお1{display:inline;}

これで、自分には「@管理人」が、自分以外の名前には「さん」が表示されます。


【関連記事】

• コメントに敬称をつける

HTMLを編集します。

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

<div id="center-left">

<div id="center">

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

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

<!--▼▼ プラグイン カテゴリー３ ▼▼-->から<!--▲▲ プラグイン カテゴリー３ ▲▲-->まで囲まれた部分を下記のように移動してください。

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

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

<div id="center-left">

<div id="center">

これでプラグイン３がサイト幅まで広げて表示できます。

当サイトの提供するテンプレートのHTMLに、以下のような箇所があります。

【standardシリーズの場合】

<!--▼ エントリー（記事）▼-->
<!--topentry-->
～
<div class="article">

<%topentry_body>

<!--more_link-->
<div id="varP<%topentry_no>">
<div class="readmore"><a href="<%topentry_link>" title="続きを読む" onclick="showMore(<%topentry_no>,'<%topentry_link>');return false;">【続きを読む】</a></div>
</div>
<!--/more_link-->

<div id="varXYZ<%topentry_no>" style="display: none">
<div class="readclose">
<a href="#entry<%topentry_no>aa" title="続きを閉じる" onclick="showMore(<%topentry_no>,0);return true;">【続きを閉じる】</a></div>
<%topentry_more>
</div>

<!--more--><hr color=#dddddd size=1 noshade>
<%topentry_more><!--/more-->

<div class="bottom_navi">
～
<!--/topentry-->
<!--▲ エントリー（記事）▲-->

【lightframeシリーズの場合】

<!--▼ エントリー（記事）▼-->
～
<div class="ently_text">

<%topentry_body>

<!--more_link-->
<div id="varP<%topentry_no>">
<div class="readmore">
<a href="<%topentry_link>" title="続きを読む" onclick="showMore(<%topentry_no>,'<%topentry_link>');return false;">
【続きを読む】</a></div>
</div>
<!--/more_link-->

<div id="varXYZ<%topentry_no>" style="display: none">
<div class="readclose">
<a href="#entry<%topentry_no>aa" title="続きを閉じる" onclick="showMore(<%topentry_no>,0);return false;">
【続きを閉じる】</a></div>
<%topentry_more>
</div>

<!--more--><%topentry_more><!--/more-->

</div><!--/ently_text-->
～
<!--/topentry-->
<!--▲ エントリー（記事）▲-->

上記赤い箇所を以下の記述に置き換えてください。

<!--not_permanent_area--><%topentry_discription>
<a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照">続きを読む</a><!--/not_permanent_area-->

<!--permanent_area-->
<%topentry_body>
<br /><br />
<!--more--><%topentry_more><!--/more-->
<!--/permanent_area-->

これで記事の要約が表示できます。
画像を多く記事に載せている方にお勧めです。