進化中

クリックすると、俳句以外の長文も話すようになりましたね。

その分、俳句詠まなくなったような気がして
それはそれでちょっとさびしい。。。

黒猫Maukie設置方法

こちらでは、BlogPetについて色々書いているのですが
リクエストがあったので、他のブログペット（ブログサイドパーツ）の
設置方法も少しずつ書いていきたいと思います。

実は私のメインのブログはサイドパーツだらけ

特に猫さんモノには目がないもので。。。

では、まず黒猫Maukie設置方法から始めたいと思います。

あちこちクリックしたりマウスを動かすと
本当にかわいい動きや声を出してくれます。

---

まずはMaukie Homeへ、行きます。

英語のサイトですが、大丈夫心配ありません。

真ん中より少し下のhereをクリックして
４つ目のQ:A:のところのhereを右クリックして
対象をファイルに保存します。

これで、あなたのパソコンにmaukie2.swfというファイルが保存されました。

続いてSeesaaにログイン→ツール
maukie2.swfをアップロードします。

Seesaaだとフラッシュファイルもアップロードできるので、本当に助かります。

Seesaa以外でフラッシュをアップロードできない環境の方は
自分のＨＰサーバーにアップするか
ＨＰも持っていない方はYahoo!ブリーフケースの利用が良いかと思います。

maukie2.swfをアップロードしたらURLを調べます。

Seesaa利用の場合は　
あなたのブログURL/image/maukie2.swfとなっています。

そうしたら、次のタグの赤字部分を編集してください。

<embed src="Mukie.swfのURL"bgcolor="#背景色コード" width="nn"height="nn"> </embed>

背景色コードはこちらを参考にすると便利です。

また、widthとheightの数値は
あなたの環境に合わせて変更してみてください。

ちなみに上ではwidth="150" height="200"にしてあります。

編集が終わったら、コンテンツの追加→自由形式→自由入力欄に
先ほどのタグを貼りつけて再構築すれば出来上がりです。

表示を統一させる場合はこちらを参考にしてみてください。

コメントにクッキー機能を導入

とても便利なスクリプトを見つけました！

PERSONA@BLOGさんの
【Seesaaユーザー必見】コメントにクッキー(cookie)をです。

カスタマイズ方法は、PERSONA@BLOGさんの記事を
見ていただくのが一番ですが
コメントに絵文字を使えるようにするを導入している場合
ほんの少し訂正が必要です。

---

<form name="comment_form" action="/pages/user/
comments2/regist/input" method="post">

と変更しなければならないので
記事HTMLで画像リスト出力スクリプトの

// コメントを入力するテキストエリアを指定

の部分で

var textarea = 'document.comform.article_child__body';

を

var textarea = 'document.comment_form.article_child__body';

と書き換える必要があります。

あとは【Seesaaユーザー必見】コメントにクッキー(cookie)を
に従って書き換えれば、クッキーが有効になります。

faviconつけちゃお〜！(BlogPet)

きょうみっちゃんが登録しなかった。


*このエントリは、BlogPetの「みっちゃん」が書きました。

こうさぎウォール設置してみました

フラッシュの中に複数の背景やBGMを埋め込んだ
こうさぎウォール設置してみました。

ただし、このブログには５匹のBlogPetがいて
クリックで切り替わる表示にしてあるので
そこにさらに背景のランダム表示があるとうるさいので
設置したのは、私のもうひとつのブログです。

---

できたのは



設置方法はChannel@R3さんに行き
こうさぎウォールver1.10のページからＤＬに進みます。
設置方法もこちらのページで丁寧に説明されているので
とてもわかりやすいです。

では、素材探しになりますが
まず背景素材は、これからの季節を考えて・・・
**SilverHeart**さんの
背景　紫陽花を見に行こうから２点と
Tea Time Loverさんの
背景ー梅雨時のアジサイーをお借りしました。

＊9/6現在、背景は同じく**SilverHeart**さんのものですが
こちらに変更しました。

続いてBGMですが、音源はmp3のみに対応なので
色々迷った結果、Music with Myuuさんからお借りしました。

