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(完全に不透明)
で指定します。