2012-03-26

WordPress初心者講座・Q&A:要素を透明にするopacityの使い方

こんなご質問をいただきました。

Silent Movieの本文エリアの透明になる部分の透明具合って変えられますか?

テーマ「Silent Movie」は本文エリアが半透明になってます。
これの透明具合を変える方法ですね。
これはとっても簡単です。

要素を透明にするopacityの使い方(作業時間1分)

ダッシュボード>外観>テーマの編集>スタイルシート

/* 2カラムレイアウト */

#main-single {
float: right;
width: 618px;
min-height: 1000px;
padding: 0px 20px 40px 20px;
margin: 0px 0px 1000px 0px;
display: inline;
background:#fff;
filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
}

スタイルシートにこんな感じの事が書いてある部分があると思います。
本文エリアのサイズとか色とかが指定されてる部分ですね。

この中の以下の部分に注目です!

filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;

opacity!これが透明にする暗号です。
そしてその後になんだか怪しい数字が書いてありますねー。
この数字が透明具合を決める数値です。
80%くらいの感じで透けたらいいやん!っていう指定をしてます。

・filter: alpha(opacity=80);
・-moz-opacity:0.80;
・opacity:0.80;

なぜか3つ書いてありますが、上記3つで1セットだと思ってください。
これはブラウザによって表記が違うだけで、
この3つセットで書いておけばだいたいのブラウザで大丈夫だと思います。
たぶん。IEの古いのは知らんよ。

テーマ「Silent Movie」の場合、
左側メニューの部分も若干透けてるので、これも同じように数値を変えれば、
透けるのやめたりもっと透けたり色々できますよ。

もちろん他のテーマもこの3行を追加すれば、
色んな部分を透明にすることができますよ!お試しあれ!

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のブログ運営のノウハウを詰め込んだミニマルデザインテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!ブログ・自社メディアを始めるなら今がチャンスです!
関連記事