スポンサーサイト 

上記の広告は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↑

Comment

●お借りします。

本日、テンプレートを使わせていただく事になりました。
どうも ありがとうございます。

カスタマイズもやりやすくて、何といってもデザインが好きです!
文字サイズなども、相手の表示設定に関係なく一定なので、
文字配列にこだわる僕にとってはありがたいテンプレートです。

今後とも宜しくお願いします。
村上来夏 |  2007.03.15(木) 20:59 | URL |  【編集】

●ありがとうございます♪

テンプレ、気に入ってくださってありがとうございます、嬉しいです(*^▽^*)
こちらこそよろしく~。
文房具写真、スタイリッシュな感じですっごくステキですねv

ところで、私のテンプレの文字サイズは、初期設定では相手の環境に関係なく、同じサイズの文字を表示する絶対指定になっていますが、相手の環境にあわせてサイズが変化する相対指定にも出来ますので(たとえばfont-size:12px;とかのところをfont-size:95%;とかに書き換えるだけでOKです)、お好みで、好きなサイズに、絶対指定でも相対指定でも構わないので、書き換えてくださいませъ( ゜ー^)

逆に村上さんが何か他に気に入ったテンプレがあって、それが相対指定だった場合も、カスタマイズOKのテンプレなら、フォントサイズ固定の絶対指定にカスタマイズすることも出来ます(上と逆のことをすればOKです)ので、ご参考までにe-68
どこ |  2007.03.16(金) 00:15 | URL |  【編集】

●管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
 |  2007.03.18(日) 10:22 |  |  【編集】

●ありがとうございますv

匿名でコメントくださった方、どうもありがとうございます^^
こういうの好きと言っていただけたり、使っていただけるのは、作った甲斐があって、とても嬉しいですe-266
ありがとうございました(^▽^)
どこ |  2007.03.18(日) 23:28 | URL |  【編集】

●管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
 |  2007.03.19(月) 01:13 |  |  【編集】

●ありがとうございます^^

