> カスタマイズ >
Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも
Blogger ブログのテンプレートに標準的に入っているこのタグは、Internet Explorer（以下 IE） 8、IE 9、IE 10 でページを閲覧したときに、IE 7 で見た場合と同じように表示させるためのもの。
「IE 7 だと崩れなかったのに IE 8 以降ではレイアウトが崩れてしまう…」という場合には重宝する設定ですが、たいていはその逆で、HTML5 や CSS3 対応の新しいブラウザ向きに作られたテンプレートが、IE 7 互換モードでは正しく表示されなくなってしまいます。すでに Blogger 自体も Internet Explorer 7 のサポートを終了していますしね…。
だったらいっそのこと、この IE 7 互換モードのタグを削除してみてはどうだろう？と、このブログのテンプレートで試してみたのがこちら。
どちらも Windows 7、IE 9 で閲覧時のスクリーンショットです。左が標準で、右がタグ削除時。細かな違いですが、枠線のカーブや影が IE 7 互換モードでは無効になっていたのがわかると思います。
ということで、最新の IE、Chrome、Firefox で見比べたときに IE だけ表示が違う場合には、このタグを削除してみるといいかもしれません。影響が出るのは、IE 8、IE 9、IE 10 での閲覧時のみですし…。ぜひ一度お試しを。
ここまで書いてきて、こういう趣旨の記事をどこかで見たような…と探してみるとすぐに見つかりました。合わせてお読みください。
IE 互換モードの複数指定
で、IE 7 互換モードのタグを次のように変更する Tips が掲載されていました。
このタグを使うと、
更新情報：
スポンサードリンク：
お願い：
IE 互換モードの削除
IE10でさえbloggerのレイアウトがぶっこわれるからIEオワタなと思ってたら、bloggerのほうで全IEについてIE7相当の表示に変換するコードがあったみたい。rgba()が透過無しに変換されてる時点で気づいてましたしー;そうそう、クリボウも気になってたんです、このタグ。Blogger 管理画面「テンプレート ＞ HTML の編集」と進むと、
head 要素内の最初の方で出てきます。<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
Blogger ブログのテンプレートに標準的に入っているこのタグは、Internet Explorer（以下 IE） 8、IE 9、IE 10 でページを閲覧したときに、IE 7 で見た場合と同じように表示させるためのもの。
「IE 7 だと崩れなかったのに IE 8 以降ではレイアウトが崩れてしまう…」という場合には重宝する設定ですが、たいていはその逆で、HTML5 や CSS3 対応の新しいブラウザ向きに作られたテンプレートが、IE 7 互換モードでは正しく表示されなくなってしまいます。すでに Blogger 自体も Internet Explorer 7 のサポートを終了していますしね…。
だったらいっそのこと、この IE 7 互換モードのタグを削除してみてはどうだろう？と、このブログのテンプレートで試してみたのがこちら。
どちらも Windows 7、IE 9 で閲覧時のスクリーンショットです。左が標準で、右がタグ削除時。細かな違いですが、枠線のカーブや影が IE 7 互換モードでは無効になっていたのがわかると思います。
ということで、最新の IE、Chrome、Firefox で見比べたときに IE だけ表示が違う場合には、このタグを削除してみるといいかもしれません。影響が出るのは、IE 8、IE 9、IE 10 での閲覧時のみですし…。ぜひ一度お試しを。
ここまで書いてきて、こういう趣旨の記事をどこかで見たような…と探してみるとすぐに見つかりました。合わせてお読みください。
IE 互換モードの複数指定
で、IE 7 互換モードのタグを次のように変更する Tips が掲載されていました。
<meta content='IE=EmulateIE7; IE=EmulateIE9' http-equiv='X-UA-Compatible'/>
このタグを使うと、
IE9の時は、IE9モードで表示され、IE8の時はIE7モードで表示されます。とのこと。HTML5 と CSS3 がジャンジャン使える IE 9 以降と、まだ使えない IE 8 両方のことを考えると、このタグに変更しておくのが今のところ一番いいのかもしれません。
更新情報：
- 2012-07-08 … 「IE 互換モードの複数指定」の項目を追記しました。
スポンサードリンク：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。 
http://jumperads.com.over-blog.com/2016/12/transfere-mecca
ReplyDeletehttp://jumperads.com.over-blog.com/2016/12/transfere-medina
http://jumperads.com.over-blog.com/2016/12/cleaning-tanks-jeddah
http://jumperads.com.over-blog.com/2016/12/transfere-dammam
http://jumperads.com.over-blog.com/2016/12/jumperads.com.html
https://bucketlist.org/list/naklafshdmam/
ReplyDeletehttps://bucketlist.org/idea/1S24/jumperadscom/#.WIeDl7l97Z6
https://bucketlist.org/idea/1S2M/%D8%B4%D8%B1%D9%83%D8%A9%20%D9%86%D9%82%D9%84%20%D8%A7%D8%AB%D8%A7%D8%AB%20%D8%A8%D8%AC%D8%AF%D8%A9/#.WIeEqLl97Z4
https://bucketlist.org/idea/1S44/%D8%B4%D8%B1%D9%83%D8%A7%D8%AA%20%D8%AA%D9%86%D8%B8%D9%8A%D9%81%20%D8%A7%D9%84%D8%AE%D8%B2%D8%A7%D9%86%D8%A7%D8%AA%20%D8%A8%D8%A7%D9%84%D9%85%D8%AF%D9%8A%D9%86%D8%A9%20%D8%A7%D9%84%D9%85%D9%86%D9%88%D8%B1%D8%A9/
https://bucketlist.org/idea/1SDK/%D8%B4%D8%B1%D9%83%D8%A7%D8%AA%20%D9%85%D9%83%D8%A7%D9%81%D8%AD%D8%A9%20%D8%AD%D8%B4%D8%B1%D8%A7%D8%AA/
https://bucketlist.org/idea/1Tir/%D8%B4%D8%B1%D9%83%D8%A9%20%D8%AA%D9%86%D8%B8%D9%8A%D9%81%20%D9%81%D9%84%D9%84%20%D8%A8%D9%8A%D9%86%D8%A8%D8%B9/#.WIiVRrl97Z4