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

HTMLのh1タグの下に以下の記述を加えてください。

<div class="top_search">
<form action="./" method="get">
<input type="text" size="20" name="q" value="" maxlength="200" />
<input type="submit" value=" 検索 " />
</form>
</div>

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

.top_search {
float:right;
margin-top:10px; /* 検索窓の上間隔 */
margin-right:20px; /* 検索窓の右間隔 */
}

h1 {
float:left;
}

ここから更に加える記述がテンプレートにより異なります。

standardの場合

h2 {
clear:both;
}

lightframeの場合

.intro {
clear:both;
}

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

検索窓の位置は検索窓の上間隔、検索窓の右間隔の数値を変更して調整してください。

2010/01/03 追記

HTMLに不備があったので修正しました。
</form>が欠けていました。誠に申しわけありません m(__)m

HTMLを編集します。
<!--▼コメント投稿▼-->から<!--▲コメント投稿▲-->まで、及び<!--▼コメント編集▼-->から<!--▲コメント編集▲-->までを以下に差し替えてください。

<!--▼コメント投稿▼-->
<div class="comment_outline">
<div class="comment_title">コメントの投稿</div>
<div class="comment_body">
<div class="comment_text">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<table border="0" align="center" cellpadding="5" cellspacing="0">
<tr><td width="50"><label for="name">名前：</label></td>
<td width="250"><input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" />
</td></tr><tr><td>
<label for="subject">題名：</label>
</td><td>
<input id="subject" type="text" name="comment[title]" size="30" />
</td></tr><tr><td>
<label for="mail">サイト名：</label>
</td><td>
<script language="JavaScript"><!--
document.write('<input id="mail" type="text" name="comment[mail]" size="30" value="'+myGetCookie("web_name")+'" /><br />');
// --></script>
</td></tr><tr><td>URL：
</td><td>
<input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" />
</td></tr><tr><td>コメント：
</td><td>
<script type="text/javascript" src="http://blog44.fc2.com/load.js"></script><br />
<textarea id="comment" cols="40" rows="8" name="comment[body]"></textarea>
</td></tr><tr><td>パスワード：
</td><td><input id="pass" type="password" name="comment[pass]" size="20" />
</td></tr><tr><td>SECRET：
</td><td>
<input id="himitu" type="checkbox" name="comment[himitu]" value="管理者にだけ表示を許可する" />管理者にだけ表示を許可する
</td></tr><tr><td>
</td><td>
<input type="submit" value="送信" onClick="mySetCookie('web_name',document.comment_form.mail.value,'365')" />
</td></tr></table>
</form>
</div><!--/comment_text-->
</div><!--/comment_body-->
</div><!--/comment_outline-->
<!--/comment_area-->
<!--▲コメント投稿▲-->

<!--▼コメント編集▼-->
<!--edit_area-->
<div class="comment_outline">
<div class="comment_title">コメントの編集</div>
<div class="comment_body">
<div class="comment_text">
<form method="post" action="./" name="comment_form">
<input type="hidden" name="mode" value="edit" />
<input type="hidden" name="mode2" value="edited" />
<input type="hidden" name="edit[rno]" value="<%eno>" />
<table border="0" align="center" cellpadding="5" cellspacing="0"><tr><td>
<label for="name">名前:</label></td><td>
<input id="name" type="text" name="edit[name]" size="30" value="<%edit_name>" /></td></tr><tr><td>
<label for="mail">サイト名:</label></td><td>
<script language="JavaScript"><!--
document.write('<input id="mail" type="text" name="edit[mail]" size="30" value="'+myGetCookie("web_name")+'" /><br />');
// --></script>
</td></tr><tr><td>
<label for="subject">題名:</label></td><td>
<input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" /></td></tr><tr><td>
<label for="url">URL:</label></td><td>
<input id="url" type="text" name="edit[url]" size="30" value="<%edit_url>" /></td></tr><tr><td>
<label for="comment">COMMENT:</label></td><td>
<textarea id="comment" cols="40" rows="8" name="edit[body]"><%edit_body></textarea></td></tr><tr><td>
<label for="pass">PASS:</label></tb><td>
<input id="pass" type="password" name="edit[pass]" size="20" /></td></tr><tr><td>
<label for="himitu">SECRET:</label></td><td>
<input id="himitu" type="checkbox" name="edit[himitu]" value="管理者にだけ表示を許可する" />管理者にだけ表示を許可する</td></tr>
<tr><td></td><td>
<input type="submit" value="送信" />
<input type="submit" name="edit[delete]" value="削除" />
</td></tr></table>
</form>
</div><!--/comment_text-->
</div><!--/comment_body-->
</div><!--/comment_outline-->
<!--/edit_area-->
<!--▲コメント編集▲-->

