MB-Support

パソコン初心者のサポートページ

BBSでの表示修正とメニューの読み込み方法を変更しました


MB-Support のBBS(Diogenes Club)で、画像の拡大表示でページが崩れる問題の改善と、アドレスを折り返さないブラウザに対応しました。 サイトの横幅を固定した事で、長いアドレスや拡大画像を表示する際に、ページ全体が崩れるのを回避します。 BBSの最新投稿は、BBSにアクセスしなくてもトップページと各カテゴリページの右メニューで「掲示板」をクリックすると表示できます(最新10件)。



これらのページにアクセスすると、詳細メニューに最新の日記が20件表示されます。 これは、BODYタグにページ全体が読み込まれてから表示する設定にしていましたが、場合によっては読み込みに遅れが生じます。 そこで、詳細メニューを表示するレイアウトを描画した時点で読み込みを開始する設定に変更しました。 これにより、何かのパーツのダウンロードが遅れていたとしても、それらのダウンロードを待たずに、詳細メニューに表示された部分を操作できます。



初期設定の読み込みが完了すると、上部に「MB-Support」「ハドスン夫人」「掲示板」の3つのテキストリンクが表示されます。 初期設定で読み込まれるのは「MB-Support」の日記です。「ハドスン夫人」をクリックすれば、ハドスン夫人の更新情報が表示され、「掲示板」をクリックすれば、掲示板に投稿された最新の10件を表示します。 つまり、更新情報をトップページで全て把握できる仕組みです。



掲示板を表示した時に問題だったのは、URLを含むコメントの表示です。 URLはテキストリンクになっていて、クリックにより、どこのサイトにアクセスするか把握できる様にアドレスを全て表示します。 Internet Explorer の場合は、長い URL を自動で折り返すため、ページが崩れる事はありませんが、Firefox では折り返さないため、float で左右に表示しているメニューに回り込みが発生します。 これは、詳細メニューの表示に指定された横幅を URLテキストが超えてしまうためです。

これを回避するために、Internet Explroer でも自動折り返しを止め、position を absolute に設定しました。 絶対的な位置を指定したので、見た目は悪くなりますが、指定範囲を超えた URL テキスト を表示しても、ページ全体が崩れるのを防げます。



BBSや日記のページでコメントを表示する場合、Internet Explorer (左下の画像)ではアドレスを折り返しますが、Firefox (右下の画像)では折り返しません。 どちらも横幅固定のページレイアウトで崩れるのを改善できました。


画像の拡大表示もこれと同じで、範囲を超えて表示させる事でページが崩れるのを回避しました。 BBSでは拡大画像表示に特殊な描画をしていましたが、これを排除して他のページと同じ表示形式に変更しました。

Diogenes Club BBS




Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項