数ヶ月かけて行ってきた、ホムペのリニューアル。

2月末、なんとか、形になりました。

それは「スマホ対応」がメインのリニューアル工事でした。


でも、できあがったものは、想像していたものとは、ちと、異なっていました。

なかなか、願い通りに「作動」してくれませんでした。


HTML言語＝タグとか「CSS」の書き方とか、
思い出したり、覚えたり、
未だに試行錯誤の連続です。


今日の休みも、「いじって」ました。


まずは、「お山を探す」ページに新たに導入したマイマップ。

スマホで見てみると、ボタンとか、横スクロールして出てくる文字とか、なんか、小さい。

原因は、「お山へ行こう！」すべてのページが、
「PC ←→ スマホ」のスタイル切り替えが完全にはできていなかったことでした。

これは、前回のリニューアル工事で導入を見送っていた、

「meta name="viewport" content="width=device-width,initial-scale=1.0"」

を使うことで、なんとか、できました。


次は、「マップ」。

各indexページにある、地図上にお山の場所を旗で表した部分で、
リニューアル工事で変更した場所のひとつです。

googleマップの貼り付けが有料化したため、
国土地理院の地図を利用する方式に転換した部分です。

画面のサイズが異なるスマホとPC、それぞれに合わせて表示させるのは、
簡単そうで、意外と苦戦しました。

「@media only screen and (min-device-width: 480px) 」

なんてタグを屈指して、取りあえず、クリアできました。


最後は、テーブル＝表。

画面からはみ出したテーブルが、ページ全体のレイアウトを崩してるところがありました。

例えば、各お山の紹介ページにある「アクセス」。

登山口に至る国道・県道の情報を載せた簡易地図です。

地名とか距離とか、文字数のせいで、横に長くなりがちでした。

「アクセス」全体の大きさは画面内に収まるようにし、
中の簡易地図だけを横スクロールできるようにすれば、
問題解決じゃん！って思ったのですが…。

それがどうやっても上手く行きませんでした。

半日くらい、悩んだ結果、
「アクセス」全体を横スクロール可能にすることで問題を回避しました。


一応、問題のあったすべてのページを修正したつもりですが、
全ページのチェックは行っていないので、
治ってなかったり、エラーってるページもあるかも、です。

そして、すべてのページが、最低限、思った通りに「作動」するようになるには、
まだまだ、時間が必要な気がします。


そんな、2022年のGWでした。