アメブロテンプレートカスタムpartⅣ

カスタム可能なテンプレートを使って簡単なカスタムを紹介します

今回は、サイドバーのバックスタイル変更です

前回の変更がまだの方は↓

メイン記事アウトライン変更

何を変えるかと言うとこんな感じ　↓ 

まずは、CSS編集画面を開いてください 

333行目から変更します 

/* (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;/* ←サイドメニューの本文に背景を敷きたいとき */

}

↑　ここです

まずはタイトルだけ背景を指定する方法から

/* skinMenu サイドバー　メニューのエリア */

.skinMenu{

/* 注　ベースのcssに margin-bottom の記述有り */

background:#f7f7f7;/* ←サイドメニューに背景を敷きたいとき */

}

ここの赤で指定した部分がサイドバーの
各コンテンツの背景を指定します

#ffffffにしましょう

タイトルの背景だけになっていると思います

/* skinMenuHeader サイドメニュータイトルエリア */

.skinMenuHeader{

padding:5px 10px;

background:#e4e4e4;/* ←サイドメニューのタイトルに背景を敷きたいとき */

}

ここの赤で書いた部分が背景カラーの指定です
好みの色に変えてください

そのままの四角い形でいいのであれば
ここからは読み飛ばしてください

さて、角丸をしたいと思います

角丸のタグはこうです↓

 border-radius: 0px;　四隅
 border-top-left-radius: 20px; /* 左上 */
 border-top-right-radius: 20px; /* 右上 */
 border-bottom-left-radius: 20px; /* 左下 */
 border-bottom-right-radius: 20px; /* 右下 */

好きなところを角丸にしてください

サンプルタグ

/* skinMenu サイドバー　メニューのエリア */

.skinMenu{

/* 注　ベースのcssに margin-bottom の記述有り */

background:#ffffff;/* ←サイドメニューに背景を敷きたいとき */

}

.skinMenu2{}

/* skinMenuHeader サイドメニュータイトルエリア */

.skinMenuHeader{

padding:5px 10px; 

background:#44e5e5;/* ←サイドメニューのタイトルに背景を敷きたいとき */

border-top-left-radius: 10px;  /* 左上 */

border-bottom-right-radius: 10px; /* 右下 */

こんな感じもできます


変更するのはここです↓

/* skinMenuBody サイドメニュー本文エリア */

.skinMenuBody{

margin:10px;

padding:10px;

background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */

}

その前にサイドバーのコンテンツの仕組みを理解してください

3つのエリアが重なってできています

こうです↓

デフォルトではエリアのmarginが10px付けてあります

これはコンテンツ全体に対する幅の指定です

margin:10px; 　ここの数字を少なくすれば

アウトラインが細くなります

角丸にしたとき少し切れてしまいます

それはベースCSSで指定されているからでしょうね

もしくはtukasaが変更箇所を見つけれていないかです

今度ジックリ見てみますね

おまけのCSS

CSSを見ると　/*　アイウエオ　*/　こんなタグを見ますね

スラッシュ/

アスタリスク*

このタグはCSSのコメントタグといいます
/*でくくった内側にどこのタグかなどを記載します
半角を前後にあけて書きます

おまけでした