次にファイルのアップロードですが
cousagi wall.xml内に相対パスで記入する必要があり
私はフォルダーごと自分のＨＰサーバーへ上げたので
そうすると、壁紙やmp3も、そのまま　
wall/○○.swf　track/○○.mp3という記述でよいのですが
ＨＰサーバーがなくSeesaaのみの利用の場合は、アップロードの際
その他の入力項目でwallとtrackのディレクトリを作り、その中にアップして
cousagi wall.xml内の記述も
../wall/○○.swf　../track/○○.mp3
とすれば大丈夫です。

Seesaaでコメントに絵文字を使えるようにする

Seesaaでは、記事には絵文字が使えますが
コメント欄でも使えるようにカスタマイズしてみました。

お世話になったのはstroll::blogさんの
コメントにカスタマイズ絵文字入力機能です。

ただし、コメント確認画面で、どうしても不具合があったので
コメント確認を削除してしまいました。
それでもよければ使ってみてください。

---

まず、当然ながら絵文字画像が必要になります。
私はstroll::blogさんでもおすすめしていた
SWEETSさんの素材をお借りしました。

画像をアップしたら、画像設定スクリプトの編集をします。

はじめはstroll:blogさんのまま使ってみたのすが
この画像は11Ｘ11と小さくて、間がないと非常に見づらかったので
間を空けるために少し書き換えてあります。
（青字部分が書き換え箇所です）

その設定でよければ、
以下の画像設定スクリプトをコピーしてメモ帳に貼り付けて
赤字部分を編集します。

list[list.length] = new Array('画像名', '画像URL');

は画像の数だけ増やして下さい。（これが結構大変です）

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('画像の名前', '画像URL');
list[list.length] = new Array('画像の名前', '画像URL');
list[list.length] = new Array('画像の名前', '画像URL');
return list;

}

function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle" hspace="2" vspace="2"';



// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>

では、編集したらそれをコピーして
デザイン→HTMLを開いて
今までHTMLを編集したことのない方はHTMLの追加をクリックして
HTML名をつけ、その画面を編集します。

</head>

を探して、その前に、先ほどの画像設定スクリプトを貼り付けます。

HTMLの編集はここまでなので、これを保存して
この新しいHTMLを適用させます。

続いてデザイン→コンテンツ→記事HTML編集画面を開いて
ここに画像リスト出力スクリプトと画像変換スクリプトを記述します。

まず、画像リスト出力スクリプトですが
stroll::blogさんのものをSeesaa用に書き換えた以下のものをコピーしてください。
（青字部分が書き換えた箇所です）

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.article_child__body';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onClick="addCustmizeEmoji(' + textarea + ', \'' + list[i][0] + '\');"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}

// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = '[' + tag + ']';
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}
writeCustmizeEmojiTagList();
// -->
</script>

これを絵文字を表示したい部分に貼り付けるのですが
私の場合は、コメントテキストエリアの上に表示したかったので

<textarea name="article_child__body" rows="10" cols="50">

の上に貼り付けました。

それで、コメントテキストエリアはスタイルシートで見ると350pxだったので
その上にきれいに収まるように
この画像出力スクリプトを

<div style="width:350px;"></div>

で囲んで
３列きれいに並ぶように絵文字の数を調節してみました。

pxの値はスタイルシートによって違うかもしれないので
自分の環境に合わせて変えてください。


それから

<form action="/pages/user/comments2/regist/input" method="post">

を探して、これを

<form name="comform"
action="/pages/user/comments2/regist/input" method="post">

と書き換えます。


続いて画像変換スクリプトですが
これもSeesaa用に書き換えた以下のものをコピーしてください。
（青字部分が書き換えた箇所です）

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comments';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comments-body';

// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}

function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>

これを

</form>
</div>
<% /if -%>
<% if:page_name eq 'search' -%>

の前に貼り付けます。

以上で保存して記事ページを再構築すれば完了です。


【追記】
以前の記事では、HTMLにも3つのスクリプトを記述して
確認画面の不具合があったので、確認部分を削除すると書きましたが
HTML部分には画像設定スクリプトのみを記述して
記事HTMLに画像リスト出力スクリプトと画像変換スクリプト
を記述すれば、確認画面の不具合は出ませんでした。
ただし、確認画面では絵文字ではなくタグなんですけど・・・

決めたカテゴリに自動投稿させる

カテゴリの設定で、BlogPet投稿用カテゴリを決めて
投稿記事をあとから手動で入れ込むということを書きましたが
自動的に決めたカテゴリに投稿させることもできます。

---

