ホームページは400ページ以上にカウンタを設置しており、そのほとんどのページにメーニューバーを設置している。
今回、そのメニューバーにカテゴリの語句だけでなくアイコンを設置した。
はじめはpng画像を付加しようとしたが、メニューバーの縦サイズが広がってうまく行かず、面倒そうであったFont Awesomeを設置する。参考にしたのは
のサイトです。
Font Awesomeを利用するためには、ページの＜head＞~＜/head＞の中に、cssの設定をしなければならない。数ページだけならページ上部に書き込めばよいのだろうが、400ページを超えるととてもできそうにないと当初、敬遠していた。
ところが、メニューバーのjavascript内にそのcssの設置を書き込んで見ると、問題なく表示できたので、同一のメニューバーのページには、すべて適応されたことになる。
今後、ページを修正するとき、追加するときに、タイトルのトップにカテゴリのアイコンを設置してみるのもいいかなと考えている。
旧暦ー西暦の相互変換のページのサイトメニューの表示をリニューアル。
スマートフォンやタブレットでも見やすくするために、レスポンシブルな表示にしました。
FlexboxというCSSによるページを作成してみました。
それに合わせてメニューもCSSでレシポンシブルなものに変更です。
今までも各ページのメニュー表示をできるだけ設置しようとしてjavascriptを使用して表示もしていましたが、ページによってはそのページ内のjavascriptの関係が影響しあって、メニューが動かなかったり、ページ内の計算や表示等ができなかったりして、メニューが設置できなくてトップページへの案内アイコンだけで断念してきた経緯があります。
今回は次のような体裁となりました。
[/caption]
レシポンシブルなメニューとページ体裁
スマートフォンやタブレットでは
スマートフォンやタブレットでのメニュー表示
今回変更作業をやっていて、メニューをすべてのページに長々と書くわけにいかないので、jsファイルにして表示しようとしても表示できず、ネットで調べていたら、コメントアウトの／＊ ＊／ に全角の文字直後にあるとエラーとなるということを初めて知った。これを訂正したら、jsファイルでのメニュー表示もできるようになった。
ただ、Google検索の窓を設置したら、現在日時を取得して「西暦から旧暦へ変換」と箇所が動かないので、検索はリンクで表示することにした。
HP「浄土宗摂取山念佛寺（念仏寺）とフォルクローレ」のトップページを再構成する。
いろいろ追加作業をしているうちに横3段組みが崩れてしまった。そこで項目をブロックに分けてブロックがブラウザの幅に応じて２～４、５などと変わっていく仕組みにしてみる。inline-block をCSSに書き込んでDIVタグで作成していくようになっている。
ブラウザによってうまく表示できないケースもあるのかもしれないが、ChromeとIEではうまく表示できていることを確認している。
また、最近トップページの開きが極端に遅くてどこに原因があるのか、なかなか突き止められていなかったのだが、ネットを検索していて「AddClipsをつけていた方はご注意！」の記述に出合った。「いいね」ボタンなどをまとめて表示できるものを付けていたのだが、これが2016.3.31で終了していた。終了していたのにそのままにしていたものだから、これでかなり表示までに時間がかかった。ブラウザも必死にリンク先を探しに行くけどなくて汗だくになっていたのだろう。削除したら、スッキリ表示できるようになった。
1つのページにいろいろなJSファイルなどを置いているから、以前には問題なくメニュー表示できていたものがうまくいかなかったり、まだ不十分なところもあるが別のページでは動いているので今しばらくの検討課題としておく。
