2008.08.31.

ivy

screenshot Theme Name: ivy (BETA) version: 0.01
固定幅、3コラム、ウィジェット対応。

WordPress 用のフリーテーマです。まだ、テストバージョンです。お気づきの点がございましたら、指摘していただけるとありがたいです。
MacのFirefox をメインに、Safari、Opera、WindowsのFirefox、Safari、IE6、IE7 で表示テストをしています。IEに関しては、一部透過している影が付かないとか、丸めたコーナーが四角いままなど細かいデザインが変わっていますが、基本的には大きく表示が崩れない程度にはなっています。IE5.5 以下および Mac 版 IE は、対象外です。Safari でもコメント欄で一部表示が崩れているところがあります。

2008.08.10.

なるべくならIE用のHackは使いたくない

「IEの条件付きコメント」は、ウェブサイトを作る場合のとっても便利なIE対策です。
IE以外のブラウザは、まぁまぁWeb標準に準拠しているのでそれほど困りませんが、IE6とかIE7は使っている人も多いだけにCSSをまともに解釈してくれないのは、大変もどかしい。

今まで、Hackといわれる様々な方法で、IEだけではなく特定のブラウザのみCSSを適応させたり、除外させたりしてきました。呪文のような文字の羅列で、後から何のために書いたのかわからなくなることもしばしば(私だけ?)
そんなとき、「CSS Hackを使わずにIEのバグに対処する方法」という記事を読みました。
「IEの条件付きコメント」というのを使うとスマートに解決できそうです。よけいなHackを使わなくても「条件付きコメント」で、たとえばIE6の場合だけ専用のCSSを読み込ませて、IE6のみ別の表示をさせることが出来ます。
ソースも見やすくなるし、便利。
さっそくWordPressのテーマの中で使ってみました。
具体的には、まずIE6専用のスタイルシート(例えばie6.css)をstyle.cssと同じフォルダに入れておきます。次にheader.phpのheadの中で標準のstyle.cssを読み込んだその後の行に

HTML<!--[if lte IE 6 ]>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_directory’); ?>/ie6.css” type=”text/css” media=”screen” />
<![endif]–>

というのを書き込みます。これでIE6とIE5の場合は、 style.cssの後に専用のie6.cssを読み込んでくれます。
「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応」という記事で書いた「IE7.js」をgoogleコードへ読みに行くコードもこの「条件付きコメント」でIE7未満のバージョンの場合にのみ読み込むという使い方をしています。
こういう便利な方法があったんですね。

2008.08.09.

「IE7.js」で IE6 でも透過 PNG、疑似クラス :hover に対応

「IE7.js」、「IE8.js」は、IE6 で対応していなかった透過 PNG、疑似クラス :hover、マージン:auto、min-、max-などなどが表示できるようになるという javascript です。
googleコードから直接読み込めるので、「Google Code」のページにある「IE7.js」または「IE8.js」のコードをコピーして<head>内に埋め込むだけ。簡単です。
「IE7.js」は、IE5と6用。「IE8.js」は、IE5から7まで。標準的な XHTM/CSSの 解釈をしてくれるようになるはず。なるはず、というのはまだベータ版だから。
私のサイトでは、ページに少しだけ影を付けていたり、メニュー部分で :hover や min-width を使っていますが、IE6 表示用にそれぞれの要素に対して個別に対応しなければなりませんでした。これらが「IE7.js」を使うだけでまとめて解決できれば、ずいぶん楽ちん。さっそく入れてみたのでした。

「IE7.js」を使った結果。
:hover はうまく動作しています。IE6 でもドロップダウンメニューが動くようになりました。min-width はうまく働きませんでした。透過 PNG 自体はちゃんと表示されますが、リピート表示が出来ない仕様になっていました。影表示の透過 PNG は、縦方向にリピートさせているので意図した形にはなりませんでした。とりあえず、メニュー部分が崩れてしまうと大変読みにくくなるので :hover だけでもありがたいです。
「IE8.js」のほうは、疑似要素の:after、:before にも対応しています。でもその要素をマイナスのマージンを指定して親要素の枠に重ねたり外に出したりの移動が出来なくて、思った形には使えませんでした。この辺は細かいデザインの話なので、今まで通り出来なければ出来ないなりに個別に対応するしかないですね。

とりあえず最小限の対応ということで「IE7.js」を使うことにしました。