Firefoxで画像がない時の表示を分かりやすくする
問題
Firefoxって、imgタグなどの画像がないとき、何も表示しないですよね。
Firefoxで画像がない時(404など)の表示を分かりやすくすることはできる?
答え
Firefoxでは<img>の画像が404の時、ALTを代替として表示する設定になっていますが、ALTが設定されていない場合、何も表示されません。
すると、webサイト制作中にfirefoxで動作確認しているとデザインが破綻しない限り見つからず、IE等でのチェックの段階で見つかることになり、ちょっとした手間となります。
そこで、firefoxに手を加えてIEのように表示されるようにしましょう。
どうするの?
表示するためには、userContent.cssを使います。
ユーザースタイルシートと呼ばれる、全てのサイトに適用される個人用のCSSです。
詳しい設置方法は下記URLを参照してください。
http://firefox.geckodev.org/index.php?cmd=read&page=usercontent.css&word=css
userContent.cssに以下を書きくわえます。
/* * Show image placeholders */ @-moz-document url-prefix(http), url-prefix(https), url-prefix(file) { img:-moz-broken { -moz-force-broken-image-icon: 1; width: 24px; height: 24px; } }
また、about:configにて、browser.display.show_image_placeholders が true になっているか確認してください(デフォルトはtrue)。
結果
これで下図の様な表示になります。
コメント