June 29, 2008
【雑感】ブラウザ対応CSS微調整
半日ほどかけてFirefox, Safariのブラウザでこのブログを見たときのズレを修正しました。いやー、時間がかかりました・・・。
修正箇所は以下になります。
- ブログのトップ画像を995pxから986pxに修正
- カテゴリ、相互リンク、トラックバック、月別ログ、コメント部分の横のズレを修正
- カレンダーのヘッダ画像（雲の部分）の横のズレを修正
- カレンダーのヘッダ画像内の月リンクの高さを修正
- trackwordのリンク部分の横のズレを修正
CSSハック | BLOG × WORLD ENDING
CSSハック一覧 HTML│CSSタグ辞書
IE7とFirefox, Safariではmagrinの値が同じでも表示のされ方が違っていたので、例えば、カレンダーの画像部分のCSSを以下のように設定しました。
.calendarheadbody{ /*カレンダーヘッダー部*/
height:40px;
width:170px;
background:url(https://livedoor.blogimg.jp/type5w4_lion/imgs/c/2/c2bbe6ee.jpg)
no-repeat;
}
/*Firefox,Safari用設定*/
html>/**/body .calendarheadbody{ /*カレンダーヘッダー部*/
margin-left:15px;
height:40px;
width:170px;
background:url(https://livedoor.blogimg.jp/type5w4_lion/imgs/c/2/c2bbe6ee.jpg)
no-repeat;
}
要は同じセレクタでも、IE7用とそれ以外のブラウザを区別して設定しております。セレクタの前にhtml>/**/bodyと指定すると、IE7を除いたモダンブラウザに適用されるようです。そして、IE7以外のFirefox, Safari用のものには、margin-leftを追加して横のズレを微調整しました。
HTMLのCSS呼び出し部分は、IEとそれ以外というように二つ指定する必要はないみたいです。
この設定を、IE7とFirefox, Safariでズレる部分すべてに設定しました。どうやら、IE7とFirefox, Safariではmarginの値が15pxほど違って解釈されるようです。
このブラウザごとのバグ対応はまったく知らなかったので、とても勉強になりました。
これからFirefoxのシェアが増えるに伴って、Firefoxユーザーが増えてくるので、少数派といえどもしっかり対応しないと固定読者がつかないので、Firefox対応は重要だと思います。特にブログやホームページは見た目が9割とまで言えますので。
やっぱりブログを最初に開いたときに細かいところでズレていると
m9(^Д^)ﾌﾟｷﾞｬー
と思われかねませんので・・・。
これで大幅なデザイン変更をしない限り、大丈夫なデザインになりました。ブログやホームページのデザイン設定においては、以下のことを気をつけなければらないということが分かって勉強になりました。
- 解像度によって見え方が違うので、解像度の複数チェックをする
- ブラウザのバージョンによって使用できるCSS設定が違ってくるのでチェックする
- IEなどの主流ブラウザ以外のFirefox,Safariといったブラウザでも同じように表示されるようにチェックする
CSS微調整に時間をとられすぎたので、今日の書評更新はなしです・・・。漫画とか読んでいたので・・・。
デザインのほかにもこのブログをカスタマイズしたい部分は、JavaScriptを使用した過去記事のランダム表示機能です。これは少し勉強や調査が必要なので、できれば7月中に実現したいと思います。
あと、このブログの過去記事、特にJanuary 2008、February 2008あたりの記事で、Amazonのリンク画像が表示されなくなっているものも対応しなければ・・・。誰か原因分かりませんかね〜？いつも画像は、livedoorのブログの機能を使って表示していますが。最悪、表示されないものを一つずつ再設定というはめに・・・。面倒なことこの上ない・・・。
応援ありがとうございます☆ 
type5w4_lion at 21:17│コメント(0)│トラックバック(0)
雑感
