livedoor
アフィリエイトは儲かんないってば2008年08月06日23:30
第２回livedoorブログデザインコンテストが開催されているのは知っていたのですが、夏バテか、ブログ疲れか、重い腰が上がらず、今回はスルーしようと思っていました。ですが、これと言ってする事も無いので、なんとなく、また参加してみることにしました。
今回は透過pngを使って、『曇り空』（前回のデザイン→cloud_blue）ではなく、『青い空』のデザインにでもしてみようかなと思って始めたまでは良かったのですが・・・。
＜当エントリのコンテンツ＞
１．青い空探し
２．ウインドウでハマる
３．透過pngでハマる
４．到着点
１．青い空探し
最近これでもかというくらい青い空ばかり見ていたような気もするのですが、いざ携帯で撮影してみようと思うと、何故か曇り空。
しょうがないので、ネットで無料素材を探してみることにしました。
ネットの無料素材は、無料と言いつつ、リンクを貼ったりしないといけなかったり、色々と細かい利用規約があったりして結構面倒くさかったりします。
たぶん、気軽に使える良い素材を見つけるのは大変だろうなあと思っていたら、あっさり見つかりました。
オガワナオキのフリー写真素材集
●使用条件:
「この素材を使う事で、誰かが笑顔になれること。」
あなたでも、あなた以外の誰でもいい。ほんのちょっとでも笑顔になれればそれでいいんです。
もしもこのサイトが誰かを笑顔にできるのならオレの著作権を守る事なんかよりずっと素敵な事だと思っています。
最近、使用条件が素敵だと感想を書いてくださる方が多くいらっしゃいます。とてもうれしく思っていますがそのように書いてくださる方に一言だけお伝えしたい事があるのです。
使用条件が素敵なんじゃない。オレが素敵なんだ。
・・・惚れた。
これは、是非この素材を使いたい。
そして、是非紹介したい。
そう思いました。
そういうわけで、あっさりすっきり、そして、さわやかに『青い空』は見つかったのでした。
２．ウインドウでハマる
青い空の写真素材は見つかったのですが、この素材を一番効果的に見せる方法ってどういう形だろうと考えました。
その結果、写真を背景画像として固定し、ウインドウの大きさにあわせて写真が伸び縮みしてくれるのが一番良いのではないかと思いました。
これが可能ならば、解像度が1024X768のモニタのブラウザのウインドウで見ようが、解像度1600X1200のモニタのウインドウで見ようが写真素材が同じような形で背景として表示されます。
背景画像が伸び縮みしない場合、解像度の大きいモニタで見られると、背景画像が切れてしまいます。
なんとか背景画像が伸び縮みしてくれるように試行錯誤してみました。
最初に考えたのは、bodyに背景画像を指定し、widthを指定すればいいんじゃね？という方法です。
下のようなCSSの設定にしたら、ウインドウサイズが変われば、それにあわせて背景画像の写真素材が伸び縮みしてくれるのでは？
body {
background: url(写真素材のURL) no-repeat;
background-attachment:fixed;
width:100%;
}
CSSを設定し、IE6で確認。
おお、思い通りに表示されているような気がする！
これはもう解決だろう！と思っていたのですが、素人の考えがあっさり通るほど世の中甘く無いようです。
恐る恐るFirefoxで確認したら、背景画像が表示されていない！！
たぶん、Firefoxの解釈では、Widthを100%とった後に背景画像を表示しているんじゃないかと思いました。全然違うかもしれませんが。
それより、問題は解決方法がわからないことです。
そういうわけで、この方法はあっさり挫折しました。
続いて試したのが、ネットで検索した方法です。
imgタグで背景画像をpotision:absoluteで表示して、styleでwidthとheightを100%に指定し、さらにz-indexを指定します。
そして、img以外の要素のz-indexをimgより上にして、imgの上に重ねて表示するという方法です。
この方法の場合、ブログのように縦長な構成のページの場合、背景画像よりもページが長くなってしまって画像が切れてしまいました。
また、画面をスクロールさせると画像が一緒にスクロールしてしまい、何がなんだかわからなくなって、挫折しました。
結局、背景画像をCSSで固定し、画像はある程度大きめにするという形で、あきらめて先に進む事にしました。
「高解像度のモニターで見ないでー」と祈りつつ。
３．透過pngでハマる
今回、透過pngを使ってみようと思ったのですが、透過pngに関しては記事も書いて、完全に理解していたので少し自信がありました。
書いてた記事→透過pngについての解説
*html #要素名 {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='背景画像', sizingMethod='scale');
}
透過pngを使う要素のCSSの下に、上のCSSを追加して行けばいいわけです。
楽勝です。
上のCSSを追加してIE6で確認すると、追加した要素の背景画像が透過pngに置き換わります。
・・・置き換わります、って置き換わってねえ！！
問題は二つありました。
ひとつは全く透過pngが表示されていない要素がある事。
もうひとつは、なんか変に表示されている透過pngがある事です。
わけがわからなくなってきたので、このテクニックを存分に使ったデザイン、ハネヒトヒラ【再アップ】をブログに適応してCSSの違いなどを確認してみました。
すると、height:1%;というCSSの違いがある事に気づきました。
*html #要素名 {
height:1%;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='背景画像', sizingMethod='scale');
}
どうやら、要素の高さが設定されていないと、このテクニックは使えないみたいです。
height:1%;をCSSに追加して、透過pngが表示されるようになりました。
もうひとつの問題は、透過pngがどのように表示されているかを理解していない事が原因だということがおぼろげながらわかってきました。
CSSで背景画像を設定する場合、background-positionで表示する位置を微妙に変えたり、背景画像をx方向やy方向に繰り返したりというような指定をする事が出来ます。
ですが、AlphaImageLoaderを使ったテクニックを使うと、『位置の指定』や『繰り返しの指定』は出来ません。
ひとつの画像を使いまわして位置をずらして表示するというような事も出来ないわけです。
そういうわけで、このテクニックを使うには、要素に対してぴったりとはまり込む大きさの背景画像を透過pngで用意する必要があるみたいです。
そういうことをなんとなく理解して、ぴったりとはまり込む画像を準備してやってみたところ、今度は要素の大きさが変わる場合が問題だということに気づきました。
例えば、ブログの記事ごとに透過pngで囲っている場合、エントリのタイトルがすんごく長くなってしまって数行に及ぶと、タイトル部分の要素の高さが変わってきます。
高さが変わっても、AlphaImageLoaderはぴったりとはめ込んで表示しようとするので、背景画像がおかしな表示になってしまいます。
うーん、『完全に理解している』とか『楽勝』とか思っていたら、実は全然理解が足りてなくて、実際にやってみると、色々難しいなあ。
それでも何とかぴったりはまり込む画像を作ったりして、まがいなりにもAlphaImageLoaderを使ったテクニックで、デザインが完成する直前までこぎつけました。
IE6で確認すると、透過pngを背景にした部分は綺麗な半透明で表示されています。
・・・と、ところが。
リ、リンクが、お、押せない！！
透過pngを背景にした要素内にあるリンクが片っ端から押せないのです！
『続きを読む』すら押せません。
マウスオーバー時の設定（a:hover）すら反応しません！！！！
PNG ちょっと裏技 (2)
アルファイメージローダーを使用した要素(タグ)の内側にハイパーリンクを使う場合
ブロック要素(例えばDIV)に対してアルファイメージローダーを使用すると、構造の内部(インライン)のハイパーリンクが押せなくなる(無効になる)場合が有ります。また、BODY要素(タグ)でも同様の現象が発生します。
うぎゃああ！完成を目前にして、↑に書いてある通りになってしまった！！
なんじゃぁぁぁあ、こりゃああああ！！
ハネヒトヒラ【再アップ】を適応しなおしてみると、このデザインではしっかりリンクが生きている。
自分のデザインと見比べてみましたが、違いがわかりませんでした。
結局、解決方法がわからず、ここまで来てAlphaImageLoaderのテクニックを使うのは、あきらめました。
４．到着点
結局、めぐり巡って、javascriptを使う事にしました。
私の実力では、今はこれが精一杯。
そういうわけで、デザイン【GAIA(ガイア)】 the 4th Generation Template+を参考にしながら、iepngfix.jsを各ページに読み込み、透過pngを使う要素のCSSの下に、下記の設定を追加して行きました。
*html #要素名 {
behavior: expression(IEPNGFIX.fix(this));
}
やってみたら、IE6であっさり透過pngが表示されました。
何だったのだろう。今までのハマリは。
結局、
ウインドウサイズにあわせて背景画像を使いたい → 挫折。
AlphaImageLoaderのテクニックを使いたい → 挫折。
挫折尽くしのまま、今回のデザインは完成となりました。
完成したデザイン → freedom_blue
一時的にこのテンプレートを適応してみています。
あんまり大きい解像度のモニターで見られると、困ります（笑）。
今回も、『言うは易し、行うは難し』というのをしみじみと感じました。
デザインのタイトルも「blue of freedom」が正しいような・・・。
なんか色々と間違っているような気もしますが、ウインドウや透過pngと格闘してとりあえず何とか出来上がった今回のデザインでした。
またコンテストがあったら、もう少しなんか考えて挑戦してみたいものです。
・ハネヒトヒラ【再アップ】
・【GAIA(ガイア)】 the 4th Generation Template+
参考にさせて頂いたデザインの作者さんに感謝。
そして、素材を使わせて頂いたオガワナオキさんに感謝。
『素敵なオレ』に乾杯。
この記事へのコメント
yama
2008年08月07日 01:30 |
お久しぶりです。
リンク先のブログではMasaを名乗ってますが、同一人物です。 オガワナオキさん、男前ですね。思わずコメントしちゃいました。コメントしてませんけどこちらの更新はもれなくチェックしています。これからも楽しみにしています。 |
|
afiliate
2008年08月07日 14:26
|
どおも〜yamaさま。更新いつもチェックしていただきありがとうございます。もうすこし中身の濃い内容をお届けできるよう頑張らねば（笑）。
ホント、オガワナオキさん、男前ですね。 思わず２つめのテンプレートを作ってしまいました。これからも素敵なサイトをサイトを続けて欲しいと思いました。 その男気、見習いたいものです。 |
ヒロ
2008年08月08日 17:48 |
第2回デザインコンテストに気がついておきながら、"商品"を見てやる気が出なかったなんて、口が裂けても言えません。
でも、心の師匠・afiliate様が参加されているなら、頑張らねばならぬと思いつつ、また盆休み明けに頑張るだけの気力があることを祈りつつ… ブログデザインの共有化で一番怖いことが、共有後にエラーを見つけてしまうことです。実は、前回のデザインにも、色々なケースを想定して制作したつもりが、バグは数箇所ありまして… 職業的に見つけると、すぐに直したいのですが、直すことも削除することもできず、デザインは恥をさらしながら公開され続けている放置プレイに耐えれそうにありません。 |
|
afiliate
2008年08月08日 18:46
|
どおも〜ヒロさま。心の師匠だなんて、照れますｗｗｗ
私もスルーするつもりだったのですが、やり始めたら止まらない（笑） ３つも拙いデザインを作っちゃいました。 http://blog.livedoor.com/shared_design/detail/374 http://blog.livedoor.com/shared_design/detail/381 http://blog.livedoor.com/shared_design/detail/383 確かに後でミスが見つかる事は多いですね。 ですが、それはまあ言い出したら切りが無いんですよね。完璧なデザインなんて無いと思いますよ。完璧なデザインを作るのは私には無理！！ミスを発見したら開き直って次のデザインに活かそうかと。 当サイト自体が放置プレイみたいなもんですし、放置プレイ大好き！今後も気が向いたらまた作ってみたいと思います。 ヒロさまも是非。レッツ放置プレイ（笑）。今回が無理だったら、第３回ででもまたお会いしましょー。 |
この記事へのトラックバック
1. グっとくる使用条件 [ メモリスト ] 2008年08月07日 05:12
アフィリエイトは儲かんないってばさんの第２回livedoorブログデザインコンテ