SEOを考慮するならば、まずjavaScriptの外部ファイル化をするべきです。

【2012/01/14 追記】

この外部javascriptへのリンクはcssへのリンクよりも下に挿入してください。

そしてJSファイルの末尾に次の記述を加えてください。

var wall = new Array();

/* 使用する背景画像を好きなだけ記述 */
wall[0] = "画像１のURL";
wall[1] = "画像２のURL";
wall[2] = "画像３のURL";

var rnd = Math.floor((Math.random() * 100)) % wall.length;
document.write('<style type="text/css">表示箇所 { background-image:url(' , wall[rnd] , '); }</style>');

表示箇所の部分は、当サイトのテンプレートであれば

standardをお使いの方は
#header

lightframeをお使いの方は
#header_body

と変更してください。

画像のURLは各自用意したタイトルに表示させたい画像のURLを入れてください。
wall[3]、wall[4]・・・と、いくらでも画像を増やす事ができます。


そしてHTMLのh1タグを次の記述に置き換えてください。
タイトルを画像にしたときのSEOを考慮してあります。

<!--▼▼ ヘッダー ▼▼-->
～

<h1><a href="<%url>" title="<!--not_permanent_area--><%blog_name><!--/not_permanent_area--><!--permanent_area--><%sub_title><!--/permanent_area-->"><img src="http://blog-imgs-19.fc2.com/1/0/p/10plate/spacer.gif" alt="<!--not_permanent_area--><%blog_name><!--/not_permanent_area--><!--permanent_area--><%sub_title><!--/permanent_area-->"></a></h1>

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

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

/* 透過gif (マウス反応範囲) */
h1 img {
height:50px; /* 高さ */
width:500px; /* 幅 */
border:0px;
}

/* タイトル背景画像 */
#header_body {
background-repeat: no-repeat; /* 繰り返し表示の有無 */
background-position: 30px 10px; /* 左の間隔、上の間隔 */
}

【2012/01/14 追記】

standardをお使いの方は#header_bodyを#headerにかえてください

透過gifの高さや幅、背景画像のポジション等の各数値を調整してください。

これでSEOに有効なランダムタイトル画像が表示出来ます。

以下、標準的なコメントリンクに戻すカスタマイズを施してあることを前提に説明します。


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

HTMLにある<%comment_mail+name>（または<%comment_name>）の後ろに次の記述を加えてください。

<!--▼コメント表示▼-->
～
<%comment_mail+name><span class="cm_<%comment_name>">さん</span>
～
<!--▲コメント表示▲-->

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

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

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

.cm_いたお{display:none;}

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


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

HTMLにある<%comment_mail+name>（または<%comment_name>）の後ろに次の記述を加えてください。

<!--▼コメント表示▼-->
～
<%comment_mail+name><span class="cm_<%comment_name>">さん</span><span class="c cm_<%comment_name>1">＠管理人</span>
～
<!--▲コメント表示▲-->

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

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

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

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

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


【関連記事】

• プラグイン「最新コメント」に敬称を付ける

HTMLを編集します。

まず<!--▼コメント表示▼-->内で１箇所置き換えます。

【置き換え箇所】

<!--▼コメント表示▼-->
～
<SCRIPT LANGUAGE="JavaScript">
～
</SCRIPT>
～
<!--▲コメント表示▲-->

【置き換え後】

<!--▼コメント表示▼-->
～
<%comment_url+str>   /* 「URL」に投稿者のサイトをリンク(同窓) */
<%comment_mail+name>   /* 「投稿者名」にメアドをリンク */
～
<!--▲コメント表示▲-->

【2009/07/14 追記】
メールアドレスのリンクは表示せず、「投稿者名」にサイトを別窓で開くリンクだけ表示したい場合は次のようにしてください。

<!--▼コメント表示▼-->
～
<script type="text/javascript">
a="<%comment_url>";
if (a!="") { document.write('<a href="'+a+'" target="_blank"><%comment_name></a>') } else {
document.write("<%comment_name>"); }
</script>
<noscript>
<a href="<%comment_url>" target="_blank"><%comment_name></a>
</noscript>
～
<!--▲コメント表示▲-->

次に<!--▼コメント投稿▼-->内で２箇所置き換えます。

【置き換え箇所】

<!--▼コメント投稿▼-->
～

<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>

～
<!--▲コメント投稿▲-->

※lightframeには<p></p>がありません。


【置き換え後】

<!--▼コメント投稿▼-->
～

<label for="mail">メール:</label><br />
<input id="mail" type="text" name="comment[mail]" size="40" value="<%cookie_mail>" /><br />

