ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

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

 - wordpress ,