2009年04月12日
スタイルシート弄り 背景の透過
スタイルシート弄りの記録として背景透過についてアップします！
（※みんカラブラックをベースに弄っています）
スタイルシートの詳細設定画面には以下の分類があります。
ページの基本 タブ コンテンツ共通 ブログ プロフィール 愛車紹介
スポット/マイ掲示板 コメント サイトメニュー
■まずは「タブ」部分の「タブ(通常)のスタイル」です。
font-size:12px;
width:19.5%;
height:30px;
float:left;
display:block;
text-align:center;
background:#666; ← ここを
margin:0 0.6% 0 0;
line-height:2.5;
↓
font-size:12px;
width:19.5%;
height:30px;
float:left;
display:block;
text-align:center;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat; ← このように変更します
margin:0 0.6% 0 0;
line-height:2.5;
すると↓この様になります(^^)/
■今度は「コンテンツ共通」部分の「コンテンツ表示」です。
ここを弄ると、ブログやパーツレビューの背景が透過します。
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;
↓
margin:0px;
padding:0px 0px 8px 0px;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat; ← この様に変更します
width:620px;
すると↓背景が透過しました(^^)/
■今度は「コメント」部分の「コメントテーブル」です。
コメント部分全体の背景設定になります。
vertical-align:top;
background:#333; ← ここを
↓
vertical-align:top;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png); ← この様に変更します
background-repeat:repeat;
■「コメントタイトル」部分
名前が表示される部分です。
background:#333; ← この行を削除します
padding:8px 0 5px 10px;
font-weight:bold;
font-size:12px;
■「コメント日付」部分は、
background:#333; ← この行を削除
color:#999;
text-align:left;
padding-left:10px;
font-size:10px;
line-height:0.5;
font-family:Verdana;
■「コメント表示」部分
コメント内容の表示部分です。
margin:5px;
background:#333; ← この行を削除します
padding:5px;
font-size:12px;
line-height:1.65;
すると↓スッキリします(^^)v
■「サイドメニュー」部分の「サイドメニュー領域」は、
サイドメニュー部分の背景設定です。
width:300px;
padding-bottom:10px;
background:#333; ← ここを
↓
width:170px;
padding-bottom:10px;
float:right;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat; ← この様に変更します
すると↓この様に背景が透けて見えます(^^)v
■サイドメニュータイトル
プロフィール・お友達・ファン・リンクといった見出し部分です。
font-size:12px;
padding:3px 0;
background:#222; ← ここを
color:#eee;
text-align:center;
↓
font-size:12px;
padding:3px 0;
background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/034/bg.png);
background-repeat:repeat; ← この様に変更します
color:#eee;
text-align:center;
↓バッチリです(^_^)v
以上です。
最後までご覧頂き有難う御座いました。
※スペルミスが有ったので訂正しました（2011-09-01）
backgronund-repeat: は
background-repeat: の間違いです！(￣ェ￣;)
間違っている部分が有りましたらコッソリお知らせ下さい(^^;
ブログ一覧 |
スタイルシート弄り | 日記
Posted at
2009/04/12 21:32:28
タグ
今、あなたにおすすめ
