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

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

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください