Stinger3 カスタマイズ - 背景を半透明に
2016/11/10
自分がカスタマイズしたものを忘れないようにメモ。
自分の場合は背景に大きな画像を配置しています。
この背景の絵は自分で作っているものなのですが。。。
(ツールはinkspaceを使っています。そのうちこれも記事にしたい。)
格好良い悪いは別として。。。
一応pierre-netとしてやっていく上での一つのテーマとしていきたいと思っている。
そんなわけで、他のコンテンツがあっても、この背景だけはうっすらと見せておきたい。
そういったわけで、他のコンテンツを半透明にして、
他のコンテンツを見せつつも、背景も見えるように設定していく。
設定自体はそんなに難しいわけではなく、むしろ簡単で、
下記記載がある通り、すべてstyle.cssを修正することで対応しています。
●メイン(自分の場合は「最新の投稿」)の背景を半透明にする。
下記、style.cssファイルを修正。
#wrap #wrap-in #main {
float: left;
width: 550px;
padding-right: 39px;
padding-left: 39px;
padding-top: 20px;
border: 1px solid #ccc;
background-color: #FFF;
border-radius: 4px 4px 4px 4px;
padding-bottom: 20px;
}
このソースに
background: rgba(255,255,255,0.8);
を追加。
●サイドの背景を半透明にする。
下記のソースをstyle.cssファイルにまるっと追記。
#wrap #wrap-in #side {
float: right;
width: 336px;
border: 1px solid #ccc;
background-color: #FFF;
border-radius: 4px 4px 4px 4px;
padding-bottom: 20px;
padding-top: 10px;
background: rgba(255,255,255,0.8);
}
●メニューバーも半透明にする。
下記のソースをstyle.cssファイルにまるっと追記。
#navi-in li {
background-color: #FFF;
background: rgba(255,255,255,0.5);
border-radius: 4px 4px 4px 4px;
padding-bottom: 5px;
}
ちなみにこのCSSの background: rgba(255,255,255,0.5);に関して調べてみた。
rgbaの文字は(red・green・blue・alpha)の頭文字をとったもので、alphaは色の透明度を表すものらしいです。
そしてそのまま第一引数～第四引数になっています。
第一引数から第三引数まではRGBの色の指定で
0-255、または、0%-100%
で指定します。
第四引数のalphaは
0（完全に透明）～1（完全に不透明）
で指定します。