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

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

hader-1

これをSeeSaaの ”記事投稿” → ”ファイルマネージャー” でアップし元ファイルの場所(今回は”http://cat99.up.seesaa.net/image/hader-1.png”)を覚えておいてください。

CSSを変更します。

#container の変更

やり方としてはいくつかあるのですが、backgroundを使いました。

background-repeat:no-repeat; でリピートしない設定となります。

これに合わせてテキストの色と位置を変えます。

#banner の変更し位置を修正します。

h1 a を変更しタイトルの色を変更します。

.description を変更しサイト説明の色を変更します。

 

初めのヘッダ部です

WS00124

変更後のヘッダ部です

WS00126

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


コメントを残す