メッセージボード、サイドバーの背景を半透明にする

おはようございます
沖縄に行ってみたいCSS勉強中スタッフです
ひとまずピグで行ってみた
みんな夏休みはどこかにいった？



先日の記事
記事の背景を半透明にする
の続きで、
今日はサイドバーとメッセージボードも半透明にしてみるよ



まずは
メッセージボードの背景を半透明にする

CSSのなかから、メッセージボードの背景を書く箇所を探す

まずここを探す

/* (3-5) メッセージボード
--------------------------------------------*/

そこ下の .skinMessageBoard にCSSを書くよ

.skinMessageBoard

CSSを書く

.skinArticleの 「 .skinMessageBoard { 」 から 「 } 」 の間を下記のように修正します
※もともと書いてあったものは消して、下記を書いてね

.skinMessageBoard {
border:0;
background:url(http://stat100.ameba.jp/common_style/img/skin/cmn/bg/transparent/transparent_fff_8.png);
}

つづいて、
サイドバーのメニューの背景を半透明にする

CSSのなかから、サイドバーのメニューを書く箇所を探す

まずここを探す

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

次は、いくつかの箇所を修正するからがんばってね



まずは半透明の背景を敷く

「.skinMenu{」 から 「}」 の間を下記のように修正する
※もともと書いてあったものは消して下記を書いてね

.skinMenu{
background:url(http://stat100.ameba.jp/common_style/img/skin/cmn/bg/transparent/transparent_fff_8.png);
}

背景色を出したくない箇所を２箇所修正する


まず一つ目 .skinMenuHeader
「.skinMenuHeader{」 から 「}」 の間の中の background箇所を修正するよ


background を none にする
※もともと書いてあった箇所は消さずに、backgroundの行だけ修正するよ
※backgroundのあとの 「 : 」と「 ; 」の間を noneに変えてね

.skinMenuHeader{
padding:5px 10px;
background: none ;
}

さらにもう一箇所 .skinMenuBody
「.skinMenuBody{」 から 「}」 の間の中の background箇所を修正する

background を none にする

.skinMenuBody{
margin:10px;
padding:10px;
background: none ;
}

ちょっと難しいけど、みんなできたかな







※推奨環境 でお試しください
※CSS編集がうまくいかないときは、この記事⇒「【Tips】CSS編集がうまくできないとき」を参考にしてください。
※このブログのカスタマイズは、「CSS編集用デザイン」 を使ったものです。
※画面、仕様は記事が投稿された時のものです。