BlogPetは投稿時、デフォルトで入っている日記カテゴリに投稿するので
ここを変えてしまえば良いのです。
デフォルトの日記は順番が0で一番上に表示されていますから
BlogPet投稿用カテゴリを0番に設定すれば
ペットは自分でそのカテゴリに投稿します。

ただし、そのカテゴリは、自分が記事を書くときには使わないものなので
いちいちカテゴリーを移動するのが面倒・・・かも

スクロールバーの色を変える(BlogPet)

きょうは、黄色っぽい適応された！
きょうは、みえにゃんは右はスクロールしなかったよ。


*このエントリは、BlogPetの「みっちゃん」が書きました。

スクロールバーの色を変える

ＨＰでよく見られる方法ですが
SeesaaならHTMLを編集できるので
スクロールバーの色を変えるのも簡単です。

このブログも右スクロールバーが黄色になっていませんか？
（IEのみでしか適応になりませんが。。。）

---

デザイン→HTMLと開いて
<HEAD>〜</HEAD>の間に
以下のタグを入れるだけです。

<STYLE type="text/css">
<!--BODY{
border:0px solid #○○○○○○;
scrollbar-face-color:#○○○○○○; /*スクロールバー表面の色*/
scrollbar-highlight-color:#○○○○○○;/*内側の明るい色*/
scrollbar-shadow-color: #○○○○○○; /*内側の暗い色*/
scrollbar-3dlight-color: #○○○○○○; /*外側の明るい色*/
scrollbar-arrow-color:#○○○○○○;/*矢印の色*/
scrollbar-track-color: #○○○○○○; /*余白の色*/
scrollbar-darkshadow-color: #○○○○○○;/*外側の暗い色*/
}-->
</STYLE>

○○○○○○の部分は
カラーチャートなどで決めますが
７色も決めるのが面倒であれば
こちらがお勧めです。

BlogPetのテーブル配布します！

本当に意味は殆ど無いとは思うのですが
素材屋さんからのものではなく
オリジナルでBlogPetのテーブル（こねこ用）作ってみました。

クリックするとお話しますv(=∩_∩=)　たまに面白俳句詠んでます（笑）

非常につたないものですが、設置方法を説明します。

---

テーブルタグですが、画像を分割していないので
一般的なテーブルよりずっと簡単です。

まず、下の画像をＤＬしてください。
いやはや、アイコンなんてほんとにお粗末で恥ずかしいのですが・・・



右クリックで保存してアップします。
画像のURLをプロパティで確認してコピーしておきます。

次にコンテンツの追加（自由形式）に以下のタグを記入します。

<DIV>
<TABLE BORDER=0>
<tr><td>
<TBODY>
<TR>
<TD><table><TR><TD width=182 height=317 background="画像のURL">
<center>
<MARQUEE scrollamount="4"width="130" style="border:0px">
<font size=1 color=#7C7CFE><b>
好きなメッセージを入れてください
</font></MARQUEE><P>
ここにBlogPetのコード
</center>
</TD></TR></table>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

青字部分は適宜変えてみてください。

留守番画像も設置する場合は
テーブルの中にさらにテーブルを置く形になりますから
BlogPetのコードのところに
留守番テーブルタグで囲んだコードを貼り付けてください。

ただし、IEではきちんと表示されているようなのですが
ネスケでは、少しずれているようです。。。
そして、この画像はwidth 182なので
サイドバーの幅が190以上ないと、画像が切れてしまいます。
その場合は、スタイルシートの編集が必要です。

それでもかまわなければ、どうぞ使ってみて下さい。

BlogPetのテーブル

Harbot＋素材で検索すると沢山の素材屋さんがヒットして
そこでは色々なテーブルなども配布していますが
BlogPet＋素材で検索しても
背景素材しか出てきませんよね。。。

まぁ、BlogPetはブログのサイドバーにつけるもので
サイドバー自体がテーブルなので必要ないといえばそうなのですが・・・
特に表示を統一させている場合は、まったく必要のないものですが・・・

---

でも特別に思い入れのあるBlogPetだけは
他のコンテンツとは全く違う表示をさせてあげるのも良いのでは？

まずは、Harbot用のテーブルとして配布している素材でも
HarbotとBlogPetはサイズが全く同じなので
Harbotの絵柄のついていないものなら使えるのでは？と思いました。

