WordPress

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]とコメントアウトされている部分があると思いますので、そこに一行追加します。 修正前

[html]
<!–[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]–>
[/html]

修正後

[html]
<!–[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/css3-mediaqueries.js" type="text/javascript"></script>
<![endif]–>
[/html]

一行増えましたよね? これで大丈夫だと思います。

Twenty TwelveがIEでレイアウトが崩れてしまう原因

単純に書くとTwenty Twelveはレスポンシブデザインを実現するために、CSSを上からモバイル→タブレット→PCという順番にメディアクエという方法で書いていて、IE8以下(互換モードなら大丈夫?)ではそのメディアクエリというのに対応していないので、中途半端なレイアウトになって崩れてしまうケースがあるということです。 その対策、方法として上記に記載してのはIEで対応するJavascriptファイルを読み込んでいるということです。 Googleが推奨している方法らしいので、SEO的にも大丈夫だと思うので。 同じようなJavascriptでRespond.jsというのもあるのですが、使っていないのでわかりませんが、Javascriptは下手に使うとアレなので、上記方法がオススメです。

コメントを残す