背景を半透明にする

昨日テンプレートを変えてみました。

(3月20日追記:IE6.0ではきちんと表示されていないことがわかりましたので、一旦、前のテンプレートに戻しました。)

パッと見、とても気に入ったテンプレートがありましたので、早速ダウンロード。
でも、細かな部分で自分の好みでないところがたくさんありましたので、自分の好みにカスタマイズして使っています。

2009031902.jpg昨日は気にならなかったのですが、今日ふと気になり始めたことがありました。
私のパソコンのディスプレイの解像度は横幅1440。
横幅1440のディスプレイで見ると←こんな感じに見えます。

左側の花柄の背景と記事欄とがちゃんと離れているので、記事も読みやすいと思います。

2009031906.gif
ここ2ヶ月ほどの訪問者のディスプレイの解像度が気になり調べてみると、一番多いのは1024×768のもの。

1024の横幅で試して見てみると記事部分と背景が少し被りました。

2009031901.jpg←横幅800の大きさにして確認してみるとご覧の通り。
かなり被ってしまって、読みにくそうです。
そうなると、どうも気になって気になって……(^^ゞ

記事欄の背景に白色のべた塗りを持ってくると、記事の文字は読みやすくなりますが、全体の背景(花柄)が少し見えなくなり、ちょっとそれも変……。

そこで、記事欄の背景に白色のべた塗りをもってきて、それを半透明にしようと思いつきました。
CSSに
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;

を書き加えてやると半透明になり、見やすくなるのですが、写真などの画像も半透明になってしまうのよね…il||li _| ̄|○ il||li
それに…ブラウザによっても半透明にならない場合もあるし…。

元々記事欄の背景画像に半透明の画像を持ってくるようにしたらいいんじゃないか…と考えたのですが、透明度のある(透けている)画像を貼り付ける方法がわかりません。

2009031901-1.jpgそこで、調べてみると「なるほどぉ~!」と思う方法が書いてありました♪
その方法で貼り付けたのがこれ←。

ちゃんと花柄の背景も見えてるし、記事欄の文字も読みやすくなってるでしょ?
この方法思いついた人すごいっ!

2009031903.jpg
例えば…
前回使った画像を使って表示してみると……
それを貼り付けることによって、右側のチューリップのように見えるようになります。

少し白く見えるので、文字をその上にのせても読みやすくなりますね(#^.^#)

ちょっと面倒くさ~い作業ですが、簡単にできますので、以下手順を書いておきます。

使用ソフトはPhotoshop Elements 6ですが、他の画像編集ソフトでも同様にできると思います。

2009031903.gifこのような市松パターンを作っていきます。
この画像はかなり拡大しています。
一つのブロックは1pxです。
とりあえず4つのブロックで、上段白黒-下段黒白と作ったものをコピーして貼り付けていくとやりやすいです。

2009031904.gifここで先に黒色を透明にしておきます。
赤色は、色が抜けたかどうか確認しやすいように、下に赤色の塗り潰しレイヤーを持ってきました。
最終的にはこの赤色レイヤーは削除します。

「マジック消しゴム」で黒色部分をクリックすると黒色だけが消えます。
白色部分以外(この場合、下の赤色レイヤーが見えている部分)が透明になるわけです。

2009031905.gif
  このブロックをコピーして貼り付けていきます。
  そんなに大きくなくても大丈夫です。

  適当な大きさになると、きれいに切り取ります。
  この場合、切り取るのは白色部分です。

続いて保存しますが、赤色レイヤーは不要ですので、削除しておきます。
保存する場合「.gif」で、透明部分も保存されるようにします。

このgif画像を背景に持ってくると、ちょうど網掛けされたような状態になるわけです。

色(ここでは白色)やドットの大きさを変えたり、透明部分の位置を変えてみるとまたおもしろいスクリーンができるかもしれません(#^.^#)


作るのが面倒くさい方はこちらからお持ち帰りください。

ただし、クリックしても何も表示されていないようにしか見えないと思いますが、ブラウザの左上の方で右クリックしていただければ、「画像に名前をつけて保存」が出てきます。
画像のないところで右クリックしても「画像を保存」は表示されませんので、よくわからない時はいろんな場所で右クリックしてみてくださいね( *^艸^)




関連記事

Tag:テンプレート Photoshop

12 Comments

ボギパパ  

No title

ですね。特に写真ブログをやっていると、自分のモニターではピッタリ納まっているけど
他の人はどうだろうかと気になります。
時々大きな写真をアップしてあるサイトで、写真が半分隠れていたり見えないブログに出会います。
また、お気に入りを常時出している方(大きさ)などにも左右されますから、余計気にかかります。
写真ブログは、シンプルがいいです。写真ブログに特化したテンプレートが欲しいです。

2009/03/19 (Thu) 19:22 | EDIT | REPLY |   

かりん  

No title

れんさんいつもながらすごいです!
賢い方ってこうなんだ~と今回も痛切に感じました(^-^;
ボヤッと暮らしてる私とは
目の付け所が違いすぎて・・・e-350

でも本当にPCによって全然違って見えますよね。
わかってはいるんだけどカスタマイズってことが全くできないので
そのまま私は使うしかないのが悲しいです・・・e-445

れんさんのところで これからいっぱい勉強させてくださいねm(__)m

2009/03/19 (Thu) 20:45 | EDIT | REPLY |   

みるぼ  

凄い!

この可愛いテンプレにそんな凄いテクニックが∑e-451
各環境による違いって、私も気になるのです~っ
しかし気になるだけでそのまんま…アハハ…^□^;ゞ

れんさん二日に分けましょう!
遊園地→お昼バイキング☆&遊園地→夜の餃子大会♪
タップリ遊び、タップリ食べるにはこのプランがいいのでは☆ギラン☆
と勝手に行く気満々です~ワハハ!e-446
あぁ…妄想が広がります…e-349e-349

2009/03/20 (Fri) 14:01 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009/03/20 (Fri) 14:15 | REPLY |   

れん  

ボギパパ様

こんばんは~。
返信遅くなり申し訳ありません。

やっぱりPC環境が違うと表示のされ方が違うようで、自分の環境しか確認できないので誰かから見たら不具合に見えるものもありますよね。

実は…新しくカスタマイズしたテンプレートではIE6.0ではサイドバーがカラム落ちしてしまい、きちんと表示されていませんでした。
で、またまた以前のものに戻したのですが…。

私が確認していたのはディスプレイ解像度の違いによる表示のされ方、IE7.0(8.0)、FireFox、Opera、Slepnir、GoogleChrome、Safariとブラウザによる表示の違いだけで、IE6.0とかの古いバージョンでのチェックはしてませんでした。
まだまだ6.0のブラウザのままの方も多いですから、今後はその辺も含めて確認してみたいと思います。

FC2ではマウスを持って行くだけで画像が表示される…というプラグインがあったと思いますが、それを使っている方のブログで写真を見ると、写真の下半分が切れてしまっていて、写真も動かせなくて残念に思ったことがあります。
自分のブラウザできちんと表示できていれば、ついついみんなにきちんと表示されていると思ってしまいますものね。

写真ブログだと…結局のところシンプルなのが一番…なのかしら…。

今回はよい勉強になりました。

2009/03/20 (Fri) 22:32 | EDIT | REPLY |   

れん  

かりん様

お返事が遅くなり申し訳ありませんm(__)m

まだまだ甘かったです!
IE6.0だとこんなに崩れてしまうとは思っていませんでした…。
結局元のテンプレートに戻してしまいました…。

カスタマイズも楽しいんですよ~。
自分で画像を作って使ってみたり、いろんな部分を自分の好みにしてみたり…。
この桜のテンプレートも、ほとんどオリジナル作者さんの面影は残っていないくらい触り回っています。
このお方のテンプレートが一番、私のタイプであり、触りやすいテンプレートなんです♪

触っているといろんなこともわかってくるし、わからないところは今回のように検索で調べているとおもしろい発見もあるし♪

ホント、楽しいです♪

2009/03/20 (Fri) 22:44 | EDIT | REPLY |   

れん  

みるぼ様

こんばんは~。

いやいや~…
まだまだ青かった!!
IE6.0と7.0にそんなに違いがあるとは考えもしませんでした。
よい勉強になりました♪

>れんさん二日に分けましょう!
(≧▽≦)あはは!
それ、いい案です!
1日じゃちょっとしんどいものね!
胃がっ!

お昼にバイキング、夜に餃子大会…。
どちらかを辛抱しなければならなくなるから、どちらも満足するには2日に分けるのが一番ですっ!

2009/03/20 (Fri) 22:55 | EDIT | REPLY |   

れん  

鍵コメ様

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

お陰で一つ賢くなりました!
いろんなブラウザチェックができるサイトがありましたので、今後はブラウザのバージョンを含めて確認したいと思います。

とりあえず、元のテンプレートに戻しちゃいました(^^ゞ
新しくこのテンプレートを使って、不具合が出たテンプレートと同じデザインで組み直していたのですが、テンプレート作者さんが違うので、いろいろと触りまくってたら、途中で訳がわからなくなったので今日は終了!
気が向いたらまたがんばってみます。
あと少しで完了だとは思うんですけどね…。

本当にありがとうございましたm(__)m

2009/03/20 (Fri) 22:58 | EDIT | REPLY |   

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009/03/21 (Sat) 12:59 | REPLY |   

ジーノ  

こんばんは^^

う~ん、だんだんついて行けなくなってきましたねe-443
まあ、ついて行こうとしてたことがすでに愚かだったかもe-350

個人的にはこちらのテンプレ大好きです。
自分のイメージに近いので(^^)v

2009/03/21 (Sat) 19:56 | REPLY |   

れん  

鍵コメ 2009.03.21(土) 12:59 様

いつもありがとうございますm(__)m
CSSの件はもっと勉強してみたいと思います。
またCSSのよい情報がありましたら教えてくださいね~。

でもね……
結局手っ取り早く、いつものテンプレート作者さんのカスタマイズですんでしまいそうですけど…( *^艸^)

で、今日も(日付が変わってから)テンプレートのカスタマイズに励んでいたら、自己カウントは増えちゃうわ、記事の更新はできないわ…。
コメントの返信すら遅くなっちゃいました…(^^ゞ

2009/03/22 (Sun) 02:35 | EDIT | REPLY |   

れん  

ジーノ様

またまたテンプレート変えちゃいました!

前のテンプレートが大好きと言っていただいて、ものすご~くうれしいです♪

ジーノさんも早くイメージされてるテンプレートを作ってくださいね!
もうこんなことやってると(カスタマイズ)、時間が経つのが速くて速くて…。
もうあと1時間半もしないうちに起きなくちゃいけないので、このまま寝ないで遊んでようかな~( *^艸^)

ジーノさん、あっそびっましょ♪

2009/03/22 (Sun) 02:39 | EDIT | REPLY |   

Post a comment