でも、本当にただのテーブルだけではかわいらしさに欠けるような気がして
テーブルの上に動物アイコンを置いてみて・・・

できたのが




テーブル素材はMAYALIONさんから
猫のアイコンはTora7kgさんからお借りして
このBlogPetは、私のもうひとつのブログにいます。

そうなってくると、やはりこちらのBlogPetにも
他のコンテンツとは違うテーブルをつけてあげたくなってきました（笑）

でも、こちらはランダム表示していて
さらにアイコンで切り替わるようになっているので
通常のHarbotテーブルでは無理があります。

それで、お試しで作ってみたのが左のテーブルです。
何も技がないのは寂しいので
marqueeタグを使ってメッセージが流れるようにしてみました。
かわいいサボテンのアイコンは季節の素材篭さんからお借りしました。

う〜〜〜ん。。。
なにしろちょこっと作ってみただけなので、実はかなり不満足
アイコンも自分で作ってみようかな。。。

もし私と同じように思っている方がいらしたら
全てオリジナルなら、配布することもできるし・・・
猫用、ウサギ用と色々・・・
ちょっと考えてみようかな

お留守番背景画像

最近BlogPetサーバーの不具合が多いような気がします。
昨日の夜中もサーバーダウンしていましたよね。。。
これだけ人気があって、みんなが使っていると仕方のないことだとは思いますが・・・

でも、BlogPetサーバーがダウンしてしまうと
ブログそのものの表示にもとても時間がかかってしまうので
ここは是非とも、お留守番背景画像の設置をお勧めしたいと思います。

---

そうと決まれば、まずはお留守番背景探しですが
私はやはり**Silver Heart**さんのものをお勧めしたいと思います。

だってこんなにかわいいんですよ〜〜


この⊂(◎(工)◎)⊃ちゃんが白旗あげて寝そべっている姿も
俳句もたまりません

お留守番背景を用意したら、いよいよ設置ですが
ペットを一匹だけ飼っている場合は
KOROPPYの本棚さんのこうさぎサーバーダウン時に留守番背景を表示する
にあるように
BlogPetのスクリプトを貼ってあるところ（自由入力欄）を

<table border=0 cellspacing=0 cellpadding=0
width=130 height=200 background="留守番背景画像のURL">
<tr><td>BlogPetスクリプト</td></tr></table>

と書き換えます。

KOROPPYの本棚さんでは width=127 height=196 となっていますが
ここでは**Silver Heart**さんのお留守番背景を使うと想定して
それぞれ130 200にしてあります。

次にペットのランダム表示スクリプトを使っている場合は
**Silver Heart**さんのBlogPetのサーバーダウンの際に...
にあるように

<div id="blogpet"></div>

の部分を

<table border=0 cellspacing=0 cellpadding=0
width=130 height=200 background="留守番背景URL">
<tr><td id="blogpet"></td></tr></table>;

と書き換えます。

・・・で、実際昨日の夜、どのように表示されていたかというと
一匹だけのほうは問題なし！
ランダム表示のほうは・・・微妙にお留守番画像がリピートしていました。

もしかしてアクセス解析を有効にしていることが関係あるのかもしれません。
ランダム表示の場合、アクセス解析はあまり意味がないので
これを無効にすれば解決するのかも？？？

あまりそうなっては欲しくはありませんが
次のサーバーダウン時にどのようになっているか・・・ですね。

faviconつけちゃお〜！

企業のサイトはもちろん、個人のＨＰでもよく見かけるようになった
お気に入りアイコンfavicon

Seesaaなら、ブログにfaviconをつけてしまうことも、とても簡単です。

ちなみにこの「BlogPetはじめよう！」「Blogであそぼう！」も
お気に入り登録していただければ
こんなマークがついているんですよ。

---

まずはfaviconとなるべき
拡張子icoのアイコンを作成する必要があります。


私はというフリーソフトを使っているのですが
（画像をクリックするとＤＬサイトへ飛びます）
もっと簡単に作ってしまうなら
Favicon Japanさんがお勧めです。

GIF、JPG、PNGのいずれかで、正方形の画像を用意して
（フリーの素材屋さんからＤＬしてきてもよいのでは？）
faviconを作成するだけです。

自分のパソコンに、作成したfaviconをＤＬしたら
今度はSeesaaにアップロードします。

