(3-8) サイドバー メニューのカスタマイズ・背景色のカスタマイズ
今回サイドメニューに背景色を設定します
では早速はじめましょう。今回も前回に引き続きCSS編集用画面の(3) エリアのスタイルブロックの中の、「(3-8) サイドバー メニュー」の解説をします。前回からのつづきとなります。
前回はスタイルシートのコードが、ブログのどの部分に対応しているかを解説しました。基本概念を解説しましたので、見ていない方は、眠たくなるかもしれませんが・・・こちらもお付き合いいただけたらうれしいでうす♪
今回はいよいよこのスタイルシートに変更を加えて、背景色を設定する方法を解説します。
では早速ですが、あなたのCSS編集用画面を開いてください。そして「(3-8) サイドバー メニュー」の部分を以下のように変更してください。赤字が変更箇所。
/* (3-8) サイドバー メニュー
--------------------------------------------*/
/* ①skinMenu と②skinMenu サイドバー メニューのエリア */
.skinMenu{
/* 注 ベースのcssに margin-bottom の記述有り */
background:none;/* ←サイドメニューに背景を敷きたいとき */
}
.skinMenu2{}
/* ③skinMenuHeader サイドメニュータイトルエリア */
.skinMenuHeader{
padding:0px 0px;
background:#ccccff;/* ←サイドメニューのタイトルに背景を敷きたいとき */
border:3px solid #ccccff;
}
/* ④skinMenuBody サイドメニュー本文エリア */
.skinMenuBody{
margin:0px;
padding:10px;
background:#ffffff;/* ←サイドメニューの本文に背景を敷きたいとき */
border-top:none;
border-right:5px solid #ccccff;
border-left:5px solid #ccccff;
border-bottom:5px solid #ccccff;
}
スタイルシートのコードを上記のように変更します。すると全てのサイドメニューの色が変わることがわかります。
解説
っと行きたいところですが・・・今回はここまでとしましょう。あまりに細かすぎるので次回からひとつひとつ紐解いていきます。
もし感が良いあなたならカラーコードを触るだけでどの部分が変更するかを試してみることもできますよ♪私のサイトでもカラーコードの表を紹介していますので、そちらも合わせてご覧ください（カラーコードはこちら）。
おすすめ
