【CSS魂】*アメブロCSSテンプレート,ダウンロード*Raidi Office

【CSS魂】*アメブロCSSテンプレート,ダウンロード*Raidi Office

シンプルで使いやすいアメブロのCSSを配布、公開しています

Amebaでブログを始めよう!
CSSテンプレートのサイドバーの色を編集する方法です。
CSSコードの以下の部分を編集します。


/* (3-8) サイドバー メニュー
--------------------------------------------*/


/* skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}


/* skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:5px 10px;
background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */
}


/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
}


上のコードの中に3箇所ある、
background:# の部分の色コードを変更します。
以下はカラーを変更した例です。

↓はデフォルトのカラー
$【CSS魂】*アメブロCSSテンプレート,ダウンロード*Raidi Office


◆/* skinMenu サイドバー メニューのエリア */ の項目のカラーを、
background:#222222; にした場合。
$【CSS魂】*アメブロCSSテンプレート,ダウンロード*Raidi Office


◆/* skinMenuHeader サイドメニュータイトルエリア */ の項目のカラーを、
background:#222222; にした場合。
$【CSS魂】*アメブロCSSテンプレート,ダウンロード*Raidi Office


◆/* skinMenuBody サイドメニュー本文エリア */ の項目のカラーを、
background:#222222; にした場合。
$【CSS魂】*アメブロCSSテンプレート,ダウンロード*Raidi Office



バックの色を変更した場合、文字が読みにくくなることがあるので、
お好みで以下のコードを追加します。(#ffffff は白色)

color:#ffffff;

例)
/* skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:10px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
color:#ffffff;
}