次にデザイン→HTMLを開いて
<head>タグの中に下記のタグを挿入してください

<link rel="shortcut icon" href="あなたのブログURL/favicon.ico">

あとは保存して、トップページを再構築するだけです。

どんなファイルでもアップロードできるブログは多くはないですから
faviconつきのブログで
ちょっと目立ってしまいましょう！！

リンク系リストの利用

みなさんはお気に入りのブログリストは
どのようにリンクしていますか？

コンテンツの追加でお気に入りリンクでしょうか？

もちろんそれでもかまわないのですが
ブログは常にRSS情報を発信しているので
それを利用するというのも非常に面白いと思うのです。

---

リンク系リストのお勧めは
MyblogList
BlogPeople
アメリカの人気NO.1 Blogrollingなどですが

機能的にはほぼ同じと考えてよいので
ここでは、左下でも使っている
MyblogListを例に説明したいと思います。

まず、登録したブログが更新されると
（そのブログがping送信している必要がありますが）
設定時間により更新マークが表示されます。

そして、ブログタイトルの他に
ブログ作者名、最新記事タイトルなどを表示させることもできます。

この左下「おすすめブログ」では
更新マーク表示を２４時間以内の更新
ブログタイトルにカーソルを合わせると
最新記事タイトルがポップアップされるように設定しています。

どうです？普通のリンク表示より、ずっと便利だと思いませんか？

カウンターを設置しよう

BlogPetにはアクセス解析があるし
たとえばここのように、ペットをランダム表示していて
BlogPetのアクセス解析が使えなくても
Seesaaにもツール→アクセス解析があるので
ブログにカウンターを設置しているところは
そう多くないように思います。

でも、個人のWebsiteの殆どがつけているカウンターを
ブログにも設置して、トータルアクセスなどを確認できるのは
管理者にとっての励みになるし
来てくださる方に、そこにどれくらいの人が訪れているのか
知らせることは、とても意味のあることだと思います。

---

無料カウンターなどで検索して
自分の好みのカウンターを設置して全くかまわないのですが
一般的なカウンターは、ブログには、少しサイズが大きいようです。

そこで、私のお勧めはfrom shunさんの記事
「海外ブログパーツ探しの旅」で紹介されていた
SuperCounterです。

これは私もここで、右サイドバーの一番下
メインの一番上に設置していますが
トータルアクセスはもちろん、その日のアクセス、ページビュー
それに今現在アクセスしている人数など、非常に多機能です。

英語のサイトですが、難しいことはありません。
一番下のメールアドレスやアカウント、初期値、URLを記入して
好みのカウンターを選ぶだけです。

最後に貼り付けコードをコピーして
Seesaaにサインインして
デザイン→コンテンツと進み
コンテンツの追加で自由設定を選択し
入力欄に先ほどのコードを貼り付けて、再構築するだけです。

この時、カウンターというタイトルを表示させるのはどうかと思うので
HTMLの編集はせず、（つまり表示を統一させない）
サイドバーの一番上か一番下に設置するのが良いと思います。

スタイルシートの編集�V

デザインが大体決まったら、あとは文字色の設定を変更するだけです。
これはデザインの変更に比べればとても簡単です。

---

h1 a{}の中で
ブログタイトルの文字色が決められるので
ここのcolor:#6桁の数字;を
カラーコードを参考に好きな色に変えます。

同じように
title a{}で記事タイトル
text{}で記事本文の色を指定します。
posted{} やsidetile{}やside{}内のcolorも同様に指定していきます。

どうです？簡単だと思いませんか？

スタイルシートのカスタマイズでの実例として
私のメインブログも見てみてくださいね。

スタイルシートの編集�U

壁紙やヘッダーだけでなく
とことんオリジナルに変えてしまうのも
そんなに難しいことではありません。

実は私のこのブログ、テンプレートの「さくら」を雛形にしているんです。

どうです？ぜんぜん違うと思いませんか？

---

壁紙やヘッダーについては
スタイルシートの編集�Tのように変更して差し替えます。

私のこのブログを例に説明すると
「さくら」は、右サイドバーのみなので
スタイルシートのlinks-left｛｝
内もlinks{}と同様に指定する必要があります。

ただ、この時、width:○○px;をそのままにしてしまうと
ブログ本体に収まりきれず、サイドバーが落ちてしまうので
width:○○px;の値を調整します。

