やはりと言うか、IE6では表示が崩れまくっていた

新しいサイトは、主にIE7とFireFox2で見栄えが良くなるようにデザインを行っていました。
ブログのテンプレートを変更する経験はかなりの回数になるし、以前IE6とFireFoxで確認しながらデザインしてた時に比べれば格段のスピードで完成。。。。

と思ったら、IE6ではやっぱりデザインが崩れる事を本日発見(´Д｀；)

以前紹介した、「様々なブラウザでサイトがどのように表示されるか確認できるサービス」
Testyourweb design in different browsersは、全然アテになりませんでした。
上記サイトで確認してもIE6でキチンと表示されてました。。。

厳密にチェックしたい時は、IE6がインストールされたマシンで閲覧しなければダメですね

IE6とIE7、FireFoxでの表示の違いの修正のやり方

さすがに何度もブログデザインを変更して遊んでいると、こういう知識は身に付くもので、今回はさほど苦労なくIE6、IE7、FireFoxでのデザイン統一に成功。やり方は以下

  1. IE6のバグを利用したcssハックを用いてデザインを調整
    IE6でデザインが崩れる主な理由は、widthで指定した幅、その周りに空白を作るためのPadding（内側）、margin（外側）の数値のカウントの仕方が他のブラウザと異なる為です。
  2. IE6だけは、何故か「padding」を「_ padding」、「margin」を「_ margin」とアンダースコア付きにしてもスタイルシートの構文として正しく解釈してくれるので、
    #div topmenu {
    width: 808px; /* IE7、FireFox等々、一般ブラウザ用 */
    _width: 820px; /*IE6用に、直後に別の数値を指定して調整*/
     margin-left:10px;
     _margin-left:200px; /* 同様にIE6専用 */
    ｝
    てな具合にIE7やFireFoxで表示したい数値を設定したすぐ後ろにIE6用の指定をアンダースコア付きで書いてやります。
    他にも様々な方法がありますが、これが一番簡単です。
    表示が崩れる原因となるタグだけにアンダースコアをつけて後から微調整すれば、そんなに時間はかかりません。
  3. これで十分正しく表示されます。が、、、、
    このままではスタイルシートの構文としては正しくない ので、W3C CSS Validatorサービスなどでチェックすると文法エラーが出てしまいます。
    気にならない人はこれで全然OKです。
    気になる人は、上記の変更内容を正しい文法に書き換える作業が必要になります。
  4. 私のとった方法は以下。IEに独自採用されているコメントアウウト部分を読み込ませる機能を利用しました

    <!--[if lte IE 6 ]>
    この部分はIE6だけで有効になる
    <![endif]-->

    これを利用して

    <link rel="stylesheet" href="<$MTBlogURL$>style.css" type="text/css" /> /* 本来のcss */
    <!--[if lte IE 6 ]>
    <link rel="stylesheet" href="<$MTBlogURL$>ie6.css" type="text/css" /> /* IE6で読ませるcss */
    <![endif]-->

    <!--[if lte IE 6 ]>～～～～<![endif]-->で挟むと、その間にあるタグはIE6のみで読み込む機能を利用して、先にcssハックで調整した部分のみを後からIE6専用に読み込んでやればOKです。
    ちなみに今回の例の場合「ie6.css」に書き込む内容は
    #div topmenu {
    width: 820px;
    margin-left:200px; 
    ｝
    だけでOKなります。これでIE6でも正しく表示され、W3C CSS Validatorでもエラーは出なくなります。

FireFox2とFireFox3でも表示は微妙に違っていた。

微々たる違いで、修正に時間を取るほどでもありませんでしたが、今回のデザインでFireFox2と3でも表示に違いが出る事が判明。

具体的に書くと、float: left（or right）;、display: inline;あたりの判定がFireFox2やIE7に比べてFireFox3は厳しいみたいで、FireFox3でのみサイドバー落ちする現象が発生していました。

幸い位置固定が可能な部分だったのでposition: absolute;top: XXXpx;width: XXXpx;で対処。

拡張子htmlのままphpを有効にする

現在新しいブログはphpで構築を行っているが、拡張子をhtmlのままphp化しようと決心しました。理由は、もう一つの3DCGブログをアドレス変更や.htaccessにこまごまとリダイレクト設定を書き込まずに引っ越ししたいため。

さくらインターネットのレンタルサーバでは、その指定が少し難しく、普通に検索して得られる方法では上手く行かなかったので、少し迷いましたが、以下のサイトで解り易く説明してありました。
小粋空間: PHP化 アーカイブ
さくらブログの場合、

  1. /usr/local/bin/php を自ブログのディレクトリ（例えば/hogehoge）に、php.cgi という名前でコピー
  2. （/hogehoge内に置く）.htaccess に下記の設定を記述。
    AddHandler myphp-script .html
    Action myphp-script /hogehoge/php.cgi
    （自身のレンタルサーバのルートディレクトリにphp.cgi、.htaccessを置く場合、/hogehogeは不要）

で上手く行きます。
「/usr/local/bin/php」はFTPでログインして、ディレクトリをどんどん上層に登っていくとusrにたどり着きます。
「/usr/local/php-4.4.7/bin/」なんて所にもphpファイルはありますが、5MBとか13MBとか、巨大なモノではありません。「/usr/local/bin/php」4～5KBの小さいファイルです。（サーバーによりチョット異なる模様）
参考：cgiとphp < Wiki | さくらのレンタルサーバ非公式FAQ

ちょっと手間取りました

本日から本格的に記事移転を行おうと思っていましたが、上記で手間取ってタイムアウト。

でも明日から記事の移転作業に移れそうです（＾_＾