2012/07/09

[blogger]IE互換表示タグについての泣き言1つ。

follow us in feedly
follow us in RSS
Mixed Media Painting (Detail) by Choichun Leung / Dumbo Arts Center: Art Under the Bridge Festival 2009 / 20090926.10D.54932.P1.L1.C23 / SML
Mixed Media Painting (Detail) by Choichun Leung / Dumbo Arts Center: Art Under the Bridge Festival 2009 / 20090926.10D.54932.P1.L1.C23 / SML / See-ming Lee 李思明 SML

おはようございます!ウィンブルドンを見てるとテニスしたくなる!って思ったバドミントン経験者なすなふ(@sunafu35)です。
マレーが、もう少し粘るかと思ったんですが、サスペンデッドが入った後は、フェデラーが主導権を握っていましたね。それでも、74年振りのイギリス選手の決勝進出ということもあって、表彰式のインタビューがマレー劇場になってましたが。


さて、それはともかくとして、今回は、少し泣き言を書いてみようかと思います。
泣き言というか、どうしたらいいのか分からない状態。打開策があるなら、是非教えてもらいたいという状況についてのお話です。


IE7互換表示

bloggerでは、標準で用意されているテンプレートがいくつかありますが、確認した限りでは、全てのテンプレートHTMLに
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
という、IE表示時にはIE7の機能で互換表示するようにするメタコードが入っています。

Internet Explorer でレイアウトが崩れる Blogger テンプレートは、IE 7 互換モードのタグを削除してみるといいかも | クリボウの Blogger Tips
▲改めてクリボウさんの記事を読んで、書いてみる気になりました。

▲このブログをIE7互換表示で表示させたところ。
マージンの設定が上手く行ってないのか、余白ができている部分。h要素に設定した画像が表示ない部分などが主に見られます。

IE7の表示のままだとやはり崩れてしまう部分があるので、少し変更しようということにはなるのですが・・・。


IE9での表示


BloggerのテンプレートのIE=EmulateIE7の対応について 【IE9】 | 某氏のたわごと NEXT
▲クリボウさんの記事でもリンクが貼ってありますし、表示が・・・と思った時に確認をしていた記事なんですが、この中で、IE9未満ではIE7に互換表示して、IE9ではIE9のまま表示させるように、冒頭で示したメタタグを
<meta content='IE=EmulateIE7; IE=EmulateIE9' http-equiv='X-UA-Compatible'/>
のように変更する手段が紹介されています。

このコードに書き換えれば、枠線の丸み付けや、ボックスシャドウによる影を設定していれば、IE9で参照された場合、ちゃんと適用されるというようになるのですが・・・。

私の場合、そう簡単にはいきませんでした(ノ_・。)

画像で見たほうが早いですね。
このブログをIE9で表示するとこうなります。

▲カラム部分の背景表示が灰色になって・・・。あ、ヘッダー部分のガジェットの丸みは表現出来るようになってますねw

▲フィードの呼び出しが出来ないのか、フィード利用のガジェットは全滅。

▲記事最後につけているDISQUSコメントシステムも表示不可。

あと、何故か広告も全部表示されません。


対処?

どう手をつけたらいいかもわからないのですが、どうもIE9で表示した場合に、カラム部分の背景色に設定されている「transparent」が、おかしい表示になっているようです。
調べていると、なんとなくIE9でのtrandparentについての問題が書かれているサイトがあったりはしたのですが、どう解決したらいいのかは、うまくつかめず・・・。

結局
<meta content='IE=EmulateIE7; IE=EmulateIE8' http-equiv='X-UA-Compatible'/>
このように、IE8で互換表示するように設定をして、誤魔化している状況です。
IE8だと、大体のところはうまく表示出来てるんですよね。


あとがき

このブログ、実はこんな問題があったりするのですが。
bloggerの「画像テンプレート」を利用しているサイトを幾つか確認してみましたが、やっぱりIE9での表示だと、少なくともカラムの背景が灰色表示になる問題は出ていましたので、「とりあえずIE9表示にしてしまおう」という方は、注意したほうがいいかもしれません。

そして、こうすればいけるよ!という情報を持っている方がいらっしゃいましたら、是非ともご教授をお願い致します。

それではまた!