簡単に言うと、widthとは幅のことなので
links-leftとlinksとcontentとそれぞれのmarginを足した幅が
containerの幅に収まればよいのです。

そして、スタイルシートの中でbackground-image:url();で指定されているものを
殆ど全て自分で作成するか、素材屋さんからＤＬしてきて
それをアップロードし、プロパティを調べて()内を差し替えます。

例えば、「さくら」のh3{}の中では
https://blog.seesaa.jp/img/bg/sakura/title.gifというアイコンが
記事タイトル左に指定されているので、これを差し替えます。

簡単に差し替えをするなら、上記urlをコピーしてブラウザに表示させて
プロパティを確認して同じ幅と高さのアイコンを設定すればいいわけです。

ここで幅や高さも変わってしまった場合は
h3{}内の
paddingを調整します。

同じように
date{}やsidetitle{}内の
background-image:urlの()内を差し替えます。

ここでは







などを作成したり、ＤＬしてきて差し替えています。

この時、date{}であれば
contentの
sidetitle{}であれば
linksのwidthのサイズにぴったり合わせましょう。

そしてblogbodyやsideのbackground-colorを指定すればほぼ完成です。

このブログの場合は、さらにblogbodyに
background-image:url()で画像を指定して
それをbackground-position:bottom;で位置を記事の下としてラインを表示したり
sideにも同じように
下に表示する画像を指定しています。

Seesaaではトップページに限り、プレビューで確認できますし
スタイルシートに名前をつけておけば
いつでももとの状態に戻すことは可能なので
怖がらずに、どんどん自分でスタイルシートをいじってみて
どのようにかわるのか、実際に体験してみることが一番だと思います。

スタイルシートの編集�T

Seesaaの一番の弱点はテンプレートの少なさと、そのデザイン・・・

だったら、自分好みにCSS（スタイルシート）を編集してしまえばよいのです！

基本はとほほのスタイルシート入門などでおさえておくほうがよいことは確かですが
もっともっと単純にデザインを変えてしまうには・・・・

まずは壁紙とヘッダーを変えるだけで印象はずいぶん変わるはずです

---

デザイン→スタイルシートと開き
今、適応になっているスタイルシートを開きます。

一番上
body{}の中で
background-image:url();が指定されていれば
この（）の中身を変えてしまいます。

あなたのお気に入りの壁紙をツールでアップロードして



今アップロードしたファイルのタイトルをクリックして開きます。

開いたら、上の元画像を右クリックして、プロパティを開きます。
アドレス部分をコピーして
先ほどの()内と変えてしまえばよいのです。

プレビューで見てみてください。
あなたのお気に入りの壁紙に変わりましたか？

body{}の中で
background-image:url();が指定されていない場合は
background-color:#6桁の数字;となっているはずです。

その場合、background-color:#6桁の数字;の代わりに
background-image:url();を入れて
（）内に先ほどと同じように
アップロードした壁紙のURLをコピーします。

ただ、このとき
#container{}内に
background-color:#6桁の数字;の指定がないと
ブログ本体の文字背景にもなってしまい
文字が見づらくなることもあるので
background-color:#6桁の数字;を指定するか、文字背景として差し支えない壁紙を
background-image:url();として指定するのがよいと思います。
#container{}内に色の指定がある場合は
そのままにするか、背景色を変えてみてください。
６桁の色のコードはカラーコード表を参考にすると便利です。

同じように、ヘッダーを差し替えるには
#banner{}内の
background-image:url();の
()の中のアドレスを変えればよいので
自分好みのヘッダーを作成するか、素材屋さんからＤＬして
壁紙と同じようにアップロードして、プロパティをコピーし
()内を差し替えます。

このとき、プレビューで見て
ブログタイトルや説明文の位置がおかしければ
タイトルはh1{}内の
padding：○ ○ ○ ○;で調整します。
paddingとは枠の外の余白のことで
（後で出てくるmarginとは枠の内側の余白のことです）
それぞれの数字は、上右下左になるので、数字を変えて確認してみましょう。

説明文は.description {}内の
margin：○ ○ ○ ○;
で調整しましょう。

プレビューで見て大丈夫であればスタイルシートの交換をクリックしますが
このとき、スタイルシートタイトルを
自分のオリジナルの名前に変えておいたほうが、後の作業も楽に進むと思います。