SeeSaaブログのデザインをカスタマイズする(タイトルのポイントなど)

SeeSaaデザインも大体出来上がってきました。
遊びでタイトルのポイントと多少の修正を加えてデザインの完成とします。

まずポイントの画像を用意します。今回は 29×25px で作りました。
背景を透明で使うためGIFとします。

title

SeeSaaの ”記事投稿” → ”ファイルマネージャー” で画像をアップします。

CSSを変更します。

■h3の変更

h3 {
padding: 0px 0px 0px 15px;
font-size:12px;
font-weight:bolder;
background-image:url(http://blog.seesaa.jp/img/bg/lightgray_1/title.gif);
background-repeat:no-repeat;
font-family:Verdana;
}

padding を
padding: 0px 0px 10px 32px;
に変更します。

background-image のURLを
http://cat99.up.seesaa.net/image/title.gif

に変更します。

変更前

WS00131

変更後
WS00136

■.listCategoryArticleの変更

WS00132 
最新記事部のバックを白くします。

.listCategoryArticle{
margin-top:5px;
padding:5px;
border:solid 1px #FFE2E2;
}

background-color:#FFF;
を付け加えます。

WS00135

■#footerの変更

#footer{
clear:left;
height:50px;
}

background-color:#F3FFCC;
を付け加えます。

変更前

WS00133 
変更後

WS00134

■imgの追加

このままだと指定のない画像に枠線が付いてしまいますのでCSSの中に

img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

を付け加えます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

最初からみると
seesaa_before


 seesaa_after

こうなりました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です