Cafi Netつながる情報技術
  1. トップ>
  2. 無料テンプレート>
  3. カスタマイズ1

無料テンプレートのカスタマイズ 1

最終更新日 2013/3/18

Internet Explorer 8 以下に HTML5 を認識させる方法です。

次ページでは、Internet Explorer 8 以下に Media Queries を認識させる方法を解説しております。このページと似た作業となりますので、まとめて作業を完了させたい方は、次ページの作業も一緒に行なってからアップロードして下さい。

Internet Explorer 9 の画面

Free Template 3 を例に解説します。

Internet Explorer 9 は HTML5 に対応しているので、HTML5 で制作したテンプレートを正常に表示できます。

Internet Explorer 8 の画面

しかし、Internet Explorer 8 以下は HTML5 に対応していないので、上の画像のように正常に表示することができません。

そこで、Internet Explorer 8 以下でも正常なデザインで表示させたい場合は、以下のカスタマイズを行なって下さい。

ステップ1「html5shiv をダウンロード」

html5shiv - HTML5 IE enabling script - Google Project Hosting へアクセスします。

download html5shiv (zip file) をクリックして、html5shiv をダウンロードします。

zip フォルダを展開(解凍)して、dist フォルダの html5shiv.js を右クリック/コピーします。

ステップ2「html5shiv.js を読み込む」

無料テンプレートのフォルダ

無料テンプレートのフォルダを開いて、右クリック/貼り付けします。

上の画像のように、html5shiv.js を貼り付けることができました。

コードを追加

index.html を開きます。

</head> の前を 1行開けて、以下のコードを貼り付けます。

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

他にも html ファイルがある場合は、全ての html ファイルに同じように貼り付けて下さい。

貼り付けてない html ファイルでは、html5shiv.js を使用出来ません。

上書き保存して、index.html を閉じます。

ステップ3「ファイルをアップロードして確認」

FTP ツールやファイルマネージャーを使用して、index.html と html5shiv.js をアップロードします。

Internet Explorer 8 で確認

上の画像のように、Internet Explorer 8 でも HTML5 を認識することができました。

シミュレーターでの確認となりますが、Internet Explorer 6 と Internet Explorer 7 でも、同じように HTML5 を認識することができました。