Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

FC2ブログでIE9の機能(HTML5やCSS3)を使う方法

  1. あ、管だ
  2. イラッ
  3. 原子力ほわんい…保安院からの説明では……
  4. イラッイラッ
  5. 管だけが頼り、プレッシャーカンファレンス

 IE9 - 2011年4月26日(火)午前0時よりIE9日本語版リリース

X-UA-Compatible : IE=EmulateIE7

 FC2ブログは昨年から、レスポンスヘッダでIE=EmulateIE7を指定しているため、そのままの状態では、IE9で閲覧してもIE9でサポートしているHTML5やCSS3などの機能を使うことができません

 IE9の機能を有効にするには使用しているテンプレートHTMLの <head> 直後に以下のコードを追加する必要があります。documentMode(ドキュメントモード)を9にします。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />

 テンプレートがXHTMLでない場合は閉じタグは不要です。

<meta http-equiv="X-UA-Compatible" content="IE=9">

 追加する場所はhead要素内ですが、他のstyleやlink要素などの前に入れないと、反映されないことがあるかもしれません。また、IE9を指定することで、利用しているテンプレートによってはデザインに影響がでる可能性があります。

FC2ブログにおけるIE8とIE9のモード別表示確認

» 各モードの表示サンプルページ

 IE9から対応した border-radius(角丸)
 IE8から対応した list-style-type の decimal-leading-zero(0付き番号) を例にあげます。

<ol id="FC2BLOGcontent">
 <li>あ</li>
 <li>い</li>
 <li>う</li>
</ol>
#FC2BLOGcontent {
 margin: 1em;
 padding: 1em 40px;
 background: #e6f6ff;
 border: 1px #bdd3df solid;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 list-style-type: decimal-leading-zero;
}
#FC2BLOGcontent li {
 list-style-type: decimal-leading-zero;
}
デフォルト(何も指定していない状態)

 HTTPレスポンスヘッダの X-UA-Compatible : IE=EmulateIE7 が適用されるため、IE8とIE9はEmulateIE7のレンダリングモードで表示されます。

閲覧表示モードradiuszero
IE 9IE7無効無効
IE 8IE7無効無効
IE=8
<meta http-equiv="X-UA-Compatible" content="IE=8" />

 IE8とIE9はIE8のレンダリングモードで表示されます。

閲覧表示モードradiuszero
IE9IE8無効有効
IE8IE8無効有効
IE=9
<meta http-equiv="X-UA-Compatible" content="IE=9" />

 IE8はIE9のモードを使用できないため、下位の IE8 のレンダリングモードで表示されます。
 IE9はIE9のレンダリングモードで表示されます。

閲覧表示モードradiuszero
IE9IE9有効有効
IE8IE8無効有効
IE=edge
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

 IE8はIE8における最新のレンダリングモード(IE8)で表示されます。
 IE9はIE9における最新のレンダリングモード(IE9)で表示されます。

閲覧表示モードradiuszero
IE9IE9有効有効
IE8IE8無効有効

 表示ブラウザにおける最新のレンダリングモードが適用され、IE10などがリリースされても対応できますが、最新バージョンではデザインが崩れたり、動作がおかしくなってしまう事態も想定されるので、少なくとも確認できる正式版のバージョンを指定するようにした方が無難かもしれません。

 今後のリリースにもよると思いますが、9以上の数値を指定しても、そのブラウザの最新のレンダリングモード(その数値に最も近いモード)で表示されます。

<meta http-equiv="X-UA-Compatible" content="IE=11" />

備考

 FC2がレスポンスヘッダの指定を外せば、テンプレートでIE9を指定する必要はありませんが、互換表示設定(マイクロソフト互換サイト一覧にfc2は含まれる)によって、自動的にIE9以外のdocumentModeが適用されてしまう可能性もあるため、IE8以降での閲覧を要求する場合は、テンプレートのmeta要素で指定する必要があります。

 documentModeの指定はIE8以降で有効です。ブラウザがIE7以下の場合(undefined)は特に影響はありません。

 ブラウザのツールバーに互換表示ボタンを表示させるためには、レスポンスヘッダやmeta要素からdocumentModeの指定を外す必要があります。

 FC2ブログリクエスト(要望)は、レスポンスヘッダでの描画モードの指定についてで出ています。公式テンプレートやプラグイン、FC2サービス提供のブログパーツなどで、IE7を指定しないと、正常に表示できないものもあるかもしれません。

関連記事
  1. comment
  2. うう 2012-08-31 03:41 No.1393 #-URL

    <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]-->
    <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]-->
    <!--[if IE 8]> <html class="no-js lt-ie9" lang="ja"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

    のようにmetaタグより前にドキュメントモードでの条件分岐を使用すると
    metaタグよりヘッダーのX-UA-Compatibleが優先されるのですね。
    不便だ…。

  3. bp43 2013-02-09 23:28 No.1755 #-URL

    InternetExplore9での、オンライン表示時のみの表示崩れ、こちらを参考に解決できました。ありがとうございます。

  4. hige 2015-01-20 17:51 No.4575 #GxAO5jdMURLhttp://blgid1974.blog13.fc2.com/

    ありがとうございます。
    このコメントの投稿時のIEはもう12です。
    私が使ってるテンプレが古いのでしょう。これを適用してIEでの表示がFFと同じになりました。

  5. hige 2015-01-21 11:20 No.4578 #GxAO5jdMURL

    IEは11の間違いでした。

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/695-ec06dbc6

  1. trackback
  2. fc2ブログでIEのCSS3が効かない件 - サニティノート

    これだ!! CSS3でスタイルシートを書いていて、box-shadowなんかがFirefoxでは適用されているのにIEで確認すると全然うんともすんとも効いていないorz いったい何が原因??!とジタバタしました 2012.10.22