ホームページメニューバーにアイコン設置

ホームページは400ページ以上にカウンタを設置しており、そのほとんどのページにメーニューバーを設置している。

今回、そのメニューバーにカテゴリの語句だけでなくアイコンを設置した。

はじめはpng画像を付加しようとしたが、メニューバーの縦サイズが広がってうまく行かず、面倒そうであったFont Awesomeを設置する。参考にしたのは

Font Awesome 5の使い方とカスタマイズ方法を徹底解説!

のサイトです。

Font Awesomeを利用するためには、ページの<head>~</head>の中に、cssの設定をしなければならない。数ページだけならページ上部に書き込めばよいのだろうが、400ページを超えるととてもできそうにないと当初、敬遠していた。

ところが、メニューバーのjavascript内にそのcssの設置を書き込んで見ると、問題なく表示できたので、同一のメニューバーのページには、すべて適応されたことになる。

今後、ページを修正するとき、追加するときに、タイトルのトップにカテゴリのアイコンを設置してみるのもいいかなと考えている。

ホームページのメニューバーの新規作成

スマートフォンでもホームページをよく見るようになってきました。

そんな時に自分のホームページのメニューバーも考え直さなくてはと、何度目のリニューアルだろう?トップページ(http://www.can-chan.com/)から先にリニューアルです。

スマートフォンでの表示は次のような感じになります。

小画面でのメニューバーの様子

メニューはハンバーガーの形になり、それをクリックするとメニューが開きます。

パソコンなどの大きな画面になると次のようになります。

大画面でのメニューバー

とりあえず数ページの付替えを行ったが、ホームページを作り始めて以来、興味関心を持つものをページにしてきたので、カウンタを設置してきたものだけで400ページを超えている。この中にはリンク切れ等で中途半端になっているものもあるだろうが、さて、どこまで切り替えができるのだろう。

ホームページの総合カウンタ、200万達成まであと数十!

ホームページを作成し始めて14年経過し、後わずかで200万カウントを越えることになりました。

当初、ホームページに書くことがあるのだろうか、カウントを設置して増えるのだろうかと思いながら作成したことを思い出されます。

現在のホームページ

トップ画面です。

タイトルは「浄土宗摂取山念佛寺とフォルクローレ」と少々長いタイトル。お寺のことだけでなく自分の趣味も合わせたいと思い、当時趣味にしていたフォルクローレの名も入れたのです。今はフォルクローレのページやその取り組みはほとんどできていないのが少々残念ですが、フォルクローレをCDで聴くことはたまにあるということで、折り合いをつけています。

同じようなページが多いのですが、430ページ(URL)を作成してきました。もちろんこの中にはフリーのサイトを利用して写真をアップしてきた当初の苦労もあり今ではリンクが切れてしまっている個所もあるようです。気づいたら修正等も行っているのですが、完璧とはなっていないようです。

本日、カウンタを見たところ、200万カウントまであと少しとなっており、あと数日で越えそうということで、ブログに書いているところです。

ホームページのトップページに折りたたみを設定

ホームページトップのメニューに折りたたみを入れることで、主な項目だけを見ることができるようにする。必要に応じてさらに細かな項目まで見ることができるようにする。

サイトを見る

ぜひご覧ください。