背景の透過具合調整 その4（完結編のはず・・・）

その3の投稿で、よしよしとおもってたら、あれ？これいつからこうなってた？・・・・・

コンテンツの背景位置が・・・・ずれている。
と言うか、幅も変わってるｗｗｗｗ

上半分：正しいサイズ  下半分：想定外ｗ

と言うことで、変更点をさかのぼって戻していくと、解りました。

そもそも、背景の透過設定をしたクラスが良くなかった。

テンプレートデザイナーで背景色を指定した際に、色指定が反映された場所が1行目の.content-innerクラスだったので、同じ場所に透過の設定をして、さらにIE7の表示崩れを解消するために7行目の.fauxborder-left（親DIVのクラス）にwidthを追加したという経緯があったのだが・・・・・・この位置にwidth:100%を指定したことで、サイズがおかしくなっていた。

結果的にさらに上の親クラスcontent-fauxcolumn-outerに設定することで、解決した。

テンプレートデザイナーでの背景設定は、全て透過設定。 IE系も表示崩れはないようだし、背景もきちんと透過されている。

背景の透過具合調整 その3

最初の調整時に、IE7で表示が崩れていた件を修正。

親DIVのクラスにwidth:100%； を追加しました。

IE7表示確認

これで、ひとまずOKかな。

と言うことで、当ブログ「おっさん、ひとりごと。」は、IE非推奨！
chromeまたはfirefoxあたりでの閲覧を強く強く推奨ねがいます。

背景の透過具合調整 その２

前回の調整時、投稿に配置された画像も同様に透過してしまい、不本意だったので設定を見直しました。

【前回の設定】

テンプレのHTML編集で以下の3行目～5行目を追加

【今回の設定】
前回の設定で追加した部分を削除。
テンプレート > カスタマイズ > アドバンス > CSS追加  を選んで以下のcssを追加しました。

1行目
  本ブログテンプレの背景部分に指定されているクラス名

2行目
  RGBAの透過が有効にならないブラウザの時の色指定

3行目
  要素の色と透明度を指定するCSS、3原色の数値とその後ろに0.00～1.00の間で指定（1.0が不透明）
  （今回はopacityではなくRGBAを使ってみた。）

4行目
  5行目の指定を動作させるための指定。（これがないとIEで反映されない場合がある）

5行目
  IEでは3行目の指定が効果無いので、IE用の独自タグ
  （RBGaプロパティはIE8～で対応のはずだが、自分の環境では反映されなかった。)
  その他のIEバージョンは未検証です。
  opacity=  の後ろの数字、0～100迄で指定（100が不透明）

これで、挿入した画像は透過しなくなった。
めでたしめでたし！