FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

背景を半透明にする（透過png）

以前に紹介した「背景を半透明にする（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>の間に以下を加えてください。

赤い箇所は透過pngを使っているクラスやIDを設定します。
カンマ「,」で区切って複数設定することもできます。

当サイトが公開している共有テンプレートであれば
lightframe なら #outline
standard なら #main_body
を設定してください。不要なほうは削除して構いません。

これでIE6でも透過pngが有効になります。

関連記事

[ 2009/08/06 21:54 ] カスタマイズ共通カスタマイズ | TB(0) | CM(13)

≪ 透過png サンプル | HOME | 背景を半透明にする（RGBa） ≫

[ 6315 ]

この記事を見て、半透明化にすることは出来たのですが、
記事などは浮かび上がらせてあとを半透明化にするやり方を教えてくださいm(_ _)m

参考URL>http://mpoch.blog73.fc2.com/
こんな感じです。

あと、リンクは二つ作れないので公式プラグインを
編集して全部消して、リンクを書いたのですが
なんか左側の黒い小さなまるみたいなものが出ないので
その書き表し方も出来ればお願いします。

[ 2009/10/01 13:49 ] [ 編集 ]

[ 6319 ] > キーマン♂GOLDさん

スタイルシートの中の以下の行を削除してください。

/* 重なる要素の背景色なし設定 */
~~.ently_outline,~~

左側の黒丸はリスト構造<ul><li>～</li></ul>で書くと表示されます。

別枠リンク集の作り方
http://10plate.blog44.fc2.com/blog-entry-7.html

[ 2009/10/01 23:50 ] [ 編集 ]

[ 6325 ]

解決しました!!
いつもありがとうございますm(_ _)m

[ 2009/10/02 16:30 ] [ 編集 ]

[ 6330 ] > キ～マン♂GOLDさん

解決して良かったです＾＾

[ 2009/10/03 00:28 ] [ 編集 ]

[ 6578 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/10/20 22:02 ] [ 編集 ]

[ 6595 ]

記事の所を半透明にしないようにするにはどうすればいいんのでしょうか。

/* コンテンツ内側背景の半透明化 */
#main_body {
background-color: transparent; /* 背景色なし設定 */
background-image: url("http://blog-imgs-34.fc2.com/n/a/t/natuki777/white20_20091021222114.png");
}

/* 重なる要素の背景色なし設定 */
.base_table {
background-color: transparent;
}

standard です。

[ 2009/10/21 22:25 ] [ 編集 ]

[ 6599 ] > 東城＠さん

スタイルシートの末尾に加えてください。

.article {
background-color:#FFFFFF;
}

[ 2009/10/21 23:04 ] [ 編集 ]

[ 6603 ]

ありがとうございました＾＾
きちんと理想どおりに作ることが出来ました。
透過pngの0が出来なかったのでｒｇｂにしてしまいましたが……。
これからも頑張ってください＾＾

[ 2009/10/21 23:41 ] [ 編集 ]

[ 6605 ] > 鈴さん

うまく透過できましたね。
理想通りになって良かったです＾＾

[ 2009/10/21 23:49 ] [ 編集 ]

[ 6610 ]

すみません　説明不足だったかもしれません＾＾；

記事はきちんと浮かんできましたが、プラグインなども同様にしたいのですが。

いつもありがとうございます。

[ 2009/10/22 16:28 ] [ 編集 ]

[ 6616 ] > 東城＠さん

スタイルシートの末尾にこれを追加してください。

.menu_cont {
background-color:#FFFFFF;
}

[ 2009/10/22 23:36 ] [ 編集 ]

[ 6621 ]

有難うございます。

あのぉ・・質問よろしいでしょうか？

lightframe　のテンプレを頂こうと思っていたのですが、
プレビューして見ると　プラグイン１&プラグイン２が左側に表示されるのですが＾＾；
なにか解決策ありませんか？
もちろんプレビューだけではなく実際に試しました。

[ 2009/10/23 14:56 ] [ 編集 ]

[ 6629 ] > 東城＠さん

standardは崩れにくいのですが、タグミスがあっても気付きにくいという欠点もあります。

こちらの記事を参考にして、テンプレート、プラグイン、記事のうちどれに崩れる原因があるのか調べてみてください。

表示が崩れる原因の調査手順
http://10plate.blog44.fc2.com/blog-entry-274.html

[ 2009/10/23 23:39 ] [ 編集 ]

コメントの投稿