ホームページは400ページ以上にカウンタを設置しており、そのほとんどのページにメーニューバーを設置している。
今回、そのメニューバーにカテゴリの語句だけでなくアイコンを設置した。
はじめはpng画像を付加しようとしたが、メニューバーの縦サイズが広がってうまく行かず、面倒そうであったFont Awesomeを設置する。参考にしたのは
のサイトです。
Font Awesomeを利用するためには、ページの＜head＞~＜/head＞の中に、cssの設定をしなければならない。数ページだけならページ上部に書き込めばよいのだろうが、400ページを超えるととてもできそうにないと当初、敬遠していた。
ところが、メニューバーのjavascript内にそのcssの設置を書き込んで見ると、問題なく表示できたので、同一のメニューバーのページには、すべて適応されたことになる。
今後、ページを修正するとき、追加するときに、タイトルのトップにカテゴリのアイコンを設置してみるのもいいかなと考えている。
スマートフォンでもホームページをよく見るようになってきました。
そんな時に自分のホームページのメニューバーも考え直さなくてはと、何度目のリニューアルだろう？トップページ（http://www.can-chan.com/）から先にリニューアルです。
スマートフォンでの表示は次のような感じになります。
小画面でのメニューバーの様子
メニューはハンバーガーの形になり、それをクリックするとメニューが開きます。
パソコンなどの大きな画面になると次のようになります。
大画面でのメニューバー
とりあえず数ページの付替えを行ったが、ホームページを作り始めて以来、興味関心を持つものをページにしてきたので、カウンタを設置してきたものだけで400ページを超えている。この中にはリンク切れ等で中途半端になっているものもあるだろうが、さて、どこまで切り替えができるのだろう。
Bootstrapのグリッドシステムを利用すれば、タブレットやスマートフォンでも見やすい画面になるということで、本日何とか完成。念佛寺ホームページのトップ
グリッドシステムで3列・4列の構成
グリッドシステムでは扱っているデバイスによって、構成が代わってくる。画面を小さくしてタブレット程度に狭くしてみると、4列や3列の構成が2列構成に自動的に変更される。
タブレット画面ではグリッドが2列構成に
さらにスマートフォンでは1列表示になって表示されるようになる。
ここまで作るのに、悪戦苦闘。ホームページのトップには全ホームページのかなりの項目を表示させている。多すぎるので「折りたたみ」などのスクリプトを使ったり、ブログページの最新記事を表示させるRSSのスクリプトを挿入したりと、年々複雑になってきてしまっている。そんな複雑になっているところにBootstrapのグリッドシステムやメニューなどを入れようとするのだから、詳しくない私にとって悪戦苦闘の連続だった。
苦労その１＞＞＞メニューバーを作るにあたって、今までの体裁をある程度、継続させたい。野暮ったい感じもあるのだろうが、このサイトの７つの門(入口)を設けて、色分けしたい。階層構造にもし、それぞれの背景色を活かしたい。これを達成するためのノウハウを得るためのサイトを見つけるのにも一苦労。多くのメニュー項目を今までの記述をできるだけ利用しながらどう記述していくか。外部jsファイルとしてメニューバーを設置させたい。このjsファイルだけで２６０行を費やした。
苦労その２＞＞＞グリッドシステムに各コーナーを分けて、背景色をメニューバーと共通にする。そのときに、メニューバーのボタン設定の背景色と同様に当初していて、グリッドが思った通りに移動しなかった。ボタンの’btn’の表示を削除することによってやっとグリッドの動きができ始めた。
苦労その３＞＞それまでに利用していた ’ib-box’のcssをグリッドに置き換えるについて、ブログのRSSを利用して書き出していたところの扱いをどうしたものか悩む。グリッドに変更しても、画面が広がっても表示されるのは元のままの横幅しかなく、困っていた。最終的には、元のサイトで再保存をしたら、グリッドが活かされるようになった。
苦労その４＞＞ブログより下の記事がいろいろやっても、４列の設定でも２列にしかならず、その原因がどこにあるのかなかなかつかめなかった。最終的にわかったことは、＜Li＞はあっても＜／Li＞がなかったために、グリッドが正常に動かなかったようだ。