GoogleMap山中一揆史跡地図をスマートフォンでも見やすくする

山中一揆史跡を地図で辿る~GoogleMap(http://www.can-chan.com/sanchuikki/santyuikki-shiseki-gmap.html)だとか浄土宗総本山・本山・特別寺院Googlemap(http://www.can-chan.com/tizu/g-mapjodo-honzan.html)などのGoogleMapを、スマートフォンでも簡単に表示できるように、今までのTableで区切られていた表示を取り払い、パソコンではできるだけ広く、スマートフォンでも画面に応じで見ることができるように、改造してみる。もともとはQPONさんからのスクリプトを利用させていただいていたが、スマートフォンでは画面からはみ出すようになっていたので、思い切って変えてみる。レスポンシブルな表示を目指してみました。

パソコンでは次のような見え方です。

スマートフォンで表示させたときは

スマートフォンの狭い画面で見たときもその画面に応じて表示できる。

ここでは、画像としては同じようなサイズで表示されているが、画面として表示できている部分は、パソコンの画面(上の画像)のうち赤線で囲んだ範囲となります。史跡一覧も地図下のボタンや検索窓もすべてスマートフォンで見えるようになりました。

旧暦ー西暦の相互変換のページをCSSによるレスポンシブルな新メニュー設置とページレイアウトに

旧暦ー西暦の相互変換のページのサイトメニューの表示をリニューアル。
スマートフォンやタブレットでも見やすくするために、レスポンシブルな表示にしました。
FlexboxというCSSによるページを作成してみました。
それに合わせてメニューもCSSでレシポンシブルなものに変更です。
今までも各ページのメニュー表示をできるだけ設置しようとしてjavascriptを使用して表示もしていましたが、ページによってはそのページ内のjavascriptの関係が影響しあって、メニューが動かなかったり、ページ内の計算や表示等ができなかったりして、メニューが設置できなくてトップページへの案内アイコンだけで断念してきた経緯があります。

今回は次のような体裁となりました。
[/caption]

レシポンシブルなメニューとページ体裁

スマートフォンやタブレットでは
スマートフォンやタブレットでのメニュー表示

今回変更作業をやっていて、メニューをすべてのページに長々と書くわけにいかないので、jsファイルにして表示しようとしても表示できず、ネットで調べていたら、コメントアウトの/* */ に全角の文字直後にあるとエラーとなるということを初めて知った。これを訂正したら、jsファイルでのメニュー表示もできるようになった。
ただ、Google検索の窓を設置したら、現在日時を取得して「西暦から旧暦へ変換」と箇所が動かないので、検索はリンクで表示することにした。