Facebook
RSS Feed
Mar 26, 2012

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行を追加すれば、
色んな部分を透明にすることができますよ!お試しあれ!

Posted in Blog, WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト