記事およびサイドバーの背景を半透明にする
以下記事はワードプレス(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%
に変更すれば透明度が変わります。
コメント