スタイルシートカスタマイズ　コンテンツ表示部分の背景色を透過させる編

前回のブログでは、HTML5/CSS3といった次世代Web標準技術の一つで背景色や文字の色などを透過（半透明）指定する方法（RGBaプロパティバリュー）について紹介しましたが、今回のブログテーマはそのRGBaプロパティバリューを用いて【みんカラ】ブログをカスタマイズする方法を紹介したいと思います。

その前に【みんカラ】ブログのページ全体の背景に背景画像を表示させる基本的な方法は、みんカラ　サポートブログでの「カスタムスタイルシートについて」「簡易編集｜ページの背景」などを参考にしてください。

まず 「みんカラブルー」や「みんカラブラック」などの基本スタイルにあるプロフィール ページ以外の各ページにあるグレーの外枠線で囲まれた部分のページのスタイルを変更するには、ログインしてマイページ ＞ スタイルシート ＞ スタイルシート詳細編集 ＞ コンテンツ共通 のページに進みます。
■ ユーザーコンテンツ(共通)の下にあるコンテンツ表示上部，コンテンツ表示，コンテンツ表示下部の中の background:～; が背景を指定するためのプロパティです。

コンテンツ領域 div#BodyBlockMain	overflow:hidden;
コンテンツ表示上部 div.contentsHeader	margin:0px; padding:0px; background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contentsHeader.gif) no-repeat bottom left; height:4px; width:620px; clear:both;
コンテンツ表示 div.contents	margin:0px; padding:10px 20px 8px 20px; background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contents.gif) repeat-y; width:580px;
コンテンツ表示下部 div.contentsFooter	margin:0 0 10px 0; padding:0px; background:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/contentsFooter.gif) no-repeat top center; height:4px; width:620px;

上記の表は、「みんカラブラック」を基にした基本スタイルのスタイルシート例で、プロフィール ページ以外の各ページにあるグレーの外枠線で囲まれた部分をスタイル指定する箇所です。
この部分は３種類の背景画像を組み合わせて四隅が角丸になった外枠線を表示させていますが、背景画像を使わなくてもスタイルシートで背景色と外枠線のスタイル指定をすることで同じように表示することが出来ます。
（※ 『Internet Explorer 8』以下のバージョンでは角丸にするスタイルシートに対応していません）

背景色を設定するには background-color:～;、
外枠線を設定するには border:～;、
外枠線の四隅を角丸にするには border-radius:～;
というプロパティで指定します。

透過形式の背景画像を用いないで背景色を透過させるには前回のブログで紹介したRGBaプロパティバリューで背景色を指定します。

「みんカラブラック」を基にした基本スタイルのスタイルシート変更例

コンテンツ領域 div#BodyBlockMain	overflow:hidden;
コンテンツ表示上部 div.contentsHeader	margin:0px; padding:0px; height:0px; width:620px; clear:both;
コンテンツ表示 div.contents	margin:0px; padding:13px 19px 11px 19px; background-color:#000; background:rgba(0,0,0,0.7); width:580px; border:1px solid #666; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
コンテンツ表示下部 div.contentsFooter	margin:0 0 10px 0; padding:0px; height:0px; width:620px;

上記表のコンテンツ表示（div.contents）部分のbackground-color:#000;は
RGBaプロパティバリューに対応してないブラウザで見た場合に黒色の背景色で表示させるためのスタイルシートで、 その下のbackground:rgba(0,0,0,0.7);は対応するブラウザで透明度70%の黒色の背景色で表示させるためのスタイルシートです。
透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定します。
仮に透明度50%の白色の背景色にしたい場合には、
background-color:#fff;
background:rgba(255,255,255,0.5);
と表記します。
※なお、スタイルシートは半角英数で記入することが基本です。

border:1px solid #666;は灰色（#666）の1pxの太さで外枠線を表示させるスタイルシートです。

-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;は外枠線の四隅を半径5pxの角丸にするためのスタイルシートです。ただし、『Internet Explorer 8』以下のバージョンでは対応していませんので、未対応のブラウザでは直角の外枠線で表示されます。


コンテンツ表示部分中にある点線下のブログ投稿日時などを表示する部分や愛車紹介ページの愛車の登録日を表示する部分にも別途で背景色が設定されていますので、この部分も変えたい場合は下記の黄緑で指定しているカラーコード部分（#000）だけを削除するとよいと思います。

マイページ ＞ スタイルシート ＞ スタイルシート詳細編集 ＞ ブログ → ■ ユーザーコンテンツ(ブログ)
ブログ本文 div.blogMemo
ブログ情報 div.blogPosted	clear:both; text-align:right; background:#000 url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/line.gif) repeat-x top; margin-top:2em; padding-top:10px; font-size:12px; width:100%;

マイページ ＞ スタイルシート ＞ スタイルシート詳細編集 ＞ 愛車紹介 → ■ ユーザーコンテンツ(愛車紹介)
愛車リスト-愛車の登録日 userCarListEntryDate	text-align:right; background:#000 url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/010/line.gif) repeat-x top; clear:both; width:100%; padding:5px; font-size:12px;

透明度を指定したＰＮＧ画像を使ったスタイルシート変更例

RGBaプロパティバリューは前回説明したように、「Internet Explorer 9」や「Google Chrome 2」以上，「Firefox 3」以上，「Safari 3.1」以上のブラウザでないと対応していませんので、「Internet Explorer 7」や「Internet Explorer 8」などのブラウザでも透過表示させるには、透明度を指定したＰＮＧ画像を用意して背景を指定する必要があります。

コンテンツ表示上部 div.contentsHeader	margin:0px; padding:0px; height:0px; width:620px; clear:both;
コンテンツ表示 div.contents	margin:0px; padding:13px 19px 11px 19px; background:url(表示するPNG画像のURI); _background:#000; width:580px; border:1px solid #666 -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
コンテンツ表示下部 div.contentsFooter	margin:0 0 10px 0; padding:0px; height:0px; width:620px;

ＰＮＧ画像を使わないで背景透過させる方法として Ａｌｐｈａフィルタ filter:alpha(opacity=透明度);や Opacityプロパティ opacity:透明度;を使うという方法もありますが、この方法では前回のブログでも指摘したように、このプロパティを適用した要素内の内包する画像や文字まで半透明になり見難くなってしまいます。
Ａｌｐｈａフィルタに関してはこれを回避する裏技？として、内包する透過させたくない要素にposition:relative;と指定するとその要素は透過されません。