Blogger公式テーマEmporioは、記事のトップ画像をぼかして背景に使っているところが他のテーマと違う大きな特徴でした。パソコンでもスマホでもそうなっていた。
公式テーマEmporioの特徴 背景ボケblur
普段は使わないIEを何気なく立ち上げてブログ表示を確認すると、ボカシが全く反映されていない。。上の写真のように、左のChromeでは元画像がわからないほど背景がぼけています。右のInternet Explorerでは、はっきりと元画像が認識できます。なのでIEでは、記事トップ画像が大きな写真と小さな写真が重なって表示されるような、うるさい画面になってしまいます。IEでご覧の方がいたら、ごめんなさい。
追記:Edgeでは表示されます。2022年
なぜ、Internet Explorerでは背景がボケないのか。
CSSのfilterプロパティで『 ぼかす 』という表現を『 ブラ―(blur)エフェクト 』というらしいのです。そうなのか?とEmporioのソースを確認したところ、このblurの記述がありました。で、この効果がIE非対応ということなのです。(googleさんはIEは無視ってことですか?)
ではどうすれば... ということで一応検索してはみました。SVGのfilter要素がどうのこうのなどありましたが、知識がないのでいじるのは止めておきます。
公式テーマEmporio IEではフォントが反映されず...
そして今回初めてIEで見て、フォント指定が反映されていないことに気付いたのです。Chromeで見ていた時とフォントがまるで違う...ということはCSSに記述したフォント指定がbodyではダメだった?(気づくのが遅い...)
とりあえず、記事本文だけ修正してChromeもIEも同じ表示になりました。修正前の名残がサイドバーに残っています。どちらも欧文フォントは同じ書体ですが、和文フォントが違う表示に。。左の和文フォントは許容範囲。でも、右の和文フォントで記事本文を表示されると全く違う風景になってしまいます。
私と同じようにBlogger公式テーマを採用したブログをIEで見てみると、やはりどれも儚げなフォントで記事表示されていた。カスタマイズ記事を書いているような方のページも。皆さん気づいていないみたい。IEってそういう存在なのかな...
※ 追記:その後、タイトル・記事本文・サイドバーなど統一のフォント指定をしたところ、Chromeで見る分には全く問題がなく、むしろ統一感があって良くなりました。なのですが... IE(Internet Explorer)では部分的に統一されていないのと、記事表示時のサイドバーにスクロールバーが現れてしまった。。
本来のスクロールバーの内側にサイドバーを囲むスクロールバーが出現。😮
ひとつ上の写真のように公式テーマのフォントのままの時にはバーはなかった。私と同じようにフォントを変更された方には同じような現象が... 解決策がわかる方がいたら教えてほしいなぁ。※ この場所はSidebar(Item Page)
公式テーマのカスタマイズ用テーマデザイナーには、たくさんのフォント指定箇所があります。そこに和文フォントさえ用意されていたなら簡単に思い通りのデザインになるのになぁ。Google Japan?に是非お願いしたい...さすがに“はてなのブログ”ではブラウザによる見え方の違いはなかった。
※ 追記:IE11でのスクロールバーの出現は解決しました。(この方法で後々問題なければいいな...)
ChromeとInternet Explorerでの見え方は、背景画像のぼかし効果を除いてほぼ同じに。
※ 追記:Blogger公式テーマEmporioからSohoに変更しました。2019.11.8
追記:2020年秋 Bloggerがリニューアル 公式テーマも進歩がみられ再びEmporioに戻しました。