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

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-->
<!--▲最新記事ナビゲーション▲-->

これで最新の記事の便利ナビが設置できます。

HTMLを編集します。

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

<div class="comt">
<p><strong><a name="comment<%comment_no>" id="comment<%comment_no>"><%comment_title></a></strong></p>
</div>

<div class="comb">
<%comment_body>
<div class="comment_navi">
〜
</div><!--/comment_navi-->
</div><!-- /comb -->

<!--/comment-->
<!--▲コメント表示▲-->

上記の赤い部分を加えてください。
次にスタイルシートを編集します。

〜
/* コメントナビゲーション */
.comment_navi {
text-align: right;
margin-top:8px;
margin-bottom: 0px;
padding: 5px;
border-top: #dddddd 1px solid; /* 記事下ナビ区切り線 */
}

〜

.comt {
border:solid 1px #000000; /* コメントタイトル枠 */
background:#000000; /* コメントタイトル背景色 */
color:#ffffff; /* コメントタイトル色 */
padding:5px;
}

.comb {
border:solid 1px #000000; /* コメント本文枠 */
margin-bottom:10px; /* 次のコメントまでの間隔 */
padding:5px;
}

comment_naviのmargin-bottomを0にして、スタイルシートの末尾にcomtとcombを加えてください。
これで各コメントを枠で囲むことができます。

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

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

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

<!--▼カテゴリー別記事ナビゲーション▼-->
<!--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; /* 画像を中央寄せする場合 */
}

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

スタイルシートで次のような記述があります。各数値を変えてお好みのデザインにしてください。


/********* ▼ メニューブロック (プラグインカテゴリ３) ▼ */
/* メニュータイトル */
.menu_title3 {
/* --------------------------------------------- */
color:#ffffff; /* メニュータイトルの色 */
/* --------------------------------------------- */
background: #FFA500; /* メニュータイトル背景 */
/* --------------------------------------------- */
font-size: 0.8em;
font-weight: bold;
padding: 0.3em 1em;
margin: 0;
}

/* メニューコンテンツ */
.menu_cont3 {
/* --------------------------------------------- */
color: #666666; /* メニューコンテンツの文字の色 */
/* --------------------------------------------- */
font-size: 75%; /* メニューコンテンツの文字の大きさ */
/* --------------------------------------------- */
border: #FFA500 1px solid; /* 外枠の色 */
/* --------------------------------------------- */
margin: 0;
padding: 0 1em;
line-height: 1.3;
}
/********* ▲ メニューブロック (プラグインカテゴリ３) ▲ */


現在(2006/09/01以後 Ver.7)のバージョンをお使いの方は上記の各数値を変えるだけでカスタマイズできます。

Ver.6以前をお使いの方は上記記述をスタイルシートに新たに加えてください。さらにHTMLを編集します。<!--▼▼ プラグイン カテゴリー３ ▼▼--><!--▲▲ プラグイン カテゴリー３ ▲▲-->の間を下記記述に置き換えてください。


<!--▼▼ プラグイン カテゴリー３ ▼▼-->
<!--index_area-->
<!--plugin-->
<!--plugin_third-->
<div class="menu_title3" style="text-align:<%plugin_third_talign>"><%plugin_third_title></div>
<div class="menu_cont3">
<div style="margin: 10px 0; text-align:<%plugin_third_ialign>">
<%plugin_third_description></div>
<div style="margin: 10px 0; text-align:<%plugin_third_align>">
<%plugin_third_content>
</div>
<div style="margin: 10px 0; text-align:<%plugin_third_ialign>">
<%plugin_third_description2></div>
</div><!--/menu_cont3-->
<br />
<!--/plugin_third-->
<!--/plugin-->
<!--/index_area-->
<!--▲▲ プラグイン カテゴリー３ ▲▲-->


これでVer.6以前でもプラグインカテゴリ３を独立でカスタマイズできるようになります。

このカスタマイズはABCK(アジアンビートカンケリキッズ)さんの追記の展開・折りたたみを参考にアレンジしました。


HTMLを編集します。<head>と</head>の間に以下を挿入します。


<head>
〜
<script type="text/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>


更に下記箇所を変更します。


<!--▼ エントリー（記事）▼-->
〜
<!--more_link--><a href="<%topentry_link>#more">続きを読む</a><!--/more_link-->
<!--more-->
<hr class="tuduki" noshade size="1">
<%topentry_more><!--/more-->
〜
<!--▲ エントリー（記事）▲-->


この部分を次の記述に書き換えてください。


<!--▼ エントリー（記事）▼-->
〜
<!--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>
<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_link-->
<!--more-->
<%topentry_more><!--/more-->
〜
<!--▲ エントリー（記事）▲-->


最後にスタイルシートに次の記述を追加します。


/* 続きを読む・閉じる */
.readmore {
margin-top: 10px;
}
.readclose {
margin-top: 10px;
margin-bottom: 10px;
}


これで追記が同一ページで表示されます。変更箇所が多いのでバックアップをとってから挑戦することをお薦めします。

現在(2006/09/01以後 Ver.7)は一度コメントを投稿すると、「名前」や「URL」と同じく「サイト名」もテンプレートに記憶されて、次回の投稿から入力しなくても済むようになっています。

Ver.6以前のテンプレートに「サイト名」を記憶させる機能を実装させるには下記カスタマイズを施してください。

HTMLを編集します。<head>〜</head>内に次の記述を加えてください。

<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>
〜
</head>

更に下記箇所を編集します。

<!--▼コメント投稿▼-->
〜
<label for="mail">サイト名:</label><br />
<input id="mail" type="text" name="comment[mail]" size="40" value="" /><br />
〜
<p><input type="submit" value="送信" /></p>
</form>
</div><!--/article-->
<!--/comment_area-->
<!--▲コメント投稿▲-->

これを次のように書き換えます。

<!--▼コメント投稿▼-->
〜
<label for="mail">サイト名:</label><br />
<script language="JavaScript"><!--
document.write('<input id="mail" type="text" name="comment[mail]" size="40" value="'+myGetCookie("web_name")+'" /><br />');
// --></script>
〜
<p><input type="submit" value="送信" onClick="mySetCookie('web_name',document.comment_form.mail.value,'365')" /></p>
</form>
</div><!--/article-->
<!--/comment_area-->
<!--▲コメント投稿▲-->

これでコメント投稿時にサイト名を憶えてくれるようになります。
コメントを多用する方にはお薦めのカスタマイズです。

私のテンプレートは「続きを読む」をクリックしても記事の一番上が画面に表示されていました。
記事が短い場合はこれでも良いかもしれませんが、長い場合は「続き」までスクロールさせるのは面倒です。

そこで「続きを読む」をクリックしたときには、その「続き」のはじまりが画面の一番上にくるようにする方法を紹介します。


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

<!--▼ エントリー（記事）▼-->
〜
<!--more_link--><a href="<%topentry_link>#more">続きを読む</a><!--/more_link-->
<!--more-->
<a name="more"></a>
<hr class="tuduki" noshade size="1">

上記HTMLソースに赤い文字で記されている
<a name="more"></a>
を追加してください。

長い文章を書く人にはお薦めのカスタマイズです。