2007–01–05 （Fri） 21:48
トップページにそのままドーンと置くのも何なので、
別ページにリンクする形で置いてみました。
他の方の設置画面を見習いつつ、HTMLとCSSファイルをそれぞれ作っています。
追記以下の説明を参考にしながら各ファイルを書き換えた後、御自分のブログにアップロードしてください。
＜注意＞ 追記以下の解説は、FC2ブログユーザーに対応した方法です。
他のブログサービスなどで、目的の結果が得られるかどうかは不明です。（画像ファイルの外部呼出しは禁止されているため。）他のブログサービスをご利用の方は、「テキストエディタの保存文字コード」「画像ファイル」などを、御自分のブログサービスに対応したものに置き換えて、作成してください。
他のブログサービスをお使いの方は特に、次の点に注意していただく必要が有ります。
「HTMLファイル」「CSSファイル」の各冒頭部分で指定してある文字コード「EUC-JP」は、FC2ブログサービスに対応したコードです。現在お使いのブログサービスで対応している文字コード（例：Shift-JISなど）を調べ、必ずそちらに書き換えるようにしてください。
作業の手順 ：
- windows系ならTeraPadまたはサクラエディタ、Mac系の方ならmiなどの、EUC-JP形式に対応できるテキストエディタを起動します。（FC2ブログをご利用の方は、「データのバックアップ」の画面下から各エディタのダウンロードができます。）
- HTMLファイル、CSSファイル共に枠内をコピペでOK。EUC対応テキストエディタで編集し、保存します。
- ファイルの末尾にある拡張子.txt を.htmlに、または.cssに、それぞれ書き換えてください。
- 自分のブログ（管理者ページ）のアップロード画面から、各ファイルをアップします。（CSSをデフォルト設定のまま使用する場合、CSSファイルのアップロードは不要です。）
- アップロードしたファイルのうち、HTMLファイルの「表示」という文字リンクをクリックし、きちんと表示されていればOKです。
- ご自分がリンクさせたい任意の場所に、自ブログにアップしたHTMLファイルのフルパスを記述して、<a href="HTMLファイルのフルパス" target="_blank">Blog Battler</a>などとなるよう、リンクを貼ります。
＜留意点-１＞
私の思い違いかもしれませんが、普通のテキストエディタ（メモ帳など）で編集したファイルをそのままアップしたら、HTML中の「ブログタイトル」や「紹介文」「項目名」「Blog Battler 下の文」などの、日本語の部分が文字化けしたように思う（英字部分は文字化けしなかった）ので、一応EUC形式に対応したエディタで編集→アップロードという手順を取りました。
＜留意点-２＞
EUC形式対応のテキストエディタは、あらかじめ「表示」の「オプション」などで、「保存文字コード」の種類を「EUC」に設定しておいてください。
HTMLファイル：
ピンク・グリーン・ブルーの部分は、それぞれ御自分の情報に書き換えてください。Blog Battler のスクリプト直下の文も、適宜御自分のお好みのものに書き換えてください。
CSSファイルを御自分独自のものに変更する場合、オレンジの部分を自分でアップロードしたCSSファイルのフルパスに変更してください。
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="author" content="自分の名前" />
<meta name="description" content="自分のブログの紹介文" />
<title>ブログタイトル</title>
<link rel="stylesheet" type="text/css" href="http://blog27.fc2.com/h/hakoirisakura/file/wired_battler.css" media="screen,tv" title="デフォルト" />
<link rel="alternate" type="application/rss+xml" href="自分のブログアドレス?xml" title="RSS" />
<link rel="top" href="自分のブログアドレス" title="トップ" />
</head>
<body>
<div id="wrapper"><!--wrapper-->
<div id="header"><!--header-->
<h1 class="site-tittle"><a href="自分のブログアドレス" accesskey="0" title="自分のブログタイトル">ブログタイトル</a></h1>
<p class="site_info">自分のブログの紹介文</p>
</div><!--/header-->
<div id="master-column" class="column"><!--master-column-->
<div class="section3">
<h2 class="plugin_area">項目などの文</h2>
<div class="entry-body2">
〜ここに、登録サイトから入手した自分のスクリプトタグを貼り付ける〜
<br /><br />コメントなどございましたら、<a href="自分のブログ内の関連記事などのアドレス">関連記事のタイトル</a> という記事のコメント欄までどうぞ。
</div>
</div>
</div><!--/master-column-->
<div id="footer"><!--footer-->
<div id="ads">copyright © 2007 自分のブログ名 all rights reserved.<br />Powered By <a href="http://blog.fc2.com/" target="_blank">FC2 blog</a> / Template design by <a href="http://emeraldmountain.blog11.fc2.com/" target="_blank">◆ 若干廃墟 ◆</a>
</div>
</div><!--/footer-->
<!--/wrapper-->
</div>
</body>
</html>
＜留意点-３＞
できれば、テンプレートの著作権表示と、Powered by FC2 の部分は削除しないでください。CSSをいじって、画像から何から全て作り変えてしまった場合は、その限りではありません。（ただし、このBlog Battler 設置場所のデザインに限ります。）
CSSファイル：
オレンジ色の部分は、御自分で好みの画像に入れ替えてください。（もちろん、そのままでもOKです。）
01月06日追記→body背景画像を、ファイルサイズ小さめの物に変更しました。（表示の軽量化）
@charset "EUC-JP";
/* 全体的な設定--------------------------------------------- */
* { margin: 0;
padding: 0;
font-style: normal;
font-weight: normal; }
html { scrollbar-track-color: #222;
scrollbar-face-color: #000;
scrollbar-arrow-color: #4242ff;
scrollbar-3dlight-color: #333;
scrollbar-darkshadow-color: #444;
scrollbar-highlight-color: #777;
scrollbar-shadow-color: #555; }
body { color: #fff;
background-color: #000;
background-image: url("http://blog11.fc2.com/e/emeraldmountain/file/kalos_1_12_700_cm.jpg");
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
line-height: 150%;
font-size: 12px;
text-align: center;
font-family: "\30D2\30E9\30AE\30CE\20Pro\20W3","Osaka","Verdana","Helvetica","Arial","\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",sans-serif; }
html>body { font-size: 12px; }
textarea { width: 90%; }
/* リンクの設定
------------------------------------------------------------ */
a { text-decoration: none;
color: #9191ff; }
a:hover { color: #4242ff;
background-color: #222; }
a img { border-style: none;
border-width: 0px;
text-decoration: none; }
/*--- 見出しの設定 ---*/
h2, h3 { color: #fff; }
h4, h5, h6 { font-size: 12px; }
/* レイアウトの設定
------------------------------------------------------------ */
div#wrapper { width: 541px;
margin-left: auto;
margin-right: auto;
text-align: left; }
div#header { width: 541px;
height: 100px;
margin: 0px;
padding: 0px;
background-color: transparent;
text-align: left; }
div.column { margin: 0px; }
/* master-column
-------------------------------------------------------------*/
div#master-column { margin: 0 auto;
text-align: center;
padding: 0px;
width : 541px; }
html>body div#master-column { width: 541px; }
/* footerの設定
------------------------------------------------------------ */
div#footer { clear: both;
text-align: center;
margin-bottom: 0px;
padding-top: 6px;
width: 541px;
height: 60px;
background-color: transparent; }
/* header
------------------------------------------------------------ */
div#header h1 a { text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: bold; }
div#header h1 a:hover { text-decoration: none;
color: #7171ff;
background-color: #333; }
html>body div#header h1 a { font-size : 20px;}
.site-tittle { margin : 0px;
padding-top: 20px;
text-align : left; }
.site_info { margin: 0px;
padding-top: 15px;
text-align: left;
font-size: 12px;
font-weight: normal;
color: #fff;
line-height: 150%; }
html>body .site_info { font-size : 12px;
line-height: 150%; }
/* master-column
------------------------------------------------------------ */
/*--- 項目名＋コンテンツ全体のサイズ ---*/
div.section3 { width: 541px;
margin: 0px auto; }
/*--- 項目名の設定 ---*/
div#master-column h2.plugin_area {
width: 541px;
height: 38px;
margin-bottom: 10px;
padding-top: 11px;
background : url("http://blog11.fc2.com/e/emeraldmountain/file/dot541x38p-2f.gif") top left no-repeat;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #fff; }
html>body div#master-column h2.plugin_area { font-size: 14px; }
/*--- コンテンツの設定 ---*/
div.entry-body2 { margin: 0px auto;
text-align: center;
padding: 10px 25px 10px;
line-height: 150%; }
html>body div.entry-body2 { line-height: 150%; }
/* footer内の設定
------------------------------------------------------------*/
div#ads { margin-top: 5px;
padding: 0px;
font-size: 10px;
line-height: 150%;
color: #eee; }
div#ads a { margin-top: 5px;
padding: 0px;
font-size: 10px;
color: #eee; }
div#ads a:hover{ color: #5252ff;
background-color: #222; }
