まず背景を用意します。今回は #banner 部は 950px × 150px になっていますのでそのサイズに合わせてillustratorにてつくりました。
これをSeeSaaの ”記事投稿” → ”ファイルマネージャー” でアップし元ファイルの場所(今回は”http://cat99.up.seesaa.net/image/hader-1.png”)を覚えておいてください。
CSSを変更します。
#container の変更
#container{
margin:0px auto 0px auto;
width:950px;
color:#5D5D5D;
font-size:12px;
font-family:Verdana;
text-align:center;
}
に
background-image:url(http://cat99.up.seesaa.net/image/hader-1.png);
background-repeat:no-repeat;
を追加します。
やり方としてはいくつかあるのですが、backgroundを使いました。
background-repeat:no-repeat; でリピートしない設定となります。
これに合わせてテキストの色と位置を変えます。
#banner の変更し位置を修正します。
#banner{
margin:0px;
text-align:left;
height:150px;
}
に
padding:10px;
を追加します。
h1 a を変更しタイトルの色を変更します。
h1 a{
color:#5D5D5D;
text-decoration: none;
font-weight:bolder;
}
の #5D5D5D を
#FFF に変更します。
.description を変更しサイト説明の色を変更します。
.description {
font-family:Verdana;
font-weight:bold;
padding:0px 10px 0px 0px;
}
に
color:#FFF;
を追加します。
初めのヘッダ部です
変更後のヘッダ部です
これだけでサイトの印象がガラッと変わります。