非公開でコメントをくださった方、テンプレ、気に入ってくださってありがとうございます(*´∇`*)
ブログ開設したばかりなのですね。楽しそうなブログになりそうですね!
これからのブログライフ、楽しんでくださいねv
どこ |  2007.03.19(月) 23:42 | URL |  【編集】

●管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
 |  2007.04.05(木) 01:09 |  |  【編集】

こんにちはm(__)m

先日、青空のテンプレートをDLして使わせていただいております~
すっきりとさわやかな青空が気持ちいいです。
ブログを訪れる方にも好評で、合わせて感謝いたします。

では、テンプレ作りがんばってくださいませ(^_-)-☆
ToyPoo |  2007.04.24(火) 14:02 | URL |  【編集】

●ありがとうございますv

テンプレ気に入ってくださり、わざわざコメントまでくださって、とても嬉しいです~(*^▽^*)
これからも頑張りますね!
ありがとうございましたm(_ _)m
どこ |  2007.04.25(水) 19:54 | URL |  【編集】

はじめまして。
とても素敵なデザインで気に入って使わせて頂いています。

さっそくの質問で申し訳ないのですが。
以前、このテンプレートをDLさせていただいたときは記事のタイトルと日付は同じところに表示されていたと思うのですが
この前新たにDLさせていただいたら記事タイトルと日付けの位置が変わっていたのですが

設定を変更されたという事ですが
前のように(タイトルと日付を同じ所に)表示することは可能でしょうか?

お手数をお掛けいたしますが御回答宜しくお願い致します。
k |  2007.07.08(日) 00:04 | URL |  【編集】

●タイトルと日付けの入れ替え

>kさん
テンプレ気に入ってくださって、ありがとうございます(*^▽^*)

テンプレを使ってくださっている方のブログを見ると、結構、記事にタイトルを使わない方もいたので、最近、書き換えたり作ったテンプレは、仕切り代わりに使っているような画像の部分は必ず表示される日付けにして、タイトルはあってもなくてもデザインがおかしくならないようにしております。
でも必ずタイトルを入れる方なら、どちらでも構わないんですよね;

もし前のデザインの方がいいのでしたら、まずHTMLのソースを見て、記事の日付けと記事タイトルの部分を以下のように書き換えてください。


<!--▼エントリータイトルここから▼ー-->
<h2 class="entry_title"><a href="<%topentry_link>" title="「<%topentry_title>」を開く"><%topentry_title></a></h2>
<!--/エントリータイトルここまで-->

<!--▼エントリー日付ここから▼ー-->
<div class="entry_day">
<%topentry_year>.<%topentry_month>.<%topentry_day> (<%topentry_youbi>)</div>
<!--/エントリー日付ここまで-->


そして、次にスタイルシートから以下の部分を探して、以下のように書き換えてください。

/* 記事タイトルのリンク設定 */
.entry_title a:link, .entry_title a:visited, .entry_title a:active {
color:#fff;
text-decoration:none;
}
/* カーソルが乗った時 */
.entry_title a:hover {
color:#fff;
background:#9cf; /* 背景色 */
text-decoration:none;
}



/* 記事日付 */
.entry_day {
text-align:right;
font-family:Verdana,Chicago,Arial,Helvetica; /* 日付けの文字種類 */
font-size:15px; /* 文字サイズ */
color: #9cf; /* 文字色 */
font-weight:bold; /* 文字の太さ */
margin:0;
padding:5px 10px;
}

/* 記事タイトル*/
.entry_title {
text-align:left;
font-family:Verdana,Chicago,Arial,Helvetica; /* 文字種類 */
font-size:14px; /* 文字サイズ */
color: #fff; /* 文字色 */
font-weight:bold; /* 文字の太さ */
background:url(http://blog87.fc2.com/d/dokode/file/doskybg.jpg); /* 背景画像のURL */
background-color:#369;
margin:0;
padding:5px 10px;
}

申し訳ありませんが、以前のデザインのバージョンを保存していないので; まったく同じになるかどうかはわからないんですが、細かい文字の大きさとか色とかは、お好みで調整してください(;´▽`A``
どこドア |  2007.07.08(日) 00:34 | URL |  【編集】

●ありがとうございます。

こんばんは。

詳しい回答有難う御座います。
さっそく変更してみました。
あまり詳しくない私ですが上手く出来たみたいです^^

本当に有難う御座いました。
k |  2007.07.09(月) 01:31 | URL |  【編集】

●よかったです

うまくいぅたようでよかったです(^▽^)

報告してくださって、ありがとうございました♪
どこドア |  2007.07.12(木) 13:49 | URL |  【編集】

●はじめまして

素敵なテンプレートだったので、DLさせていただきました!

早速質問で申し訳ありませんが、全体のレイアウトを左寄せにする事は可能でしょうか?
現在は中央寄せになっているのですが、変更の仕方が解らず…
お手数ですが、御回答いただければ幸いです
よろしくお願いいたします
マコ |  2007.10.13(土) 02:32 | URL |  【編集】

●左寄せにする方法

>マコさんへ

テンプレ気に入ってくださって、嬉しいです(^-^)

センターレイアウトを左寄せにするには、スタイルシートの編集で2箇所書き換えるだけで出来ますので、まず以下の部分を探してください。
/* 画面全体の設定 */
body {
text-align:center; /* IEのバグを利用して中央に配置 */
(以下長いので略)
}
上の赤字部分を
text-align:left;
に書き換えてください。

それから
/* 全体のレイアウト */
#layout {
width:780px; /* 全体のレイアウト幅 */
padding:0;
margin:0 auto; /* 左右マージンを自動計算することにより中央に配置 */
}
上の赤字部分を
margin:0 0 0 20px;
に書き換えてください。

これで左寄せでも、おかしくならないレイアウトになると思います。
20pxのところは左側からどのくらい距離を取るかという数値ですので、お好みで変えてもOKですe-68
どこ |  2007.10.14(日) 00:51 | URL |  【編集】

●ありがとうございます!

丁寧なご回答ありがとうございます…!
早速変更する事ができました
これで素敵なテンプレートを使うことが出来ます

これからも素敵なテンプレートを楽しみにしています
本当にありがとうございました!
マコ |  2007.10.14(日) 04:56 | URL |  【編集】

●マコさんへ

ご希望通りになったようでよかったですe-68
拙作が、楽しいブログライフのお手伝いになれば幸いです♪
どこ |  2007.10.15(月) 20:15 | URL |  【編集】

●「do_bluesky」 DLの挨拶とご質問

初めまして!快晴蒼空と申します。
すごくいいテンプレートなのでDLさせていただきましたっ (^^)
自分の使っているハンドルネームにとてもマッチしているので
嬉しいかぎりです♪

挨拶早々で申し訳ないのですが、私はブログ作成初心者でよくわからなく、「3カラム」というレイアウト表示への変更したいのですが
可能なのでしょうか?

右にプラグイン3をもっていきたく
いろいろ調べてやってはみたのですが、テンプレートのレイアウトの形がチグハグになってしまい困り果てています(TT)

