「貸出案内」で索引から各ジャンル別リストへのリンクでの飛び先の位置ずれについて。

スマホで索引リストからジャンル別リストにジャンプすると知りたい作品の「内容」がスマホ画面のトップに来てしまい作品名などが隠れてしまいます。

原因は飛び先(アンカーポイント)を「内容」の最初の数文字に設定しているからです。

普通でしたら作品名かNO.に飛び先を設定しますが、PCでの各作品表示の列を上下の中央寄せにしているため飛び先作品名かNO.に設定すると「内容」の上半分が見切れてしまうための対応かと想像します。

その対応で見かけ上一番上にある「内容」の最初の数文字に飛び先(アンカーポイント)を設定したのだと思います。

レしかしそれではスマホの表示では「内容」が一番最初(上部)に来てしまいます。最初に「内容」がありその下に作品名かNO.を設定することも可能ですがそれでは見ていて不自然です。

スマホの小さな画面で飛び先がずれると迷うことが想像されます。

すべての飛び先(アンカーポイント)を作品名かNO.に書き換えればスマホでは問題解決ですがPCでは「内容」の上半分が見切れてしまう事になります。

対応を考える必要があります。

対応

ネットで調べてみたところ飛び先(アンカーポイント)から位置をずらして表示する方法を幾つか見つけました。

色々試してみたところなんとかなりそうです。

結果としては、スマホではNO.から見えるようになる。

PCでは少し下に表示される。「内容」はすべて見える。

対策

すべての索引やジャンル別リストに変更が必要となります。

ほぼ置換で対応できる見込みです。

しかし大変なヴォリュームです!

全体のデザインの統一を行っています。

最終デザインでは無いのですがページの内容によってデザインが少し異なっているので修正しています。

「概要」「施設案内」などの左側に写真があるグループ、「事業案内」などの右側に写真があるグループ、「利用案内」などの写真が無いグループとあります。

それぞれメンテナンスのし易さから装飾用のファイルを分けています。その内容を合わせる作業をしています。

ほぼ終了しました。

構造的には変化はないのでサーバーへのアップはもう少し落ち着いてから行います。

「9月のスケジュール」の表をレスポンシブ化した。

タイトルの通りレスポンシブ対応に出来ました。

PCでは元の表と多少異なる箇所はありますが情報伝達という観点からは問題は無いように思います。

表の上部のあたりの文字が中央に揃っていなかったりしていますがレスポンシブ化のために表のセルの合成をしていないのが原因です。

レスポンシブ化が全てではないですが、許容範囲内ではないかと思います。

スマホ版では曜日の色を「H29年度カレンダー」の曜日の色に合わせてみました。

日にちの区切りが分かりやすくなったとは思います。

このページを持ってすべてのページのレスポンシブ化が終了しました。

とは言いつつ「8月のスケジュール」の表は元のままです。とりあえず新旧比較のために残しておきます。

開館カレンダーを新規作成。

レスポンシブ対応にしました。

PCで4列。タブレットで3列。スマホで2列。

現開館カレンダーの黄色(祝日・日曜など)をマゼンタにしてみました。

色はすぐ戻せます。

トップページにリンクボタンを追加。

リンクは張ってあったが分かりにくいように思えたのでリンクボタンを新たに設置。

トピックスもタブレット、スマホ画面では枠で囲いリンクのイメージを強くしまた押し間違えのないような形状にした。

トピックスのボタンは中央寄せがいいかも。

   >>> スマホ、タブレットを中央寄せに修正した。

サイトマップの修正。

サイトマップを利用して全体の進捗状況確認していたが、貸出用リストの終了でほぼ使命を果たした。

よって、サイトマップから進捗状況などの情報を削除して修正した。

サイトマップを再度修正しました。

貸出用リストの見栄えを多少修正。

主にスマホでの表の枠線の見直し。

主にスマホでの表の見出しなどへの色付け。

主にスマホでの「50音順リスト」におけるアンカーポイントの修正。

ボタンの形状の若干の変更。

ジャンル別リスト 終了。

ほぼ全体終了です。

ほぼとは以下の二点が行えていないからです。、

