Seesaaブログの記事背景色を変更する方法
を本日はお伝えします。
①シーサーブログの管理画面を開いて「デザイン」タブの「デザイン一覧」をクリック！②自分の管理しているテンプレート画面が開かれるので、左側に黒丸チェックの入っている、現在自分が使っているテンプレートの名前（左はし）をクリック！③すると下記画面のようなスタイルシート（CSSと呼ばれるやつです）編集画面が表れます。
その中の
【#content】という部分を探します。
スタイルシートを一番上からみていくと…
body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-color:#ffffcc;
}
#container{
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
background-image:url(http://blog.seesaa.jp/img/bg/wakaba/bg.gif);
background-repeat:repeat-y;
background-position : top center ;
width:762px;
color:#000000;
}
a{
text-decoration: underline;
color:#513E19;
}
#banner{
font-family:arial, Helvetica;
height:251px;
margin:0px;
padding:0px 0px 0px 20px;
text-align:left;
background-image:url(http://blog.seesaa.jp/img/bg/wakaba/header.gif);
background-repeat:no-repeat;
}
h1 {
margin:0px;
padding: 30px 10px 10px 0px;
font-size:18px;
font-weight:bolder;
}
h1 a{
color:#597903;
font-family:arial, Helvetica;
text-decoration: none;
font-weight:bolder;
}
h2 {
font-size:12px;
font-weight:bolder;
font-family:arial, Helvetica;
margin:0px;
padding:5px;
background-color:#E8EADD;
border:1px solid #C9CCB6;
}
h3 {
font-size:20px;
font-weight:bolder;
font-family:arial, Helvetica;
margin-top:10px;
padding:0px 0px 10px 12px;
background-image:url(http://blog.seesaa.jp/img/bg/wakaba/title.gif);
background-repeat:no-repeat;
}
h3 a{
font-weight:bolder;
color:#759E03;
}
.description {
color:#597903;
margin:0px 10px 10px 0px;
font-size:12px;
font-family:sans-serif;
font-weight:bolder;
}
.navi {
font-size:12px;
text-align:center;
padding:0px 0px 5px 0px;
}
#content {
←このあたりにあります！float:left;
width:500px;
text-align:center;
margin-top:10px;
}
.blog {
margin:0px;
text-align:left;
margin-left:15px;
}
.blogbody {
margin:0px;
padding:0px;
}
スタイルシート全体ではこの５倍ぐらいの長さがありますが、大体上から見ると、上記のあたりにあります。
④【#content】の部分を以下のように変更します。↓変更前の状態
#content {
float:left;
width:500px;
text-align:center;
margin-top:10px;
上のwidth:500px;
と
text-align:center;
の間に
background-color:#ffffff;
を挿入します。
以下のようになります。
#content {
float:left;
width:500px;
background-color:#ffffff; ←挿入した一行
text-align:center;
margin-top:10px;
color:#ffffff;
は真っ白をあらわすHTMLカラーコードなので、記事本文がよく映えると思います。
もちろん、#ffffff;の部分を他の色に指定することも可能です。
WEBセーフカラーの一覧はこちらのサイトが参考になります
↓
Web Safeカラー 216色以上がSeesaaブログの記事部分の背景色の変更カスタマイズ方法です。
実は僕自身はスタイルシート（CSS)の知識はほとんどありません…
ただ、ブログの既成のテンプレートが、デザインはいいのに、記事本文の色が薄かったり、背景が気に入らなかったり… ということが多々あったので、必要にせまられてググッて色々なサイトで調べて、カスタマイズをほどこしたという次第です。
今のところブログのCSSで僕がカスタマイズできるのは、ヘッダーの画像の変更、ブログ全体の背景の変更、記事背景の変更、記事本文フォントカラーの変更、タイトルと説明文の改行やフォントサイズの変更等々です…
たった、これだけしか知らないわけですが、上記の知識だけで、けっこう自分好みにブログをカスタマイズできます。
また、ブログのカスタマイズについて書きますね。
追記
今回はSeesaaを例にしましたが、僕はFC２もジュゲムもSo-netもアメブロも使います。スタイルシートは大体似通った構造なので、他のブログサービスでも応用できると思います。
あと、カスタマイズはくれぐれも自己責任でお願いします…(^_^;)
スタイルシートをいじくる前には原文をメモ帳やテキストエディットなどにコピペしておきましょう。最悪元の状態に戻すことができますので^^
追記２
僕の奥さんはアラフォーで、最近お肌の曲がり角みたいな感じで、しみ・しわが気になっていたんですが、シルキーモイストローションという天然化粧水ですっごく若返りました。
写真とか載せてブログを書いているので、よかったらチェックしてみてください^^
嫁のブログ
↓ ↓ ↓
しみ・しわを消すシルキーモイストローションのすごい効果