14 件のコメント:

  1. いつもありがとうございます。
    横幅の長い画像をヘッダーに使用しました。
    クロームでは治まってるのですがIEだと、はみ出してしまいます。
    解決方法を教えていただければ...どうぞお願いいたします。
    サイトURLは、
    http://konkokyo-mk.blogspot.com/
    です。

    返信削除
  2. こんばんは!
    コメントありがとうございます。

    HPを確認してみたところ、IE9での表示では収まっていて、IE7での表示時に、
    はみ出す感じだと見受けられました。
    個人的にはちょっと不確定だったのですが、

    http://happyweblife.main.jp/mtarcive/laboratory/2011/03/overflowhidden.html

    http://www.uka-blog.com/web/html_css/entry_001255.php

    上記のサイトなどで、恐らくこれかな?という問題について
    解決法を示されてしましたので、一度試してみてはいかがでしょうか?

    具体的には、カスタムCSSに

    .header-innner{position:relactive}

    を追加するという方法です。
    IEは結構苦手なのですが、これで解決してくれないかなぁ?と
    淡い期待を持っています。

    返信削除
  3. ありがとうございます。
    ありがとうございます。
    HTML編集で、
    /* Tabs
    の前に
    .header-inner {overflow:hidden;}.header-inner {position:relative;}
    と入力したら、画像が納まりました。
    今後ともよろしくお願いいたします。

    返信削除
  4. もう一つ、すいません。
    またもIEでの画像はみ出しの件ですが...画像ガジェットは、どう変更すればよいでしょうか。
    HTMLのどの部分に入力すればよいでしょうか。
    URLは、
    http://konkokyo-musashikosugi.blogspot.jp/
    です。
    どうぞ、よろしくお願いいたします。

    返信削除
  5. 何度も質問すいません...
    ページ部分をクリックしただけで、リンク先へジャンプすることは出来るでしょうか。
    下記URLのページ「ブログ」の部分を、
    http://konkokyo-mk.blogspot.com/
    タブをクリックしただけでブログページに飛ばしたいのですが...
    どうぞ、よろしくお願いいたします。

    返信削除
  6. 画像ガジェットは、と申されましても、私は個人的には不確定だと申し上げました。
    同じ方法で解決出来るか、画像自体は一枚でスライドでもないようですし、画像の方をサイズ調整するほうが楽かと思いますがいかがでしょうか?

    返信削除
  7. こちらは、ページ作成時にウェブアドレスという選択肢がございます。

    返信削除
  8. 変更できました。ありがとうございました。

    返信削除
  9. 返信ありがとうございます。
    画像のサイズを変更(サイドバーのwidths内)しましたがダメでした。
    overflow:hidden;、position:relative;
    信を入力するのならば、HTMLのどの部分に入力すればいいのでしょうか。どうぞ、よろしくお願いいたします。

    返信削除
  10. 度々すいません。サイドバーwidths310pxでしたので、画像サイズを240pxにしたら納まりました。
    ありがとうございました。

    返信削除
  11. 初めまして、こんばんは。私も現在すなふ様と同様に、カラムが灰色になって広告やウィジェットが死亡する現象に見舞われています。
    IEで貴HPを確認させていただきましたが、現在は記載の現象は起きていないように見えます。結局どのような改善策を施されたのでしょうか?
    CSS等はほぼ初心者ですが、ご教授頂ければ幸いです。
    参考までに私のサイトです。 http://hakonest.net

    返信削除
  12. 初めまして!コメントありがとうございます。

    まず、現在もこのブログでは、改善できていない状態です(・・
    IE7で見た時はIE7のレンダリングモードで。
    IE8以降で見た時はIE8のレンダリングモードになるように、「対処?」の項目のように、メタタグで・・・

    としているままですね。

    リンクを貼って頂いたサイトを確認してみましたところ、メタタグは
    「'IE=Emulate7; IE=EmulateIE9'...」
    となっていましたので、IE9以降ではIE9でのレンダリングモードになっている状態で、灰色になってしまう状況の様子です。

    上記のようにメタタグを変更して頂けば、一先ずカラム背景が灰色、広告死亡という不具合は回避できると思います。この場合、CSS3の角丸効果などは表示出来ないなどはありますが・・・。

    また、私はIE対処をほぼ諦めたような状態なのですが、そもそも「画像テンプレート」を他のテンプレートにするとIE9での表示も可能の様子という事は確認しました(・・

    根本的な解決にはなっていませんが、検討して頂ければと思います。

    返信削除
  13. ご返信ありがとうございます。ひとまずご指摘のメタタグを修正しましたが、どうもうまくいきませんでした。IEの互換表示モードでは上手く表示されるので、「IE=7」のみのメタタグも試しましたがこれも上手く行かず…。仕方ないので別記事で「互換表示してださい」的な事を記載するにとどまりました。
    もし新たに何か分かれば記事等でお知らせくだされば有難いです。
    ご挨拶が遅れましたが、付箋風見だしなど、かなりの部分を参考にさせていただきました。今後も更新楽しみにしております!ありがとうございました。

    返信削除
  14. HTMLの書き方は、分かる範囲だと問題ないようなのに、なんででしょうね。
    ちょっと見てみましたが、原因が分かりませんでした。
    申し訳ありません。折りを見て、勉強してみます(・・

    今度とも、どうぞ宜しくお願い致します。

    返信削除

Related Posts Plugin for WordPress, Blogger...