◆ 若干廃墟 ◆ Blog Battler 専用ページの設置

Blog Battler 専用ページの設置

2007–01–05 （Fri） 21:48

私の日記（…と言いつつ、たまにしか更新しないブログ） HAKOIRI-SAKURAnbou の方に Blog Battler という、ブログパーツを設置しました。
ブログバトラーの開発日記ブログは、こちら。（どうやら、不具合報告などのお知らせも兼ねているようです）

トップページにそのままドーンと置くのも何なので、別ページにリンクする形で置いてみました。

他の方の設置画面を見習いつつ、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>&nbsp;という記事のコメント欄までどうぞ。
</div>
</div>
</div><!--/master-column-->
<div id="footer"><!--footer-->
<div id="ads">copyright&nbsp;&copy;&nbsp;2007&nbsp;自分のブログ名&nbsp;all&nbsp;rights&nbsp;reserved.<br />Powered&nbsp;By&nbsp;<a href="http://blog.fc2.com/" target="_blank">FC2 blog</a>&nbsp;/&nbsp;Template design&nbsp;by&nbsp;<a href="http://emeraldmountain.blog11.fc2.com/" target="_blank">◆&nbsp;若干廃墟&nbsp;◆</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; }

« Another HTML-Lint （リンク先の修正） | HOME | 新管理画面へのリンク修正 »

こんにちは～♪

dellaさん

うちとこの情報がお役に立てたのなら幸いです(*^▽^*)

| 2007-05-26 (Sat) 18:13:24 |
emeraldmountain（wired/わや） |
URL
[ 編集 ]

許可してすべて見渡します〓

| 2007-05-04 (Fri) 02:05:47 |
della |
URL
[ 編集 ]

こんばんは~~旦_(^‥^=)~

あ、この件に関しては既にメール送っていましたね。
こちらのコメントには直接レスしていなかったので、今見てちょっとビックリでした。
ははは。

| 2007-04-10 (Tue) 19:28:25 |
wired(わや) |
URL
[ 編集 ]

　( 。・_・)ノｺﾝﾊﾞﾝﾊ

こんばんはわやさん。
わやさんのテンプレートの事なのですが・・・・、あのベルトのテンプレート気に入って使っているのですが、
テーブルタグで括ったものの文字が大きくなってしまうのはどうしてなのでしょうか？
takanashiと[dear_girls] ではテーブルタグで括っても中の文字は大きさが変らなかったので不思議です。
都度、フォントサイズで大きさを指定した方がいいのでしょうか？

| 2007-02-23 (Fri) 05:56:37 |
ごんたろう♪ |
URL
[ 編集 ]

はじめまして！

yakawaさん

こちらこそ、対戦していただいてありがとうございます。
ボ、ボコボコにしちゃいましたか…(;゜(エ)゜)…すいません。
いやぁ、ははは。きっとまぐれです。

同じバトラーと続けて対戦すると、二度目以降は戦略が変わるので結構勝てますよ。
（…な～んて事を、普段自分がしてるわけなんですが。）
普段は1st ブログ↓の方に表示してますので、よかったらまたリベンジにいらしてくださいね～♪
http://hakoirisakura.blog27.fc2.com/

| 2007-02-06 (Tue) 15:51:18 |
wired（わや） |
URL
[ 編集 ]

はじめまして。

最近ブログバトラーの存在を知り、早速対戦させていただきました。
ボコボコにされましたが（泣）
ありがとうございました。またお願いします。

| 2007-02-03 (Sat) 16:25:51 |
yakawa |
URL
[ 編集 ]

こんばんは^^

びびさん

ささやかながらも、お役に立てて幸いです。
背景画像もどんどん変えちゃって、お好みのデザインを楽しんでくださいね。
o(*^▽^*)o~♪

| 2007-01-12 (Fri) 18:53:11 |
Wired（わや） |
URL
[ 編集 ]

こんにちは＾＾ブログバトラーの設置法、大変分かりやすくて助かりました。感謝ですヽ( ・∀・)ﾉ

| 2007-01-12 (Fri) 10:46:33 |
びび |
URL
[ 編集 ]

コメントの投稿

トラックバック

トラックバックURL

http://emeraldmountain.blog11.fc2.com/tb.php/91-5d51df55

⇒ この記事に対してトラックバックを送信する（FC2ブログユーザー）

| HOME |

translate this blog into

カレンダー

06 | 2008/07 | 08
日	月	火	水	木	金	土
-	-	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	-	-

最近のトラックバック

カウンター

総閲覧数：

プロフィール

「 emeraldmountain 」だったり、「wired（わや）」だったり…

Author:「 emeraldmountain 」だったり、「wired（わや）」だったり…
こちらは私の2ndブログです。
日記的1stブログはこちら。↓
HAKOIRI-SAKURAnbou
ブログバトラーはここにいる！（管理人：三毛猫さん） ↑ ブログバトラー設置サイトのリンク集

◆ 若干廃墟 ◆

スポンサーサイト

Blog Battler 専用ページの設置

コメント

こんにちは～♪

こんばんは~~旦_(^‥^=)~

( 。・_・)ノｺﾝﾊﾞﾝﾊ

はじめまして！

はじめまして。

こんばんは^^

コメントの投稿

トラックバック

トラックバックURL

translate this blog into

カレンダー

最近の記事

最近のコメント

最近のトラックバック

カウンター

プロフィール

ブログ内検索

カテゴリー

全記事（数）表示

Llnks

RSSフィード

Powered By FC2