・事業案内の「表」がレスポンシブ化を行っていない。(表の下の個別の上映案内は出来てます。)

・H29カレンダーのレスポンシブ化ができていない。

50音順リスト 終了。

DVD、VIDEO、16mm 終了。

残るは「ジャンル別」

指定管理 終了。

英語インフォ関連 4ページ 終了なのだが…。

"visitor's Guide", "general Info", "programsR", "floorguideR"の4ページは終了。

ただし、"floorguideR"の「ビデオコーナー」、「多目的研修室」の英語版でデータが無い。(フロアマップもないが。)。

グローバルナビの月々のリンクの変更に関して

現HPでは”フレームセット”を使用しているので「メニュー」のリンクの「事業内容」はその一箇所のみ変更すればよかった。

10数年前”フレームセット”が流行した要因にもメニューがHPないで一つで済むので変更箇所が少なくできるというメリットがあったからだと思う。

HTML5で”フレームセット”が廃止になり(使用しても良いがデメリットが多すぎる!)各ページにメニュー(業界ではグローバルナビゲーションと言うらしい)を付けなければならなくなった。

リニューアル版でも各ページにグローバルナビゲーションが付く。結果、手間が掛かるし間違いも増える!

他のHPを調べてみたがグローバルナビゲーションで月ごとに「URL」が変わるようなリンクボタンは無かった。当然だろうなぁとは思う。

リニューアル版でも工夫が出来ないか考えていたがサブ的なページは「事業内容」、「◯月のスケジュール」などがない簡易的なグローバルナビにする予定だった。

そこで「フォルダ内一括変換」。

フォルダ内にある複数のファイル内の単語・文章を一括で置換できる。

 
方法として
その機能を持っているエディタなどを使用する。←安易だがエディタの習得が一手間。
sed,awk,grepなど置換などに特化したソフトを使用する。←少し難しい。

上記ソフトでバッチファイルを組む。←バッチができれば操作は簡単。

どの方法が良いか試しながら少し考えてみる。

グローバルナビは簡易的なものは使用しない。

秀丸エディタの「grep置換」で行ってみた。

当たり前だが簡単だった!

索引 (50音順) 完成

レスポンシブ化、ヘッダーっぽいもの、フッターを付けました。

これで一応の完成とする。

ここで作成したヘッダー・フッターは他のリストに設定していく。

☆☆☆ javascriptは”scriptsList”を使用すること。☆☆☆

サイトマップの活用

サイトマップにはすべてのファイルが網羅されている(はず)ので、そこに進捗度を記入していけば全体/個々の進捗度が把握できる。

ファイルの右側が空いているので以下の記号で進捗度を表示。

レスポンシブ化:RS

リンク:LK

ヘッダー・グローバルナビ・フッター:HNF

上記の記号に◯、△、Xを付ける

サイトマップ

サイトマップは作成しなければならない。必須!

サイトマップには”HTML版”と”XML版”がある。

”HTML版”は人間の読者向け。”XML版”はSEO向け。…らしい。

とりあえず”HTML版”を作成する。

”XML版”は全体が完成したときフリーのソフトで作成してみる。

”HTML版”を作成した。

PCでは2カラム。スマホでは1カラムにしたい。

貸出案内のリンクの続き

問題の解決策
新しいタブで開かないように「貸出案内」のコードを修正。および「貸出案内」にリンクされているDVD、VIDEO、16mmの各リストのリンクを修正した。
ヘッダー、フッターは時間があれば最後に付ける。

現ホームページの「貸出案内:kasidasi1.html」と「貸出案内:kashidashi_annai.html」の差異をリニューアル版「貸出案内」では取り込むことにし一つに纏めた。

考えてみると、「貸出案内」>DVD、VIDEO、16mmの「50音順リスト」は必要だろうか?

新しい「貸出案内:kashidashi_annai.html」を作成したのは上記ファイルが使い難いのらが理由だからか?…膨大で探しにくいと思う。

貸出案内のリンク

以下の問題はPC、スマホなどのブラウザで「戻る」ボタンを使用する、または「タブ」を閉じることをすれば回避できる。しかしスマホなどではタブの枚数を表す数字を見ていない限り気がつかない。よってげんじょうではタブが残る可能性がある。また、異なる「貸出案内」のページがあることも不可解!

