スタイルシート

background-color;（背景色）

壁紙は使わないでブログのイメージカラーを変更します。

seesaaのCSSより

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-image:url(画像URL);
background-repeat:repeat-x;
background-color:#FFF;

このような記述があります。これがブログ全体の背景の設定になります。
壁紙を使用しなければ

background-image:url(画像URL);

background-repeat:repeat-x;

この部分を消して下にあるカラー指定のところ「＃FFF」って書いてあるところを変更します。

この数字はカラーコード（Color Tableと呼ぶこともある）と言ってRGBの16進数で色指定を行います。
英語表記で「red」や「black」など半角英数字で書いても指定できますが、このColorコードを使うのが一般的なのだと思います。

カラーコード表は検索すればたくさん出てくるので見やすいサイトを使ってください。
このコードは文字の色の変更などカラー指定する時に必ず必要ですから良く使うものは覚えておくと便利です。

black　#000000　黒
white　#ffffff　白
blue　 #0000ff 青
red　　#ff0000　赤

辞書登録しておくともっと便利です。
辞書登録についてはまた改めて書いておきます。

では、好きな色のコードに変更してプレビューしてみてください。
イメージ通りか確認できます。

いかがですか？背景の色が変わってよければ「更新」しておいてください。

テンプレートの変更したい部分を全て変更してから適用します。

スタイルシートページＴＯＰへ▲

seesaaのテンプレートから

seesaaにはいろいろなジャンルのテンプレートが用意されています。
でも、3カラムのテンプレートでこのサイトのような右よりはありませんでした。
全部を確実に見たわけじゃないですが、ざっと見たところにはなかったです。
それならばいっそ自分で変更してしまおうと思いました。

テンプレートはお好みで3カラムを選んでおきます。
まずはその元のテンプレートをバックアップしてください。
テンプレートをダウンロードしなおせば簡単に元に戻りますが、バックアップの癖はあるほうがいいと思います。

次に［デザイン一覧］から使用するテンプレート（適用済み）のスタイルシートを開きます。

変更するところは2箇所。

┣ #content
┣ #links-left

この2つの部分に「width:数字%;」が指定されています。
それを入れ替えてあげてください。
fontやmarginの指定はデフォルトのままで大丈夫です。
テンプレートによって数字の部分が「％」ではなく「px」になっているものもあると思いますが
widthの数字部分だけを入れ替えてあげれば同じです。

つまり、通常の真ん中にある記事の部分の幅と左側のサイドバーの幅を入れ替えただけです。
あとはデザインの中の［コンテンツ］に入って左から『記事』『サイドバー1』『サイドバー2』になるように入れ替えてあげてください。
［コンテンツ］のレイアウトの画面での幅は変わっていませんが設定を反映してブログを確認すると
ちゃんと一番左から『記事』『サイドバー1』『サイドバー2』になっていると思います。

背景の画像によっては移動させると見づらくなる物もあるのでその場合は背景画像も変更したほうがいいと思います。

この変形タイプがいいのかはわかりませんが最近よく見かけるので
なんとなく「いいなぁ?」と思っただけですが、試しにやってみてください。
左寄せがよければこれと反対になる部分を変更すればできるということです。

追記

「class」属性の指定も変更しておくといい。
その場合は、HTMLのほうの記述も変更する必要がある。

スタイルシートページＴＯＰへ▲

background-image:（背景画像）

背景にもにも画像を使いたい場合がありますよね。
俗に言う「壁紙」というものを用意します。

壁紙はフリー素材で探しても良いし、自分で作ることも出来ます。
サイズは画像や表示のさせ方でも違ってきますが、seesaaブログの『天使の卵(両サイドバー)』のスタイルシートで説明してみます。

ブログの背景を指定している部分は下記のようになっています

ブログの土台部分になるbodyの部分で背景を設定します。
httpから始まるURLを見てみると縦に細長い画像「2x1300」のサイズになっています。
これを横に繰り返して表示させる指定です。

repeat-x

横方向に並べて表示というものです。
他の表示の仕方は表にまとめてみました。

background-repeat	repeat-y　（縦方向に並べて表示）
	repeat-x　（横方向に並べて表示）
	no-repeat （1つだけ表示）
	repeat 　（敷き詰めて表示）デフォルト

ちなみに、

background-image: none;

url( )のところに「none」といれれば画像無しの表示になります。

スタイルシートを見ているとbackground-image:url( )
こういう記述は他にもあります。それぞれ好きな画像に変更してみてください。

スタイルシートページＴＯＰへ▲