今更ですが、スマホで見たときレイアウトが酷いことに気が付きました。^^;
スマホでも快適に見ていただけるよう、ブログ全体とLoL戦績ページの表示を調整しました。
📱 今回の修正内容
1. ブログ全体をスマホ用に調整
- 記事レイアウトの修正: スマホの画面幅でも、記事の本文や見出しが窮屈にならずスッキリ読めるように全体のバランスを調整しました。
- 画面の窮屈感の解消: スマホで見たとき圧迫感があったのを直し、左右に綺麗な余白ができるようにしました。
2. 戦績画面が強敵だった。
一番苦戦したのが、LoL戦績ページでした。
- 苦戦したポイント: ルーン情報やアイテム履歴などの横長パーツに引っ張られて、右側にはみ出てしまう現象が起きていました（どれだけ幅を指定しても崩れてしまう状態）。
- 解決策: CSSのレイアウト構造（GridとFlexboxの組み合わせ）を根本から見直し、どんなに中身が大きくても絶対に画面幅を超えないように制御をかけました。これにより、はみ出しが完全に消え、パーツごとに滑らかに横スクロールして確認できるようになりました。
今後も少しずつ使いやすさを改善していきますので、もし表示がおかしい部分を見つけたら教えてもらえると嬉しいです！
ほなまた！
Comments (0)
Loading...