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

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

背景を半透明にする（RGBa）

以前に「全体を半透明にして背景画像を表示する」方法を紹介しました。
しかしこの方法(opacity)は子要素にも作用してしまうため、文字まで半透明になって見づらくなってしまいました。

今回は子要素に作用しない方法(rgba)で、背景のみ半透明にする方法を紹介します。

ただし IE は未対応です。
対応ブラウザは Firefox 3以上，Safari 3以上，Opera 10以上，Chrome となります。

背景を半透明にしたい要素を次のように設定します。

background-color: rgba(255, 255, 255, 0.5); /* 赤, 緑, 青, 透明度 */

カッコの中の４つの数字は左から順に
赤、緑、青の明るさ 0(暗い) ～ 255(明るい)
透明度 0.0(透明) ～ 1.0(不透明)
となっています。

RGBのカラーコードは、初心者のためのホームページ作り/Web for beginner ホームページ作成支援さんが公開してくれています。

Web Safe Color一覧表/カラーチャート

当サイトが公開している共有テンプレートであれば、スタイルシートの末尾に以下を加えると、記事等の背景を半透明にしてbodyに設定した背景画像が透けて見えるようになります。

【standardの場合】

/* コンテンツ内側背景の半透明化 */
#main_body {
background-color: rgba(255, 255, 255, 0.8);
}

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

【lightframeの場合】

/* コンテンツ内側背景の半透明化 */
#outline {
background-color: rgba(255, 255, 255, 0.8);
}

/* 重なる要素の背景色なし設定 */
.plugin3_body,
.various_body,
.ently_outline,
.comment_outline,
.trackback_outline,
.plugin1_body,
.plugin2_body {
background-color: transparent;
}

RGBカラーや透明度の数値はお好みにあわせて設定してください。
重なる要素の背景をrgbaで透明化しても構いません。

これでbodyに設定した背景画像が透けて見えるようになります。

W3Cが草案中であるCSS3が正式勧告されれば、いずれIEでも可能になるかもしれません。

関連記事

[ 2009/08/04 22:25 ] カスタマイズ共通カスタマイズ | TB(0) | CM(8)

≪ 背景を半透明にする（透過png） | HOME | 【続きを読む】【続きを閉じる】を画像にする ≫

[ 5322 ] 関係なくてすいません

あの
http://tadashiblog.blog83.fc2.com/
↑は僕のブログなんですけど、

最新記事が下にいっちゃうんです・・・。
どうしたらいいですか？

[ 2009/08/06 18:20 ] [ 編集 ]

[ 5323 ] 上の続き

毎回すいません・・・。
プラグインカテゴリ３を作ると下に
(ここで言うとトラックバックのところ)
になってしまいます・・・。

どうにか上に出来ないでしょうか？

[ 2009/08/06 18:33 ] [ 編集 ]

[ 5324 ] ＞ただしさん

その公式テンプレートはプラグイン3が記事上に表示されるものではないので、HTMLでプラグイン3の部分を見付けて記事上に移動し、スタイルシートの数値等を変更する必要があります。

一番簡単な方法はこちらのテンプレート工房様の共有テンプレートをダウンロードして使うことでしょうか。
自分でカスタマイズすれば、誰とも被らないブログが出来上がりますよ＾＾

記事は管理画面で環境設定の変更→記事の設定で新しい順にすれば良いです。

[ 2009/08/06 19:04 ] [ 編集 ]

[ 5330 ] > ただしさん、ちゃんさん

> ただしさん
ちゃんさんのおかげで記事の順序は解決したようですね。
そのテンプレートは私が作成したものではないので、プラグインの表示位置の変更は解りません。こちらに伺ってみてください。

FC2ユーザーフォーラム
http://blogsns.fc2.com/forum_community/

> ちゃんさん
いつもありがとうございます＾＾

[ 2009/08/06 21:52 ] [ 編集 ]

[ 5331 ] >いたおさん

あれなんですが、いたおさんの作った共有テンプレートは、
どこにあって、どう使えば良いのでしょうか・・・？

すいません・・・・・・。

[ 2009/08/06 22:01 ] [ 編集 ]

[ 5332 ] ＞ただしさん

管理画面→テンプレートの設定→共有テンプレート追加→作者「10plate」で検索

ただしさんは既に公式テンプレートを使用しておられるので、その時の手順とほぼ同じです。

[ 2009/08/06 22:29 ] [ 編集 ]

[ 5334 ] 解決

みなさん、僕のために有難うございました。
無事、解決いたしました。

[ 2009/08/07 00:04 ] [ 編集 ]

[ 5335 ] > ただしさん、ちゃんさん

> ただしさん
私のテンプレートにされたのですね＾＾；
プラグイン３は記事の上に表示されるのでこれで解決ですね。

> ちゃんさん
いつもありがとうございます m(__)m
こういう情報はどこかに書いておいたほうがいいですよね。そろそろ本格的にサイト整理します＾＾；