Bloggerのレイアウト編集から、ヘッダーの編集(headerのところの編集をクリックすると、新しいウインドウが出てくる)で画像を選択し、okをクリックするとブログのヘッダーに画像が適用される。
chromeで見るときちんと表示されるのだが、IE(8)だと一度四角くく表示され、角丸の表示がされると、ヘッダー部分が真っ黒になってしまう。
原因がよくわからず、Webで調べても出てこないので、テンプレート→HTMLの編集で、HTMLソースをいじってみることにした。
一度は表示されるので、きっとヘッダー画像の上に何か重ねて表示されてしまうのだろうと思い、ソースのそれらしき所を探してみる。
13行目の三角の部分をクリックすると、それらしきスタイルシートが出てくる。
さらに、下を探ってゆくと、
198行目から、なにやらそんな感じのスタイルシートがある。いろいろやってみた結果、212行目から217行目まで、少々乱暴だが、コメント状態にしてCSSを無効化してみると、
ヘッダーの画像は、アップロードしたファイルでも良いし、自分のパソコンのを指定しても良いらしい。今回、その部分は、表示の不具合とは関係なかった。ChromeとIEのエンジン部分の違いから来ているのか?
角丸がいいと言う場合は、自分で画像を加工するしかなさそうだ。
と言う訳で、Microsoft Photo Editorで加工してみた。
イメージ→トリミングのウインドウで、コーナーのサイズを10くらいにするとちょうどいい角丸になる。あまり数値を大きくすると、背景の色が出てきて、ちょっと格好悪くなる。その後、角の白い部分を透過指定して、png形式で保存すると出来上がり。
IEで表示させた時の画像が、こちら