現状
・現ホームページで「貸出案内」を開く。
・「貸出案内」内で「検索」もしくは「ジャンル」のページを開く。
・新しいページは新しいタブで開く。←ここが問題!
・新しいページにはページ上方左側と右側に2つのリンクがあるのみで、左側はリスト(貸出案内)に戻る。右側は「✕このウインドウを閉じる」。「トップページ」などには戻れない。
・探しているときはウインドウは閉じないと思うのでリストに戻るを選択すると思われリスト(貸出案内)に戻る。
・戻った「貸出案内:kasidasi1.html」はトップページから来る「貸出案内:kashidashi_annai.html」ではない。←ここが問題!
・「貸出案内:1.html」には「検索」もしくは「ジャンル」へのリンクしかなく「トップページ」などには戻れない。←ここが問題!
・ここで新たに「検索」もしくは「ジャンル」のページを開くと新しいタブが作られる。
・結果的に新しいタブが増殖する無限ループとなる。←ここが大問題!

進捗度 ~8/15

「トップページ」「概要」「施設案内」「事業案内 (8月)、(9月)」「貸出案内」「利用案内」のページはほぼ終了です。
今後の評価でデザインなどの変更があることをふまえ見た目の細かい調整などはお休みです。

現在レスポンシブ化していないページ。
1.「指定管理者」
2.「Visitor's Guide」、「General Information」、「Programs」、「Floor Guide」の4ページ。
3.「貸出案内」>「検索50音順」>「あ~お」…「や~わ」の8ページ。
4.「貸出案内」>DVD、16mmの「50音順リスト」の2ページ。
1.2.に関して
レスポンシブ可能なので作り直す。
4.に関して
VIDEOの「50音順リスト」はレスポンシブ可が終わっている。それと同様の方法でDVD、16mmのレスポンシブ化する。
3.に関して
VIDEOの「50音順リスト」の要領でレスポンシブ化する。

「貸出案内」にリンクされているDVD、VIDEO、16mmの各リストのヘッダー、フッター。
トップページのようなヘッダー、フッターではなく簡易的なヘッダー、フッターを付ける。 今のところ付けない。
65ページ(ファイル数)あるので作業の仕事量が多く現状でも良いかと考えていたが問題が見つかったので全て付けることにする。 いまは付けない。
問題の内容は別記事「貸出案内のリンク」を参照のこと。
問題の解決策
新しいタブで開かないように「貸出案内」のコードを修正。および「貸出案内」にリンクされているDVD、VIDEO、16mmの各リストのリンクを修正した。
ヘッダー、フッターは時間があれば最後に付ける。
なお、「貸出案内」にリンクされているDVD、VIDEO、16mmの各リストには「映像文化ライブラリー」の名称が入っていないので名称もしくはロゴなど入れたい!
ロゴなどの入れ方を考えるよりヘッダー、フッターを入れたほうが合理的。

「リニューアルで行うこと(この記事は作りかけ)。

今回のレスポンシブ化での作業内容
表組みで構成されていた構造をリキッドスタイルに変更。
”フレームセット”が廃止されているのでリニューアル版ではCSSで対応。
それに伴いリニューアル化での対応
現ホームページは”フレームセット”を使用している。そのためコンテンツ部(画面下部)にはヘッダー・フッターが無い。唯一トップページのみフッターあり。
コンテンツ部にヘッダー・フッターが無いためコンテンツ部のみで開く「貸出案内」含む以下のリストや年間カレンダーのページ内に「映像文化ライブラリー」の名称・ロゴなど無い!
ヘッダー・フッターをすべてのページに付ける。

「備忘録」について。

進捗状況や思いついたことなど備忘録に書いていきます。


開館時間
火曜日~土曜日
     午前10時~午後8時
日曜日・祝日・8月6日
     午前10時~午後5時
休館日
月曜日(8月6日、祝日は開館)
祝日の翌日
  翌日が土・日・月曜日にあたる
  ときは、直後の平日
12月29日~1月4日
8月の休館日
7日(月)、14日(月)、15日(火)
21日(月)、28日(月)

page top