SeeSaaブログのデザインをカスタマイズする(headerの背景を画像にする)

まず背景を用意します。今回は #banner 部は 950px × 150px になっていますのでそのサイズに合わせてillustratorにてつくりました。

hader-1

これを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;
 
を追加します。

 

初めのヘッダ部です

WS00124

変更後のヘッダ部です

WS00126

これだけでサイトの印象がガラッと変わります。

コメントを残す