• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+

蒼井プレ之進のブログ一覧

2009年06月10日 イイね!

背景の透過についての研究結果(透過.pngを使ってみる♪)

背景の透過についての研究結果(透過.pngを使ってみる♪)こんばんは♪
すっかり夜更かしグセのついたプレ之進です。

最近の仕事といえば、
営業なのにPCの前で売上分析ばかりしてるのに
帰ってきたらスタイルシートいじりで
またPCの前…
今晩も眼をショボショボさせながら
まとめブログ書いてます(笑)




さて、先日のブログにて
背景の固定方法や、ページコンテンツの透過を扱ったんですが
思いのほか反響がありまして、非常にありがたかったです!!

そこでその時にご教授いただきました
png画像を使って、コンテンツの背景を透過させる方法について
独自で研究(ただググりまくっただけですがw)し
なんとか成功しましたので、ブログにあげておきます。
もしよろしければ参考にしてみてください♪
(間違いがあればご指摘いただけると助かります…)


まずはおさらいも兼ねてますが下の3つの画像を見てください
(画像をクリックすると別ウィンドウで開きます)


左から何もないブログの背景、
アルファフィルタで70%透過させたもの、透過pngです
よく見れば分かるようにアルファフィルタでは、
ブログなどのコンテンツ自体を透過させるため、
文字や写真なども色が薄くなって見えずらくなってしまいます…。
それとは逆に透過pngを使った画像は、コンテンツ部分の背景のみが
透過して文字や写真に影響はありません。
コレが最大の特徴です!!

透過pngの作り方はこちらの整備手帳に詳しく書いておきました
みんカラブログの検索では、透過pngで作るとは書いてあっても
どのソフトでどうやって作るかまでは書いてなかったので
けっこう苦労しましたw
素人が独学でやってみてなんとかできたという方法ですが
もしよかったら使ってみてください

…質問などには答えられないかもしれません(ノд`)ゴメンヨ..

ここで作った画像をもとに
スタイルシートを弄っていきます。


まずは
スタイルシート「詳細編集」→「コンテンツ共通」→「コンテンツ表示」
margin:0px;
padding:10px 20px 8px 20px;
background:url(画像のURL) repeat-y;
width:580px;


上から3番目の「画像のURL」に、透過pngのアドレスを貼ってください。
プレビューでブログページなどが半透明化していれば成功です
灰色や白で塗りつぶされるのは失敗ですので、
画像から作り直してください。


同様に、
コンテンツ上部表示・コンテンツ下部表示でも
background:url(画像のURL) の「画像のURL」に、透過pngのアドレスを貼ってください。


ブログ部分は半透明化できても、コメント部分が不透明のままでしたら
「詳細編集」→「コメント」→「コメントテーブル」
vertical-align:top;
background:url(画像のURL);


透過pngのアドレスを貼ってください

余計なプロパティが残っていてアップできないときは
指摘されたものを全部消すといいかもしれません(自己責任で…)

また、コメント欄は意外と複雑な構造をしているので
ほかの場所のbackground~
消去しておくといいと思います。

私自身もまだ把握してないことが多いのですが
ブログの写真が透けるのが嫌で、
せっかく背景が1枚絵の写真だったり絵画だったりしても
ブログは透過させてない方が多いようなので
急いでアップしてみました!

わかりにくくて申し訳ありません…
ぜひ、皆さんのスタイルシート弄りにお役立てください…(*^o^)ノ
Posted at 2009/06/11 01:40:40 | コメント(3) | トラックバック(1) | スタイルシート | 日記

プロフィール

「プレマシー売却しました。9年で83,000km楽しませてもらいました。楽しい時間をありがとう」
何シテル?   06/21 13:52
みんカラでの活動を休止いたします。 当ページにお越しいただきありがとうございました。
みんカラ新規会員登録

ユーザー内検索

<< 2009/6 >>

  12 345 6
7 89 1011 12 13
14151617 181920
21 222324 252627
2829 30    

リンク・クリップ

QLOOKアクセス解析 
カテゴリ:スタイルシート素材
2010/02/06 01:45:06
 
フラッグカウンター 
カテゴリ:スタイルシート素材
2010/02/02 00:19:53
 
YouTube Music Discovery Project 
カテゴリ:その他(カテゴリ未設定)
2010/01/29 00:15:01
 

愛車一覧

マツダ プレマシー マツダ プレマシー
30歳にして初めて買った車です。 ひとによく変わってるといわれますが、 この色(ストラ ...
ヘルプ利用規約サイトマップ
© LY Corporation