SeeSaaブログのデザインをカスタマイズする(サイドバーとリンク色の変更)

header部が変更されだいぶイメージが変わったのでそれに合わせサイドバーなどを変更します。

CSSを変更します。
■まずはカレンダー部

.calendarhead {
padding:4px 0px;
font-weight:bold;
background-color:#F1F1F0;
text-align:center;
color:#5D5D5D;
font-size:12px;
font-family:Verdana;
width:100%;
}

の background-color:#F1F1F0;
を background-color:#89C319;

color:#5D5D5D;
を color:#FFF;

.calendarhead a{
color:#5D5D5D;
}
.calendarhead .calendarday{
color:#5D5D5D;
}

の color:#5D5D5D;
を color:#FFF;

にそれぞれ変更します。

■sideberタイトル部

.sidetitle {
padding:4px 10px 4px 10px;
font-weight:bold;
background-color:#ECECEB;
font-family:Verdana;
}

の background-color:#ECECEB;
を background-color:#89C319;

に変更し color:#FFF;
を追加します。

緑ばっかりになってしまったので、リンクのテキストをオレンジにします。

a{
color:#7C9907;
text-decoration:none;
}

のカラーを #FF6633 に変更します。

変更前

WS00127

変更後

WS00128

こんな風に変わりました。

デザインのコツとしては、同系色や反対色をうまく使うと少ない色でうまくまとまります。


コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください