RenzSpace Free Style Blog

LightBox

9月 28th, 2009 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

Twitt

さて、LightBox結構色々なサイトで使用されている模様ですが、皆さんもご利用中でしょうか???使用する際の注意点として数点。

まず最初に、Windows IEで表示がおかしくなる。『黒半透明の背景が途中できれてしまう…FireFoxでは大丈夫なのに…』これは、CSSでのbody設定に原因有りです。
中央に幅800pxでコンテンツを表示させたい場合、body{width:800px; margin:0 auto;}と記述する方法があり、私も参考にしていたものがそうだったので、そうして来たのですが(CSS検査では問題なし。各ブラウザ表示バグもなし)この設定にすると、LightBoxのCSS設定に影響を及ぼし、本来ならブラウザ全体に黒半透明がしかれその上にイメージが出てくるのですが、半透明エリアも800pxしか表示されなくなります。

bodyに幅設定がされているため、その領域しか存在出来なくなるからですね。そこで、考え方を変えてbody自体の幅設定をなくしてしまえば問題ないので、CSSを以下に切り換え。

body{margin:0; text-align:center;}/*重要部分はtext-align:center;部分です。*/
#wrap{width:800px; margin:0 auto; text-align:left;}/*これはコンテンツ全体を囲うDIVのIDがwrapだった場合*/

これで、表示問題は解決です。(こっちが一般的なのかな〜)

次の問題点はMacのsafariでは機能しない事…これは、制作時にLightBoxの機能を付けてくれと依頼された時には前もって伝えておく必要が有ります。

さらに、LightBox用のCSS内の記述内容にエラー要素を含んでいる点…base64部分やnextBT,PrevBTに関する部分のCSSはエラーの原因となってしまうため100点を目指すなら使わない方が良いのかな???ん〜今後も調べていく必要性が有りますね。

という事で、LightBox使用時の注意事項でしたm(_~_)m

mixiチェック

9月 28th, 2009 Author :: / Categories :: ホームページ制作でのあれこれ / トラックバックURL / No Comments »

コメントを残す