「otosan page」サイト・ホームへ新ページ作成時のエピソード
２０１３年３月２１日
前回、「bird-gallery」ページを新規に作成した時、背景画像の配置（固定）がうまくいかなかったが、その後指定方法の誤りに気づき、直ぐ改善できたため、今後再びあやまちを繰り返さない為に、「備忘録」として書いたものです。
| No. | 名 称 ・ 説 明 |
|---|---|
| ① | ページ全体の背景画像 |
| ② | 目次項目表示窓内の背景画像 |
| ③ | 目次項目表示窓内をスクロールさせるスクロールバー |
| ④ | 画面全体をスクロールさせるスクロールバー |
| ⑤ | 画面幅 ユーザのPC環境で変わる部分 |
| ⑥ | ページの幅 ７５０ｐｘに固定しています |
| ⑦ | 目次項目表示窓 幅は４４０ｐｘに固定しています |
目次項目表示窓の中央部⑦へ背景画像②を配置した時、③のスクロールバーを操作しても背景画像は動かなかったのに、画面全体のスクロールバー④を操作すると背景画像②が動いてしまった。閲覧者はそれぞれパソコン解像度等環境が異なり、画面幅が異なるため図の様に動いてしまったもの。
背景画像が中央表示から移動してしまった
原因はHTMLとCSSでの指定に誤りがあったためで、各々修正により改善できました。
尚、Ie9,Ie10,Google Chrome,Mozilla Firefox,Apple Safari各最新バージョンでも、動かないことが確認できました。
注：「bird-gallery」ページは当初予定していた、コマーシャル表示付き「SiteMix」サーバーが、表示スピードが遅かったと言う致命的現象を回避出来なかった為、急きょ「WebCrow」サ―バーへ変更しました。ここはＣＭ表示はないものの、ユーザーのＰＣ環境が最近多様化してきたため、ページそのものは表示幅の小さいデバイスの利便性を考え、左へ寄せた設計にしています。