2021年5月29日
ホームページ(トップページ)を開いた時に「予定表」を現在の時刻から表示するようにすると、Firerfox以外のブラウザではホームページが先頭から表示されないバグがあるためJavascriptを変更していたのですが、元に戻して、予定表のインラインフレーム(iframe)に「sandbox="allow-popups allow-popups-to-escape-sandbox"」を追加して対処しました。「予定表」のページも同様です。
2021年5月11日
プルダウンメニューの更新を menu.html の編集だけで行なえるようにしました。
これまでは全てのページのメニューを編集する必要がありましたが、それが menu.html の一つだけで済むようになりました。そのためのJavascriptは<body>タグの「onLoad="iframe('ifr_menu');"」です。今回の変更で、サーバーにアップロードしないと正常に表示されなくなりました。また、同一サーバー内のファイルの内容を別のファイルから取得することを禁じているサーバーでは正常に表示されないようです。その場合は前回のバージョンを使うしかありません。前回のバージョンは template.zip の「template-old_4」に入っています。
その他、フッタの「一番上に戻る」のJavascriptを変更しました。
また、ホームページ(トップページ)を開いた時に「予定表」が現在の時刻から表示するようにするJavascriptは<body>タグのonLoadに「nowSchedule();」を追加する仕組みに変更しました。アップロード中のファイルではChromeでホームページが先頭から表示されなくなるバグがあるために外してあります。template.zip のファイルでは追加してあります。同じバグは「予定表」のページでも生じますが、こちらはバナーが隠れる程度なので残してあります。<body>タグのonLoadの「weekSchedule();」がそのためのJavascriptです。
2021年4月19日
ウインドウの幅が狭い時のメニュー項目の幅を広げて、クリックするとサブメニューが下に表示されるようにした。htmlソースの構造はワンパターンのブロックを並べられたので更新しやすくできた。
2021年4月18日
ウインドウの幅が狭い時のメニュー項目がウインドウ幅の5分の1では見づらかったので、クリックして最初の項目を楯並びに出して、サブメニューの幅をウインドウ幅の3分の1まで広げられるようにした。
ただし、PCではマウスのポインタが乗った時にサブメニューが表示される仕組みだが、スマホではその操作が難しいらしく、改善策をひとりネズミのサイトの方で試している。メニューをクリックしてサブメニューを表示させ、サブメニューの幅も広げられる方法だが、メニューのhtmlソースが複雑になるため、仕組みを理解していない人がメニュー項目を更新した時に間違いが起こりやすそうなので、こちらの方では採用しなかった。
2021年4月16日
ファイルSchedule.htmlの幅が605pxで固定だったのを、端末の幅、ウインドウの幅、ブロックなど枠の幅が605px以下の場合は100%にして右側が隠れないようにした。
2021年4月14日
階層構造を大幅に変更したバージョンは他のディレクトリーに公開していたが、数々のバグが見つかって修正するたびに新たなバグが見つかる繰り返しだった。
まず、変更前の最初のバージョンはお知らせや更新情報などが長くなっても、表示する枠が長くならないバグがありました。これはインラインフレームが枠や長さを指定しないとデフォルトの小さいサイズになってしまうことと関係しているようでした。そこで、次のサイトに紹介されている方法を利用してインラインフレームが長さに応じて広がるようにした。
・iframe の高さが動的に変わっても親画面でスクロールバーを表示させない方法
https://webllica.com/set-iframe-height-dynamic/
これに伴い、更新する必要のあるデータを全てインラインフレームで表示するように大幅な変更を行った。
その際に、メニューバーのプルダウンが表示されないバグが見つかった。「z-index」が原因だと思って修正を試みたがうまく行かなかったので、メニューバーの高さをプルダウン分だけ400px高くして、メニューバーの下に空いたスペースを埋めるためにコンテンツのブロックを400px上げた。その結果、コンテンツブロックとフッタの間に400pxの隙間が生じた。これを解決するためにフッタも400px上げた。すると、今度はフッタの下に隙間が空いてしまった。ただし、Chromeでは生じなかった。自分では解決できなかったのでネットの教えてgooで教わったことでフッタの下の隙間は消えた。
これで問題が解決したかと思ったら、お知らせや更新情報などのテキストが選択できなかったりリンクをクリックできなかったり、マウスのホイールでスクロールもできなくった。上記URLで使っているJavasxriptのバグかと思っていて他の方法を探っている際に、Javascriptの問題ではなく、メニューバーのプルダウンメニューの問題を解決するためにメニューブロックを高く広げて、コンテンツブロックを上げたため、コンテンツブロックがメニューブロックの下になってアクセスできない状態になっていた。これは本当に「z-index」の問題で、最終的には重ねた上下の要素にアクセスできる方法を見つけて試みたがうまく行かなかった。
メニューブロックを広げない元の高さのままで利用する方法に戻ってプルダウンメニューが表示される方法を探している時に、メニューバーの上にマウスのポインタがある状態でホイールを回したらプルダウンメニューの下が狭い枠に表示されていることが分かった。「z-index」の問題でコンテンツブロックの下に隠れているのかと思ったが、先のコンテンツブロックがメニューブロックの下になってしまう現象と正反対である。ここで、ようやく、「z-index」の問題ではなくインラインフレームの問題であることに気付いた。インラインフレームの中身が高くなってもフレームの枠が広がらない。この現象を単純なHTMLソースを作って確認した後、インラインフレームの中身をフレームの外に出すことはできないことを思い出した。
そうして、メニューだけはインラインフレームを使うのをやめて、各ファイルが同じになるようにテキストエディタでコピーする方法に戻った。そうして、トップページのファイルから他のファイルにメニューブロックをコピーしたのだが、一段下のディレクトリーのページからリンクがつながらなかった。URLを確認したら、baseタグを使っていなかったから、ディレクトリー名が一つ余分にURLに付いてしまっていた。以前はbaseを利用していたのだが、自分以外の人が使うこと、ローカルフォルダ内で確認できるようにすることなどを考慮して相対URLに変更することにしていたので、ディレクトリー内のファイルのメニューブロックを修正して改めて他のファイルにコピーした。
ここまでやって、ようやく、templateディレクトリー内で最初のバージョンと入れ替えた。
2021年4月13日
メニューバーのプルダウンメニューが下のブロックの上に表示されるようにしたのですが、それが原因で下のブロックに幕が張られたようになって文字やリンクにアクセスできず、その幕の上にポインタがあるとスクロールもできないことが分かりました。
スタイルシートの「z-index」が原因なようです。
2021年4月13日

階層構造を大幅に変更して以前よりも更新の際に間違いが起こりにくいようにしました。
メニュー以外の更新は各フォルダー内のファイル名が"input_"で始まるファイルを更新すればできるようにしました。

ファイルSchedule.htmlはテンプレートSchedule-template.htmlと同じにしました。
以前のSchedule.htmlはサンプルはSchedule-sample.htmlにして残してあります。

2021年4月11日
ファイルSchedule.htmlのテンプレートSchedule-template.htmlを追加しました。
それに伴いSchedule.htmlのhtmlで問題のあった箇所を修正しました。
2021年4月11日
トップページの「予定表」が午前0時を過ぎるとその日の曜日を表示しない問題を修正しました。
2021年4月9日
凝ったホームページを作ってみました。