以前に紹介した「
背景を半透明にする(RGBa)」方法は、IE8ではまだ対応していませんでした。
今回は半透明画像(透過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 なら
#outlinestandard なら
#main_bodyを設定してください。不要なほうは削除して構いません。
これでIE6でも透過pngが有効になります。
- 関連記事
-
記事などは浮かび上がらせてあとを半透明化にするやり方を教えてくださいm(_ _)m
参考URL>http://mpoch.blog73.fc2.com/
こんな感じです。
あと、リンクは二つ作れないので公式プラグインを
編集して全部消して、リンクを書いたのですが
なんか左側の黒い小さなまるみたいなものが出ないので
その書き表し方も出来ればお願いします。