WordPressのTwenty TwelveをIE(Internet Explorer)で見るとレイアウトが崩れる簡単な対策

インターネットエクスプローラー

WordPressのTwenty TwelveをIE(Internet Explorer)で見るとレイアウトが崩れる簡単な対策を紹介します。 Twenty TwelveはWordPressの公式Themeで、レスポンシブデザインに対応しており、Twenty Twelveテーマを設定するだけでスマートフォンやタブレットにも対応してくれる優れたテーマです。 ですが、IE(Internet Explorer)8以下(?)で見たときにレイアウトが崩れてしまうケースがあります。 その簡単な対策です。

目次

Twenty TwelveをIEに対応させる簡単な対策

結論からお伝えするとステップとしては3つです。

  1. 「css3-mediaqueries.js」をダウンロードする
  2. 「css3-mediaqueries.js」をサーバにアップロードする
  3. header.phpで「css3-mediaqueries.js」を読み込む

まずは、css3-mediaqueries.jsをダウンロードします。以下のURLからダウンロードできます。 https://code.google.com/p/css3-mediaqueries-js/ 次に「css3-mediaqueries.js」をアップロードします。アップロードする場所は、Twenty Twelveテーマ内のjsフォルダです。アップロードの方法はFTPとかで適当に。管理画面からは無理だと思います。。。 最後に「css3-mediaqueries.js」を読み込みます。 header.phpの28行目あたりに[if lt IE 9]とコメントアウトされている部分があると思いますので、そこに一行追加します。 修正前