2014年5月30日金曜日

PCソフトウェア>Bloggerのヘッダー画像がIE8で表示されない

ヘッダー画像の編集には、

Bloggerのレイアウト編集から、ヘッダーの編集(headerのところの編集をクリックすると、新しいウインドウが出てくる)で画像を選択し、okをクリックするとブログのヘッダーに画像が適用される。

chromeで見るときちんと表示されるのだが、IE(8)だと一度四角くく表示され、角丸の表示がされると、ヘッダー部分が真っ黒になってしまう。
原因がよくわからず、Webで調べても出てこないので、テンプレート→HTMLの編集で、HTMLソースをいじってみることにした。
一度は表示されるので、きっとヘッダー画像の上に何か重ねて表示されてしまうのだろうと思い、ソースのそれらしき所を探してみる。
13行目の三角の部分をクリックすると、それらしきスタイルシートが出てくる。

さらに、下を探ってゆくと、

198行目から、なにやらそんな感じのスタイルシートがある。いろいろやってみた結果、212行目から217行目まで、少々乱暴だが、コメント状態にしてCSSを無効化してみると、

画像は角が四角くなり、ちょっと大きくなったが、ちゃんと表示されるようになった。まあ、ちょっとかっこ悪いけど、当面このままでゆくこととした。
ヘッダーの画像は、アップロードしたファイルでも良いし、自分のパソコンのを指定しても良いらしい。今回、その部分は、表示の不具合とは関係なかった。ChromeとIEのエンジン部分の違いから来ているのか?
角丸がいいと言う場合は、自分で画像を加工するしかなさそうだ。

と言う訳で、Microsoft Photo Editorで加工してみた。
イメージ→トリミングのウインドウで、コーナーのサイズを10くらいにするとちょうどいい角丸になる。あまり数値を大きくすると、背景の色が出てきて、ちょっと格好悪くなる。その後、角の白い部分を透過指定して、png形式で保存すると出来上がり。

IEで表示させた時の画像が、こちら
少し、背景の色がはみ出しているが、まあOKということで。今のところ、特に不具合はない。ただ、IE8のみで確認したので、IEの他のバージョンで正常に表示されるかどうかは不明だ。

0 件のコメント:

コメントを投稿