IE6にだけ別のCSSを読ませる方法

ココのテンプレートではありませんが、最近作った別のブログのCSSにハマったおハナシ。ブログなどやってないカタはスルーして頂いてOKな内容です。

ブラウザによるCSS解釈の違い

FC2ブログをご利用のカタならご存知のように、FC2ブログはテンプレートのHTMLおよびCSS（スタイルシート）の弄れる範囲が広く（っと言うかほとんど自由）、それゆえブログのレイアウトやデザインにおいて色々なカスタマイズが出来るのが魅力の一つなのですが、注意しなければならないのがブラウザによるCSSの解釈の違い。

レイアウトは崩れていませんか？

CSSでレイアウトをしていると、同じCSSでも、あるブラウザではキチンと表示されているのに、別のブラウザだとグチャグチャにレイアウトが崩れてしまってまともに見れないと言うのはありがちなハナシ。特にIE6（インターネットエクスプローラー6）のバグによるCSSの解釈の違いは有名らしく、IE6でのみしかご自分のサイトの表示をみたコトのないカタは要注意。

IE6のバグと、その回避方法については下記を参考に。
■CSSレイアウトの定石　WinIE6バグ回避法

各種ブラウザでの表示確認には下記が便利。
■Test your web design in different browsers
※確認したいブラウザにチェックを入れ、URLを記入してボタンをクリックし、その後表示されるページをひとまずブックマークに保存。数時間後にブックマークしたページにアクセスすると各種ブラウザでのスクリーンキャプチャが表示されます（かなり時間がかかるので、1日後とかにアクセスするのが吉）。
※尚、外国のアレですのでブラウザによっては日本語に対応しておらず文字化けしているコトがありますが、レイアウトの部分などは見れるので問題にならないかと。

崩れてました

オイラは普段IEではなくてファイアーフォックスと言うブラウザを使っているのですが、今回一通りの作業を終えてIE6で確認したら一部の表示がおかしいなコトに（泣）。こう言ったCSSの解釈の違いを回避する手段もあるようなので、幾つか試してみるも直らず（号泣）。

シェアがデカイIE6が曲者

他のブラウザでは大体同じような表示なのにIE6とそれ以下のバージョンがいかんともしがたい。今現在、恐らくIE6なカタが一番多いので、IE6での表示をまともにしておいて修正作業をするのも手ですが、それ以外のブラウザではNGってコトに。多数あるブラウザの1つでしかないIE6であり、また他と違うので無視したいトコロだけど、使っているカタが多いだけに厄介だ・・・

とりあえずの対策としてIE6は特別扱い

スマートな解決法ではないけど、確かブラウザによって違うCSSを読み込ませるコトが出来たハズなので、今回はIE6にだけ別のCSSを読み込ませようという方向でひとまず対策。

以前に見たのはJavaScriptなんかを使っていたように思ったけども、調べてみたらHTMLへの簡単な記述のみでブラウザへ読み込ませるCSSの指定が可能である模様。試してみたトコロFC2ブログでも問題無く使えるので忘れぬようにメモなエントリ。（って訳でココからが本題。前置きなげぇ～）

IEに専用CSSを読み込ませる方法

そんな訳でIE用にCSSを用意してソレを読み込ませるための記述が以下。

IE用CSSの指定方法：Stylesheet Stylebookより

すべてのIEに対して（IE5, IE5.5, IE6）

<!--[if IE]>

  <link rel="stylesheet" type="text/css" href="ie-all.css" />

<![endif]-->

IE5.0に対して

<!--[if IE 5.0]>

  <link rel="stylesheet" type="text/css" href="ie-50.css" />

<![endif]-->

IE5.5に対して

<!--[if IE 5.5]>

  <link rel="stylesheet" type="text/css" href="ie-55.css" />

<![endif]-->

IE6.0に対して

<!--[if IE 6]>

  <link rel="stylesheet" type="text/css" href="ie.6.css" />

<![endif]-->

たったコレだけの記述でOK。別途、読み込ませるCSSを用意してソレを指定するだけ（赤字部にて）。

FC2ブログでコレやる方法

FC2ブログでコレをやるにはメモ帳とかで専用のCSSを作ってアップし、ソレを指定しても良いけど、その他にテンプレートの管理（管理画面にログイン→テンプレートの設定）をするトコロで、テンプレートを2つ用意すればOK（HTML部分は同じで、CSSの部分を変えておく）。

で、記述するのはHTML部分の上の方で、具体的には

<head>～</head>

の間に記述されている部分。

元々の記述はコンナ感じ↓（実際には<head>～</head>に、他にも色々書いてある）

<head>

<link href="<%css_link>" type="text/css" rel="stylesheet" />

</head>

上記部分の下に、IEに別のCSSを読ませる記述をする。

<link href="<%css_link>" type="text/css" rel="stylesheet" />

で、テンプレートの編集画面では上記のようになってる訳だけども、赤文字のトコロはFC2ブログの独自な記述なので、実際にブラウザが読み込む時には下記のように、

<link href="http://○○○.blogXXX.fc2.com/
template/■■■/style.css" type="text/css" rel="stylesheet" />

っとなっていて、赤文字が読み込ませているCSSのURLとなる（○○○とXXXの部分はご自分のブログURLを見て下さい。■■■の部分はテンプレート管理画面の「テンプレート名/プレビュー」欄に羅列されているテンプレート名が入る）。

そんな訳で、上記URLのように用意した別のテンプレートを指定してやって、IE6に別のテンプレを読ませるならば下記のようにすればOK。

<head>

<link href="<%css_link>" type="text/css" rel="stylesheet" />

<!--[if IE 6]>

<link href="http://○○○.blogXXX.fc2.com/
template/■■■/style.css" type="text/css" rel="stylesheet" />

<![endif]-->

</head>