webサイトプチ改善

この半年は、思いのままに、思いついたことをしてしまってたので
コードのリファクタリングとともに、
改めて使い勝手について見つめ直してみました。
戻るボタン改善

ブラウザバックで戻るケースが多いと思いますが、ボタンがあればそこから戻ってくれるかも、と道筋を用意しました。
判定を入れて戻るボタンの表示を切り替えています。
どんなことをしているかというと、
(長いので興味のない方は読み飛ばしてください)
↓
↓
飛んでくる前に見てくれていた一覧か、その投稿が所属するカテゴリーの一覧(ブログだったらブログの一覧)のどちらかに戻れるように、リファラを取得して、あった場合はURLからIDを取得し元の一覧(カテゴリーまたはタグの一覧)へ、なかった場合(ブックマークやリンクから飛んでこられた場合など)は記事のIDからカテゴリー情報を取得、親カテゴリーに飛ばすという感じで条件分岐させてボタンの表示を変えています。
ということで、頭から煙出ました。
そんなこと簡単にできそうじゃん!というところも、
実はこういった合わせ技の、知恵、とんちみたいなことも多いので
webサイトの、ここちょっと変えたいな、処理を付け加えたいなっていうときは、作った人にお願いして直してもらうのがベストプラクティス💡✨
ブログ一覧改造

ブログは、「webのこと」「日々のこと」「落書き」という3つのカテゴリーで分けておりましたが、もうひとつ、お知らせを追加します。合計4つのカテゴリーに。
それぞれを絞り込みできるようにしてますが、見た目が一緒なので現在どこにいるかが一見わかりにくい・・
子カテゴリーで絞り込んで一覧表示したときの、それぞれの背景色とタイトルを変えました。

グローバルメニュー

コンテンツが増えたのでメニューも整理します。
必要のないものは隠しておいた方が探しやすそうだなと思って、スマホ版はアコーディオンで畳んでスッキリさせておきました。
コードの整理
重複したコードは書かないように気をつけていますが、片手間で夜な夜なやってるので忘れてまた書いちゃってるんです😭
コンポーネント化・変数にするなどして使い回すようにすると記述の量が減って時間短縮もできますし、無駄なく管理しやすいので
- 並べるレイアウト(2列・3列・4列など)
- hoverした時に画像が拡大する動きなど
- アニメーション
など、要素を細かく分解して、その中で共通するものを使い回すようにしてます。
同時にやっていかないとコードが破綻してしまい、後から何かしたいときにとてもやりづらくなっていくので、必ず最後見直してこまめに整理してます。

お友だちから、なんか細かいところまで凝っててすごいの作ったね、インスタよりいいよ、と褒められて、嬉しくて、調子に乗って頑張りました
楽しくやってます