よろしければ、お手数をおかけしますが
変更方法など教えていただけましたら幸いです(汗
よろしくお願い致します。

あと、長文失礼致しました(汗
快晴蒼空(かいせいそうくう) |  2007.10.23(火) 12:35 | URL |  【編集】

●カラム違い

快晴蒼空さん
テンプレ気に入ってくださって、嬉しいです(^-^)

カラム数変更は、何十箇所もソースを書き換えなければならないので、説明しただけでは、HTMLとCSSの知識がないと、難しいと思います。
それに素材も作りかえる必要があり、説明するより全部、作る方が早いので、ものによっては、カラム違いを作って登録したり、ここでソースを配布したりしているんですが、do_blueskyは3カラムには向かないデザインですので、申し訳ありませんが、作る予定はありませんm(_ _)m
もし空で3カラムのテンプレが欲しいのであれば、私のテンプレでしたら、do_resky3cというテンプレのソースを配布しておりますので、そちらをお使いくださいませ。
http://dokode.blog87.fc2.com/blog-entry-105.html#more

または、管理画面から、テンプレートの検索で、テンプレートレイアウトで「3カラム」を選び、キーワードに「空」とか「sky」を入れれば、色々な方の空の3カラムのテンプレが沢山ヒットしますので、その中から、お好きなものを選んでくださいねe-68
どこ |  2007.10.23(火) 23:02 | URL |  【編集】

●お礼♪

丁寧なご説明、痛み入ります~
助かりますよ~。・゜・(ノД)・゜・。

ぜひ使わせていただきます!!
(´▽`)ありがとうございました!

これからも新しいテンプレート期待しています。
がんばってください♪ (^o^)/
快晴蒼空(かいせいそうくう) |  2007.10.24(水) 07:57 | URL |  【編集】

●快晴蒼空さんへ

解決したようでよかったです(^-^)

応援どうもありがとうございます♪
そちらもブログ運営、頑張ってくださいね!
どこ |  2007.10.25(木) 21:23 | URL |  【編集】

●はじめまして

はじめまして、こちらのテンプレ、ものすごく気に入って使わせていただいてます。
safiriバージョン 3.0.4(523.12.2)なのですが、最初の3日間はきちんと表記されてたのに、4日目に記事をUPしたら突然背景の空の画像がきえてしまいました・・・。
macでは動作確認されていないということなので、仕方がないとは思いますが、ご相談にのっていただければと思ってコメントさせていただきました。
natumi |  2008.02.21(木) 12:32 | URL |  【編集】

●画像に枠をつけたい

どこドアさん、こんにちは。
在豪の主婦、豪州サンディと申します。
現在3つのブログを運営中ですが、そのうち2つのブログでどこドアさんのテンプレをお借りしています。

こちらの青空のテンプレは猫ブログ用にお借りしていますが、画像に枠を付けられないものでしょうか?
枠の色の指定も出来るのでしょうか?
もし付けられるようなら、その方法を教えて頂けないでしょうか?

どうぞ宜しくお願いします。
豪州サンディ |  2008.09.11(木) 14:10 | URL |  【編集】

●豪州サンディさんへ

こちらの記事をご覧くださいませ~。
http://dokode.blog87.fc2.com/blog-entry-188.html
どこ |  2008.09.13(土) 22:29 | URL |  【編集】

●相原やよいさんへ

元の画像は↓で
http://blog-imgs-14.fc2.com/d/o/k/dokode/doskybana.gif
これは画像ソフトとかで作りなおさない限り、大きさは変えられませんが(ちなみに、このテンプレは画像のカスタマイズもOKですので、もしもっと大きいのが必要なら、背景に使っている大きい画像から好きな大きさの画像を作ってはどうでしょう?)、ヘッダーの幅のことでしょうか?
もしそうでしたら、スタイルシートのヘッダーの幅や高さを書き換えればOKですよ。
その際は、ヘッダーの幅はメイン部の幅と同じにしてくださいねー。
どこ |  2008.09.13(土) 23:02 | URL |  【編集】

●写真枠付き・成功!

どこドアさん、おかげ様です。
写真に枠を付けることが出来ました!
これで、ちょっと見栄えのする写真になったかな?(笑)
お忙しいところお教え頂き、ありがとうございました!
豪州サンディ |  2008.09.14(日) 12:49 | URL |  【編集】

●豪州サンディ

解決したようでよかったです(^-^)
ステキな写真がいっぱいですねー。
どこ |  2008.09.19(金) 00:01 | URL |  【編集】

●承認待ちコメント

このコメントは管理者の承認待ちです
 |  2010.02.02(火) 21:42 |  |  【編集】

●承認待ちコメント

このコメントは管理者の承認待ちです
 |  2010.02.02(火) 21:53 |  |  【編集】

●承認待ちコメント

このコメントは管理者の承認待ちです
 |  2010.10.12(火) 10:07 |  |  【編集】

コメントを投稿する

URL
COMMENT
PASS  編集・削除するのに必要
SECRET  管理者だけにコメントを表示
 (現在非公開コメント投稿不可)
 

▲PageTop

Trackback

この記事のトラックバックURL

→http://dokode.blog87.fc2.com/tb.php/42-a6e90fac
この記事にトラックバックする(FC2ブログユーザー)

この記事へのトラックバック

▲PageTop

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