Mar,26 2012 編集後記2012年3月
人生色々でちょっと海から遠のいていたけど、その間波乗りしない分時間ができたのでなんとなくあったこのサイトの違和感について考えた。
そこで今回改変というか、何をどうしたかったか 。
極力画面を使い切りたい、写真等は大きなサイズで。昨夏のモノクロ・文字と線のみのフレームワークは、コンテンツを際立たせるためと考えてのものだったが、サイト全体としての訴求効果、要は雰囲気・色ってやつを表に出したい、そう考えた。だが、古い写真は現在の高解像度のディスプレイに対応できるほど大きなサイズのものはない。古い画像を最大限やりたいものに合わせるには画質・解像度・サイズと全ての点で大きく足らないし、過去分のエントリーを全部改変するのは労力的にも厳しい。
それでも極力理想を追求し、画像を背景として使い前面にテキストを配置するもの、それも画像のアスペクト比を維持したままにというデザイン的な欲求からCSS3は必須、positionやz-index等々の指定からどこまで古いブラウザに対応するかとなるのだが、海外と違ってIEのシェアが高い日本、オフィスでのネットちら見にまで対応となるとIE6までのカバーが必要とも考えた。
技術的にどうしてもposition:fixed;とpngfix透過画像の扱いとz-index指定やリンクを貼ることに、エンジンとなるMovableTypeのテンプレ作成・投稿といった所作を絡めると、IE6で一部非表示・アスペクト比の崩れ・png透過画像の不透過、IE7/8で背景画像のアスペクト比の崩れは避けられなかった。
これはbackground-sizeプロパティの効かないブラウザでは小さい画像を拡大し背景とすることが出来ないからCSSハックで擬似対応した上での結果で、MoziraやOpera・safariでもCSS3未対応のもでは同様だがIEと違い古いバージョンのユーザーが微小なのでIEのみ擬似的に表示されるように作成した。
html5についてはIEへの対応を考えると、htcファイル等対応策によるhtmlの重量化からパス。そもそもIE6のPCなんざパフォーマンスが低いからhtml5で動く仕様の重量にhtcなんて重くてシャレなりません。
動画(You Tube)も背景にとか背景以外は前面にとか色々、ディスプレイを大きく使うをテーマに、個人的な奢侈ですが楚となるデザインは現行から引継いでこんな形になりました。
まだ少し改善したい点などあるのでおいおいやっていきますが、所詮個人サイトなんで少々の不備は目をつぶっていただきます。
・IE6・7・8他のCSS3に対応していないブラウザでは擬似背景として背景画像を表示させているページがありますが、その場合アスペクト比が崩れて表示されます(CSS3未対応のopera・safari・firefoxはカバーしていませんので、背景画像の全画面表示がなされず、画像のオリジナルサイズで背景に置かれます)。擬似背景を使用していないページでは前述ブラウザでは画像原寸で表示されますので背景が見切れて表示されます→background-sizeプロパティ。
・IE6では透過画像の透過部分が青っぽいグレーで塗りつぶされます。
・IE5.5以下やNNは最初から対応してません(もう使っている人いないと思います)が、W3C Validで作成していますので、W3C標準準拠のブラウザで、javascriptがONであればコンテンツは正しく表示されると思います(IE6でもコンテンツの表示はされます)。
(Notice!より抜粋)
追記:4/9
いや、波乗りもしないでって、自分でもやべぇって思うけど、何せ休みの日波悪い(南西の強風)日が多い。まぁ、坐骨神経痛も治り切らないから無理しないってところです。
で、見切りでアップして修正点はおいおいなんて書いたけど、この間に各カテゴリのトップページからは全てのコンテンツが読めないと、ユーザビリティの悪さを言われたのでページングのナビを付けた。これはおいおい改変するけど、それにはチョット時間がかかるので暫定という形で。
当初から直したかったのがYouTubeを背景にしたコンテンツで、動くし音出るし重たいが、背景故コントロールが効かないという難点があった。
・背景故自動再生・ループ再生
・背景故デフォルトのコントロールがあっても仕様上使えない、だが、一時停止・再生・停止の外部コントロールを可能にしたい。
・ページに飛んでロードすればいきなり音が出てしまうわけだが、ボリュームコントロールとミュートを可能にしたい。
・100%指定してもアスペクト比が維持されるのでよほどでないとどこか余白が出るが、背景なのでクロムレスプレーヤーにしたい。
と、これだけの要望があったのだがそもそもswfObectを殆ど弄った事の無い身にはかなりの難題で、散々ググって試行錯誤してようやく難題を片付けた。
後はかなり手間かかりそうだが、ページングの問題だが...YouTubeのページをW3C validにするのに夜までかかった。