どこでもドアーズLabo

前に書いた、自作写真を使った空のテンプレ、難航しております；
登録申請しては、いや待てよ、と取り消している……。何故かと言いますと……

一応こんな感じで出来てはいるので、明日あたりにはちゃんと登録しようかとは思っております。2月の午後4時頃の空とは思えない（単に加工による）青々感がポイントです！？；（クリックで見本）


なんてことはないシンプルなテンプレと思われるでしょうが、裏には苦労が……(´ヘ｀;)
フィルターなんか使おうとしたからなんですけどね……。
FC2のテンプレには背景を透過するフィルター効果を使っているものも結構ありますが、IE専用のタグしか使ってないものしか、私は見たことないんです……それだと、他ブラウザで見た時は背景は透けず、指定した背景色しか見えないんですね。せっかくの素敵なデザインも、IE以外で見てる人には殺風景なことに。

で、まず、IEと他ブラウザで記述をふりわけて、透過画像が使えないIE6はIE専用のフィルタータグで、他ブラウザは透過pngで背景を半透明化させる方法を試してみました。

これがその記述の例
（ここにはメニューしか載せてませんが、最初はメニューとメイン……記事部分……の双方に指定してました）
↓

/* メニュー（IE以外のモダンブラウザ用） */
#menu {
float:left; /* 左に配置 */
width:210px; /* メニューの幅 */
background:url(http://blog-imgs-14.fc2.com/d/o/k/dokode/touka30p.png); /* 透過画像で半透明にしています */
border-left:#fff 1px dashed;
border-right:#fff 1px dashed;
border-bottom:#fff 1px dashed;
margin:0 0 20px;
padding:0;
overflow:hidden; /* はみ出した部分を隠す */
}

/* メニュー（IE用） */
* html #menu {
float:left; /* 左に配置 */
width:210px; /* メニューの幅 */
background-color:#fff;
filter:alpha(opacity=70); /* IE専用フィルターで半透明にしています。文字や画像の透過が気になる方はfilter:alpha(opacity=70);を削除するか、数字を100に近づけてください（数字が大きいほど不透明） */
background-image:none;
margin:0 0 20px;
padding:0;
border-left:#fff 1px dashed;
border-right:#fff 1px dashed;
border-bottom:#fff 1px dashed;
overflow:hidden; /* はみ出した部分を隠す */
}

透過pngは、適当に縦横10pxくらいの小さい白い（黒でも何でも可ですが）画像を作り、画像加工ソフトで好きな透明度にしたものをpngで保存すれば、作れます。

上の方法で、どのブラウザでも半透明化することには成功したものの、透過画像は重い！
透過pngに限らず、gifのドット画像等でも、透過画像をボックスやテーブル、全体に適用すると、動作は重くなります（その画像サイズがたとえ0.1キロバイトであれ……）。

すべてが透けてしまうフィルタータグと違い、透過画像なら、背景だけが半透明になり、貼った画像や字は透過されないという利点はあるものの、泣く泣く（？）諦め、他ブラウザでもフィルターを使うことに。

そうなんです、IE以外でも今はたいていの新しいブラウザは、フィルタータグが使えるんです。
このサイトさんを参照。
私のテンプレですと、↓赤字の部分が、各ブラウザでのフィルター設定になっております。

/* メニュー */
#menu {
float:left; /* 左に配置 */
width:220px; /* メニューの幅 */
background-color:#fff; /* 背景色 */
filter:alpha(opacity=70); /* IE用透過設定（100に近づけるほど不透明）*/
-moz-opacity:0.7; /* FireFox、Netscape用透過設定（1.0に近づけるほど不透明）*/
opacity:0.7; /* OPERA・MAC・Safari用透過設定（1.0に近づけるほど不透明）*/
border-left:#fff 1px dashed;
border-right:#fff 1px dashed;
border-bottom:#fff 1px dashed;
margin:0 0 20px;
padding:0;
overflow:hidden; /* はみ出した部分を隠す */
}

これで多少は軽くなった……ような気もするけど、いや、やっぱり重い！
そうなんです、フィルタータグも重いものなんです……。

たとえテンプレ自体は軽く作ったとしても、重いプラグインやギミックを入れるユーザーも多いので、あまり気にしなくてもいいのかもしれませんが、自分だったら使いたくないというもったり感が気になって(´_｀;)

結局、メニューとメイン（記事部分）の双方にフィルターをかけるのは諦めて（まずこれが無茶でした；；）、メニューだけで妥協することにしました(^_^;)
使うなら一箇所までなんでしょうね。

ぶっちゃけ、何もフィルターなぞ使わず、このテンプレの場合は、全部、白背景にしても、ありがちなさわやかなデザインになるような気もしたんですが、せっかく色々試行錯誤したのと、フィルターは何もIEの専売特許ではないということを啓蒙するため！？

ということで、フィルターを使う方は、IE以外のブラウザにも指定しましょう。

でも、使いすぎると重くなるので、ほどほどに～（;´▽｀A``

【追記……07.3.15】
登録されたようですので、質問やコメントはこの記事にどうぞ