～

<p><input type="submit" value="送信" /></p>

～
<!--▲コメント投稿▲-->

※<p></p>を付けると折り返されます。お好みで。
【2009/07/14 追記】
メールアドレス記入欄が不要な場合は、上記の一箇所目を削除してください。


そして<!--▼コメント編集▼-->内で１箇所置き換えます。

【置き換え箇所】

<!--▼コメント編集▼-->
～
<label for="mail">サイト名:</label><br />
<script language="JavaScript"><!--
document.write('<input id="mail" type="text" name="edit[mail]" size="40" value="'+myGetCookie("web_name")+'" /><br />');
// --></script>
～
<!--▲コメント編集▲-->

【置き換え後】

<!--▼コメント編集▼-->
～
<label for="mail">メール:</label><br />
<input id="mail" type="text" name="edit[mail]" size="40" value="<%edit_mail>" /><br />
～
<!--▲コメント編集▲-->

【2009/07/14 追記】
メールアドレス記入欄が不要な場合は、上記の箇所を削除してください。

最後に、<head>内にあるJavaScriptの関数、mySetCookieとmyGetCookieは使用しないので削除してかまいません。消す箇所がよく解らないときは、無理に消さなくても問題ありません。
※関数showMoreは残してください。

<script language="JavaScript"><!--
function mySetCookie(myCookie,myValue,myDay){
～
}
function myGetCookie(myCookie){
～
}
function showMore(varA1, varB1){
～
}
// --></script>

※lightframeは別の<script language="JavaScript"></script>内に関数showMoreが書かれています。


これで標準的なコメントリンクになります。

ただメールアドレスをネット上に公開することは、スパムメールが送られてくる原因になります。

<%comment_mail+name>に置き換えるよりも、
<%comment_name> に置き換えたほうがメアドがリンクされないのでいいかも知れません。



【2009/07/22 追記】
このカスタマイズは 2009年07月22日以降にダウンロードされたテンプレート(standardならver.09、lightframeならver.04)では実装されています。バージョンはHTMLかCSSの一番下を見ると確認できます。
2009/07/14 追記の処理をし、メールアドレス記入欄は取り除きました。

HTMLを編集します。h1タグを次の記述で置き換えてください。

<!--▼▼▼▼ ヘッダー（タイトル部分）▼▼▼▼-->
～
<h1><a href="<%url>" title="<!--not_permanent_area--><%blog_name><!--/not_permanent_area--><!--permanent_area--><%sub_title><!--/permanent_area-->"><img src="画像URL" alt="<!--not_permanent_area--><%blog_name><!--/not_permanent_area--><!--permanent_area--><%sub_title><!--/permanent_area-->" border="0"></a></h1>
～
<!--▲▲▲▲ ヘッダー（タイトル部分）▲▲▲▲-->

画像URLには、各自用意した画像のURLを入れてください。

これで各ページに同じブログタイトル画像を表示し、そのaltとリンクタイトルだけを記事タイトルに替えることができます。

【2009/04/23 追記】
キイタ？オクサン アラヤダワァを運営するちゃんさんが、タイトル画像のaltとリンクタイトルを記事タイトル～ブログタイトルとする方法を紹介してくれました。こちらもお勧めです。
ひっそりとSEO対策

【2009/10/24 追記】

上記サイトが閉鎖されたので記事を転載しました。
タイトル画像のaltとリンクタイトルを「記事タイトル ～ ブログタイトル」とする

スタイルシートを編集します。
赤い行を追加し、青い行を削除してください。

/* ▼メニューバー▼ */
～

#menu_bar li {
～
width:14%; /* １つのメニューボタンの幅（％） */
}

#menu_bar li a {
～
width:100px; /* １つのメニューボタンの幅 */
～
}

～
/* ▲メニューバー▲ */

％の数値はメニュー数に応じて変更してください。

単位は小数点以下も対応しますが、あまり100%ギリギリまで近づけると、ブラウザによっては折り返されてしまう場合があります。

特にIEはボーダー幅の分、他のブラウザより幅をとることがあります。少し数値に余裕を持たせるか、複数のブラウザで確認してカスタマイズすることをお勧めします。

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

/* ▼メニューバー▼ */
ul#menu_bar {
～
background-color:#000000; /* 背景色 */
～
}

～

#menu_bar li a {
～
border:1px solid #333333; /* 枠*/
}

#menu_bar li a:hover{
～
border:1px solid #333333; /* 枠*/
}
/* ▲メニューバー▲ */

青い箇所を削除し、
赤い箇所を追加してください。

枠の太さや色はお好みに合わせて設定してください。