2011年 06月 10日
IE8をお使いのブロ友さんへ
約70人の方に8日の「緊急投稿」を読んでいただきました。
皆さんの診断結果は如何でしたでしょうか?
IE6およびIE7の方はIE8にバージョンアップしてください。
その上で、
IE8をお使いの方に注意して頂きたいことがあります。
実は「画像が消える」「文字が消える」「位置がずれる」という現象は「お助けマンルール」を守れば発生しません。「改行タグの挿入忘れ」と「画像横幅の大き過ぎ」が原因なのです。
お助けマンルールを守るように努力してください。
【お助けマンルール】
しかし、残念ながら、ルールはなかなか守れないようです。
なぜならば「プレビュー画面」や「マイブログ」で確認してもルール違反に気が付かないからです。
そのために閲覧する側は「IE8の互換表示をオフにしておく」ことが大切です。
互換表示をオフにしておけば、例えルールが守られていないサイトでも、画像が消えたり、文字が消えることはありません。位置ずれはありますが、そのときは互換表示をオンにすればよいのです。
それからもうひとつ、
互換表示をオンにすると電源を切ってもオンの状態が保たれます。
うっかりそのままで閲覧することがあります。「オンにしたら直ぐにオフに戻しておく」ことが大切です。
画像が消えたり、文字が消えたりする現象はお助けマンルールを守らず、かつ、互換表示がオン(IE6、IE7もこれに準ずる)のときに発生することを覚えておいてください。
【ご参考】
【適正診断投稿のからくり】
「適正診断」の投稿では次の3枚の画像をアップロードしています。
ただし、おれんじ色の枠線は消してあります。
1枚目と2枚目を横に並べて、3枚目を次の行に配置するレイアウトです。
2枚目の次に改行タグ(<br clear=all>)を挿入すべきところ敢えてお助けマンルールを破り、改行タグを挿入していません。3枚目の画像は当然本文横幅をオーバーしていますので、自動改行機能のあるIE8の互換表示オフでは見えますが、IE6、IE7およびIE8の互換表示オンで見ることができません。これで「適正診断」のからくりはご理解いただけたと思います。 (上記の画像には改行タグを挿入しています)
【不具合事例】
(1)柚子の画像のミステリ
【説明】
小さい方の画像の横幅がわずかにオーバーしている例です。気がつきにくいのですが、画像の右端がわずかに欠けています。投稿者はIE6かIE7、またはIE8の互換表示オンで確認して投稿したと思われます。
右の画像はIE8の互換表示オフで見た状態です。小さい画像は欠けることのない所へ自動的に移されるため、投稿者の意図したところと違う位置に表示されています。
(2)富士山
【説明】
テキストボックスと富士山の写真を横に並べた例です。右の画像は表示の文字サイズを大きくすると横幅がオーバーする例です。IE8の互換表示オフで見ています。互換表示をオンにするとテキストボックスと富士山の画像は重なってしまい、富士山は文字に隠れてしまいます。
(3)複数の写真
【説明】
4枚の画像を横に並べた例で、4枚の画像の横幅の合計がオーバーしている例です。
左はIE8の互換表示オフ、右はIE8の互換表示オン(およびIE67,IE7)の表示です。オーバー部分は重なってしまい片方の画像は隠れてしまいます。
(4)文字
【説明】
2枚の画像を横に並べた例です。画像横幅は少し余裕があり、文字の配置が違ってくる例です。
左がIE8の互換表示オフ、右が互換表示オンです。余裕によっては文字が消えてしまいます。
皆さんの診断結果は如何でしたでしょうか?
IE6およびIE7の方はIE8にバージョンアップしてください。
その上で、
IE8をお使いの方に注意して頂きたいことがあります。
実は「画像が消える」「文字が消える」「位置がずれる」という現象は「お助けマンルール」を守れば発生しません。「改行タグの挿入忘れ」と「画像横幅の大き過ぎ」が原因なのです。
お助けマンルールを守るように努力してください。
【お助けマンルール】
【ルール1】
画像の横幅は入力エリアの横幅を超えてはならない。
【ルール2】
画像は入力エリアが決定してからはめ込むこと
■入力エリアが無いところや足りないところにはめ込まないこと
■文字入力の最後には必ず改行か改行タグを挿入すること
画像の横幅は入力エリアの横幅を超えてはならない。
【ルール2】
画像は入力エリアが決定してからはめ込むこと
■入力エリアが無いところや足りないところにはめ込まないこと
■文字入力の最後には必ず改行か改行タグを挿入すること
しかし、残念ながら、ルールはなかなか守れないようです。
なぜならば「プレビュー画面」や「マイブログ」で確認してもルール違反に気が付かないからです。
そのために閲覧する側は「IE8の互換表示をオフにしておく」ことが大切です。
互換表示をオフにしておけば、例えルールが守られていないサイトでも、画像が消えたり、文字が消えることはありません。位置ずれはありますが、そのときは互換表示をオンにすればよいのです。
それからもうひとつ、
互換表示をオンにすると電源を切ってもオンの状態が保たれます。
うっかりそのままで閲覧することがあります。「オンにしたら直ぐにオフに戻しておく」ことが大切です。
画像が消えたり、文字が消えたりする現象はお助けマンルールを守らず、かつ、互換表示がオン(IE6、IE7もこれに準ずる)のときに発生することを覚えておいてください。
【ご参考】
【適正診断投稿のからくり】
「適正診断」の投稿では次の3枚の画像をアップロードしています。
ただし、おれんじ色の枠線は消してあります。
1枚目と2枚目を横に並べて、3枚目を次の行に配置するレイアウトです。
2枚目の次に改行タグ(<br clear=all>)を挿入すべきところ敢えてお助けマンルールを破り、改行タグを挿入していません。3枚目の画像は当然本文横幅をオーバーしていますので、自動改行機能のあるIE8の互換表示オフでは見えますが、IE6、IE7およびIE8の互換表示オンで見ることができません。これで「適正診断」のからくりはご理解いただけたと思います。 (上記の画像には改行タグを挿入しています)
【不具合事例】
(1)柚子の画像のミステリ
【説明】
小さい方の画像の横幅がわずかにオーバーしている例です。気がつきにくいのですが、画像の右端がわずかに欠けています。投稿者はIE6かIE7、またはIE8の互換表示オンで確認して投稿したと思われます。
右の画像はIE8の互換表示オフで見た状態です。小さい画像は欠けることのない所へ自動的に移されるため、投稿者の意図したところと違う位置に表示されています。
(2)富士山
【説明】
テキストボックスと富士山の写真を横に並べた例です。右の画像は表示の文字サイズを大きくすると横幅がオーバーする例です。IE8の互換表示オフで見ています。互換表示をオンにするとテキストボックスと富士山の画像は重なってしまい、富士山は文字に隠れてしまいます。
(3)複数の写真
【説明】
4枚の画像を横に並べた例で、4枚の画像の横幅の合計がオーバーしている例です。
左はIE8の互換表示オフ、右はIE8の互換表示オン(およびIE67,IE7)の表示です。オーバー部分は重なってしまい片方の画像は隠れてしまいます。
(4)文字
【説明】
2枚の画像を横に並べた例です。画像横幅は少し余裕があり、文字の配置が違ってくる例です。
左がIE8の互換表示オフ、右が互換表示オンです。余裕によっては文字が消えてしまいます。
by pc-otasukeman | 2011-06-10 06:26 | Comments(0)