背景を半透明にする（透過png）
以前に紹介した「背景を半透明にする（RGBa）」方法は、IE8ではまだ対応していませんでした。
今回は半透明画像（透過png）を使って、IEでも半透明を実現する方法を紹介します。
まず背景画像として使用する透過pngが必要です。
いくつかサンプルを用意しました。自分のファイル置き場にアップロードしてご自由にお使いください。
半透明にしたい要素の背景にこの透過pngを設定することで、半透明化を実現します。
当サイトが公開している共有テンプレートであれば、スタイルシートの末尾に以下を加えると、記事等の背景を半透明にしてbodyに設定した背景画像が透けて見えるようになります。
【standardの場合】
【lightframeの場合】
重なる要素の背景に透過pngを設定しても構いません。
これでIE7以上では、bodyに設定した背景画像が透けて見えるようになります。
IE6は透過pngに対応していないため、さらに工夫が必要になります。
Drew Diller's blogさんがIE6でも透過pngを有効にするjavascriptを公開されています。
DD_belatedPNG: Medicine for your IE6/PNG headache!
ページの真ん中あたりにあるDD_belatedPNG_0.0.8a.jsというjavascriptをダウンロード（コピーしてメモ帳等に貼付け）してください。
現時点(2009/08/06)では最新バージョンが0.0.8aですが、今後さらに上がるかもしれません。
ファイル名にドット「.」があるとFC2にアップロードできないようです。
DD_belatedPNG.js等と名前を変えてからFC2にファイルアップロードしてください。
そしてHTMLの<head>～</head>の間に以下を加えてください。
赤い箇所は透過pngを使っているクラスやIDを設定します。
カンマ「,」で区切って複数設定することもできます。
当サイトが公開している共有テンプレートであれば
lightframe なら #outline
standard なら #main_body
を設定してください。不要なほうは削除して構いません。
これでIE6でも透過pngが有効になります。
今回は半透明画像（透過png）を使って、IEでも半透明を実現する方法を紹介します。
まず背景画像として使用する透過pngが必要です。
いくつかサンプルを用意しました。自分のファイル置き場にアップロードしてご自由にお使いください。
半透明にしたい要素の背景にこの透過pngを設定することで、半透明化を実現します。
当サイトが公開している共有テンプレートであれば、スタイルシートの末尾に以下を加えると、記事等の背景を半透明にしてbodyに設定した背景画像が透けて見えるようになります。
【standardの場合】
/* コンテンツ内側背景の半透明化 */
#main_body {
background-color: transparent; /* 背景色なし設定 */
background-image: url("透過pngのURL");
}
/* 重なる要素の背景色なし設定 */
.base_table {
background-color: transparent;
}
【lightframeの場合】
/* コンテンツ内側背景の半透明化 */
#outline {
background-color: transparent; /* 背景色なし設定 */
background-image: url("透過pngのURL");
}
/* 重なる要素の背景色なし設定 */
.plugin3_body,
.various_body,
.ently_outline,
.comment_outline,
.trackback_outline,
.plugin1_body,
.plugin2_body {
background-color: transparent;
}
重なる要素の背景に透過pngを設定しても構いません。
これでIE7以上では、bodyに設定した背景画像が透けて見えるようになります。
IE6は透過pngに対応していないため、さらに工夫が必要になります。
Drew Diller's blogさんがIE6でも透過pngを有効にするjavascriptを公開されています。
DD_belatedPNG: Medicine for your IE6/PNG headache!
ページの真ん中あたりにあるDD_belatedPNG_0.0.8a.jsというjavascriptをダウンロード（コピーしてメモ帳等に貼付け）してください。
現時点(2009/08/06)では最新バージョンが0.0.8aですが、今後さらに上がるかもしれません。
ファイル名にドット「.」があるとFC2にアップロードできないようです。
DD_belatedPNG.js等と名前を変えてからFC2にファイルアップロードしてください。
そしてHTMLの<head>～</head>の間に以下を加えてください。
<!--[if lte IE 6]>
<script type="text/javascript" src="DD_belatedPNG.jsのURL"></script>
<script type="text/javascript">
DD_belatedPNG.fix( '#outline, #main_body');
</script>
<![endif]-->
赤い箇所は透過pngを使っているクラスやIDを設定します。
カンマ「,」で区切って複数設定することもできます。
当サイトが公開している共有テンプレートであれば
lightframe なら #outline
standard なら #main_body
を設定してください。不要なほうは削除して構いません。
これでIE6でも透過pngが有効になります。
