スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


テンプレート部門に参加中。クリックしてくださると励みになります♪
--:--  |  スポンサー広告  |  EDIT  |  Top↑
2007.03/08 (Thu)

背景を半透明化するフィルターを色々なブラウザで使う方法 

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

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

なんてことはないシンプルなテンプレと思われるでしょうが、裏には苦労が……(´ヘ`;)
フィルターなんか使おうとしたからなんですけどね……。
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】
登録されたようですので、質問やコメントはこの記事にどうぞ
スポンサーサイト


テンプレート部門に参加中。クリックしてくださると励みになります♪
20:48  |  テンプレートUP情報  |  TB(0)  |  CM(30)  |  EDIT  |  Top↑
 | HOME | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。