今回のスキンについて。
透過処理は実はすんごく簡単。CSS中の透明にしたい部分に以下の2文を加えるだけ。
filter:Alpha(opacity=80);
-moz-opacity:0.80; opacity:0.80
上の行がInternetExplorer用のスタイル。opacity=80 ←この数字部分を1~100に変化させることで、それがそのまま透過率(%)になってる。
下の行はNetscape用のスタイル。FireFoxはこっちになる。これは0~1.00の値の範囲で変化させる。
これらはたまたまネットで見つけた。運がよかった♪
あと、背景の固定。今回のスキンはスクロールさせても後ろの画像が動かないよね。これは以下の分を加えるだけ。
background-image: url(http://blog.ameba.jp/user_images/a5/6a/10008264974.jpg);
background-position: center top;
background-attachment:fixed;
background-repeat:repeat-y;
background-color: #EBF4E4;
今回のスキンの背景画像のCSS。赤字の部分が「背景画像-固定」っていうスタイル。こんだけ。簡単でしょ。
ちなみに、上の部分はbody{ }の中に置いてる。そうしないと単一記事表示にさせた時、今のまーさんとこのように、下部分が欠けた状態になってしまう。理由は指定領域の違い。
body{ }は「全て」を表す。「全て」だから、単一記事表示状態でもしっかり一番下まで画像で埋まってる。
だったらまーさんとこもそうしてあげたらいいじゃんってことになるけど、そうすると周りの赤い絨毯みたいな模様の画像が表示できなくなってしまう。実はあの絨毯みたいな模様もbody{ }の中に置かなくてはいけない。だから白とピンクの帯は仕方なくsubFrame{ }のとこに置いてたはず。
ひとつの指定領域(bodyやsubFrame)の中に背景画像は1つしか指定できない。それが今のアメブロのCSSの仕様。そうじゃないスキンもあるけど、それらは全てCSS編集不可になっている。おそらく指定領域の表記の仕方をいじってるんだと思うけど。
僕のCSSの勉強方法はサンプルがないと成り立たない。サンプルが見れない以上、それらを完璧に実現・習得はできない。残念だ。まぁ仕方ないんだけどね。真似て作るのはなかなか難しい。面白いけど♪