スポンサーリンク
BloggerブログにてIE表示でもレイアウトがくずれない様にする方法
zenbackのファビコンと記事がIE表示だとズレてしまうのをずっと気になっていました。
なんとかならないものかと調べてみました。
ありました！！
修正する前の表示状態。
 |
| 修正する前表示状態 |
上記の様にzenbackのファビコンと記事がずれている状態です。
そこで、
検索して、
対処方法がありました。
他のBloggerブログの方も試行錯誤していたみたいです。
＜参考サイト＞IE8のレンダリングモードに関するまとめ – SummerWind
このようにバージョン番号を指定することで、レンダリングに用いるモードをページ側が指定することができます。また「IE=edge」という値を用いると最新のレンダリングモードが選択されます。なお、複数のモー ...
IE8以降のバージョンでレンダリングモードをmeta要素で指定する時のまとめ | MJ-WAVE.COM
以前何かの案件でIE8での表示がIE7チックになってるって事があったので、meta要素を追加して難を逃れたわけですが、このmeta要素の記述について詳しく調べていなかったので、自分なりにまとめてみまし ...
Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも | クリボウの Blogger Tips
IE 互換モードの複数指定 BloggerのテンプレートのIE=EmulateIE7の対応について 【IE9】 | 某氏のたわごと NEXT で、IE 7 互換モードのタグを次のように変更する Ti ...
IE9 Blogger・Adsense・zenback の相性問題 解決編 - Jkun Blog
IE9 Blogger・Adsense・zenback の相性問題 : Jkun Blogの解決編… この問題に関して、とりあえず解決したのでメモしておく。 対処方法は以下の通り ...
[blogger]IE互換表示タグについての泣き言1つ。 - Sunabox
bloggerでは、標準で用意されているテンプレートがいくつかありますが、確認した限りでは、全てのテンプレートHTMLに BloggerのテンプレートのIE=EmulateIE7の対応について 【IE9】
IE9からサポートされた（HTML5やCSS3）を使う場合に、この設定だと困る場合があります。で、この部分を消せばよいかというと、消すと明らかにIE8での表示の時におかしくなるものも中には存在します。 ...
ということで、
＜解決法＞
上記参考サイトにて様々な内容を拝見させて頂きましたが、
metaタグによる指定で解決できる模様です。
<meta content='IE=EmulateIE7; IE=EmulateIE9' http-equiv='X-UA-Compatible'/>
上記は、IE9までの対応方法。
以下は、最近IE10が出て来ましたのでIE10にての対応方法。
<meta content='IE=EmulateIE7; IE=EmulateIE9; IE=EmulateIE10' http-equiv='X-UA-Compatible'/>
しかし、
このようにバージョン番号を指定することで、レンダリングに用いるモードをページ側が指定することができます。また「IE=edge」という値を用いると最新のレンダリングモードが選択されます。なお、複数のモードを同時に選択した場合は新しい方のレンダリングモードが採用されるようです。
との事。
なので、
わざわざIEのバージョン指定をしなくても、
『IE=edge』にて、
常に最新バージョンのIEにてのレンダリングモードが指定可能なようです。
具体的に、どう記入するかというと、
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Bloggerブログでは、
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
また追加でIEのプラグインでChrome Frameというものがありますが、そのChrome Frameのレンダリングモードを使用する場合は、
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
Bloggerブログにては、
<meta content='IE=Edge, chrome=1' http-equiv='X-UA-Compatible'/>
のmetaタグを挿入すると
プラグインのレンダリングモードを使用できます。そうするとどうなるかというと、簡単に言えばIE6がChromeになり、HTML5やCSS3も使えるようになります。
Googleは上記プラグインのインストールを促す公式のJavaScriptを提供しているので、全ての旧IEに入るようにアナウンスしちゃうのもアリですかね。
のようです。
実際、私のBloggerブログにては、
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
を挿入した後の表示画面は、
 |
| metaタグでIE=edge挿入後 |
綺麗にレイアウトが表示されました。
これから、IE10も多くのユーザーがupdateする中で、
常に最新のバージョンのIEのレンダリングモードでの表示が可能な
IE=edgeタグを用いたmetaタグを挿入しておくと良いと思います。
コメント