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

こんばんは♪
すっかり夜更かしグセのついたプレ之進です。

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




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

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


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


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

透過pngの作り方はこちらの整備手帳に詳しく書いておきました
みんカラブログの検索では、透過pngで作るとは書いてあっても
どのソフトでどうやって作るかまでは書いてなかったので
けっこう苦労しましたｗ
素人が独学でやってみてなんとかできたという方法ですが
もしよかったら使ってみてください
…質問などには答えられないかもしれません（ノд｀）ｺﾞﾒﾝﾖ..

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

まずは
スタイルシート「詳細編集」→「コンテンツ共通」→「コンテンツ表示」で
margin:0px;
padding:10px 20px 8px 20px;
background:url(画像のURL) repeat-y;
width:580px;
の
上から３番目の「画像のURL」に、透過pngのアドレスを貼ってください。
プレビューでブログページなどが半透明化していれば成功です
灰色や白で塗りつぶされるのは失敗ですので、
画像から作り直してください。

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

ブログ部分は半透明化できても、コメント部分が不透明のままでしたら
「詳細編集」→「コメント」→「コメントテーブル」
vertical-align:top;
background:url(画像のURL);
に
透過pngのアドレスを貼ってください

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

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

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

わかりにくくて申し訳ありません…
ぜひ、皆さんのスタイルシート弄りにお役立てください…（*^o^）ノ