stinger3 備忘録 6

stinger3 stinger3 備忘録
スポンサーリンク

記事およびサイドバーの背景を半透明にする

 

 

以下記事はワードプレス(WP)や、テーマのstinger3をカスタマイズ
したやり方等を忘れないために書き留めた備忘録です

記事内にソースコードを表記してる箇所は、ダブルクリックすると
ソースコードが全選択されるので、コピーして使えます。
記事およびサイドバーの背景の半透明
SAKI さんのブログ

メイン、サイドバー、メニューバーの背景を白半透明にする

を参考にしました。

ありがとうございます。

子テーマに下記コードを追加した。

[css]
/*記事およびサイドバーの背景の半透明*/
#wrap #wrap-in #side {
float: right;
width: 336px;
border: 1px solid #ccc;
background-color: #FFF;
background: rgba(255,255,255,1);
border-radius: 4px 4px 4px 4px;
padding-bottom: 20px;
padding-top: 10px;
}

#wrap #wrap-in #main {background: rgba(255,255,255,1);
}

#navi-in li {
background-color: #FFF;
background: rgba(255,255,255,1);
border-radius: 4px 4px 4px 4px;
padding-bottom: 5px;
}

#container #wrap #wrap-in #main .post .entry .entry-content .
entry-title-ac {
background-color: #FFF;
background: rgba(255,255,255,1);

#wrap #wrap-in #main .post .sumbox02 #topnews div dl dd .sai
sin{
background-color: #FFF;
background: rgba(255,255,255,1);
}

/* IEとNN系のBox解釈の違いの緩衝 */
* { box-sizing : border-box}
* { -moz-box-sizing : border-box}
* {
margin:0;
padding:0;
font-family: "Arial", "ヒラギノ角ゴ Pro W3", "Osaka‐等幅",
sans-serif;
font-weight: normal;
}
[/css]

最初のうちは半透明で運営していましたが、記事が読みづらい事に
気づいたので、最終的に背景色を白にした。

そこで再度変更すのもおっくうなので、現状の背景色を半透明にす
るコードをそのまま利用して一部を変更した。

[css]
background: rgba(255,255,255,1);
[/css]

のコード
rgba(255,255,255,1)の

「1」の箇所の数値を

0 なら・・・透明度100%
0.5なら・・・透明度50%
1 なら・・・透明度0%

に変更すれば透明度が変わります。

コメント