ブラウザ毎の…というか「『IE』の表示のクセを攻略する」続きです。
「ブラウザ毎の表示のクセを攻略する-その1」では、“IE（特にver6）で表示したときの「レイアウト崩れ」解消の為の「CSSに追記・修正」するポイント（たった3つのケースだけですが…）”と、“IEで表示する時にはIE用のCSSを読み込ませる為にコンディショナルコメントを使う”てな事をざっくりと大ざっぱにご紹介しました。これで、終わるとまたお叱りを受けてしまいそうなので、もうちょっとだけご説明します。
IE6用のCSSを用意して、IEで閲覧時には「IE6用のCSS」を読み込ませる
例えば下記のような感じだとして話を進めます。
テンプレートの構成
/template
├ css（ディレクトリ）
│ ├ template.css
│ ├ その他のCSSファイル
│ ├ customize.css（あなたがカスタマイズしたCSS）
│ └ ie6only.css（新しく追加するCSS）
├ images（ディレクトリ）
├ index.php（テンプレート[編集]画面の“HTML編集”ボタンを押すと編集できるやつ）
└ その他※
※その他…「templateDetails.xml」「template_thumbnail.png」「params.ini」など。テンプレートによってはもっといろいろ入ってます。
IE6用のCSSを用意する。（今回は「ie6only.css」ってファイル名にしてみます。）
まずは、IE6用のCSSをテキストエディタなどで作成します。今回は「ie6only.css」ってファイル名にしてみます。IE6で表示される際の問題点がわかってれば、CSSを書きます。まだなら、とりあえず「空」でも良いですが、
/* CSS Document */
とでも書いておきますか!? できたら、/template/（使用するテンプレート）/css/ 内にFTPしておきます。
index.phpに<head>〜</head>内にコンディショナルコメントを追加する。
Joomla!のテンプレート管理>>（使用するテンプレート）>>で、「HTML編集」ボタンをポチっと押します。「テンプレートHTMLエディタ」画面になります。
<head>〜</head>内の適当な場所に下記を追記します。（※適当な場所と言っても、どこでも良いわけではなく、基本となるCSSを読む込む指定の「<link rel="stylesheet" href="/<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />」などよりは、下に書かなくちゃダメなり。とりあえず、「<link rel="stylesheet" href=〜〜〜/>」みたいなのがあれば、それらよりは下に書くって事で!）
<!--[if lte IE 6.0]>
<link rel="stylesheet" href="/<?php echo $tmpTools->templateurl(); ?>/css/ie6only.css" type="text/css" />
<![endif]-->
これで、IE6以下のバージョンのIEで閲覧すると「ie6only.css」が読み込まれるようになる…らしい。
IE6用のCSS「ie6only.css」に問題となりそうな部分の指定を書き加える。
｜
｜
｜
｜
この記事は「書きかけ」です。
| 次 > |
|---|
