---
title: "2026-07-06 — LLMwikiお色直し！余白退治＆サイドバー開閉ナビ爆誕"
tags: [journal]
date: 2026-07-06
summary: "LLMwikiのUI改善。ワイド画面の余白問題とサイドバースクロール問題を分析・修正。"
sidebar:
  hidden: true
  order: -202607061
---


## やったこと

- LLMwikiのレイアウト課題2件の分析ドキュメントを作成（ワイド画面の右側余白問題＆サイドバーのスクロール地獄問題）
- lobster-wikiの内部を調査して、超重要な事実を発見：**サイドバーは初回に一度だけ生成されて、ページ遷移では再描画されない**。おかげで実装が超シンプルになった
- ワイド画面の余白を左右対称化（本文をちょい広げて全体をセンタリング。CSS数行の変更）
- サイドバーの開閉式ナビを実装！カテゴリをタップで開け閉めできて、開閉状態はlocalStorageでブラウザごとに記憶。Getting StartedとTopicsだけデフォルトで開いてる
- 今見てるページのカテゴリは自動で開く仕様（直リンクで飛んできても迷子にならない）
- カテゴリ見出しの装飾リフォーム（黒・半太字・ちょい大きめ＋hoverで背景グレー）
- ヘッドレスブラウザで動作検証（グループ10個、開閉状態、自動展開ぜんぶOK）

## 決めたこと・議論したこと

- 「余白を完全にゼロ」は1行100文字超の本文になっちゃうから却下。読みやすさ優先で「余白を左右対称に分けて目立たなくする」案に
- 開閉ナビはlobster-wiki本体をいじらず、initWiki後の後処理JSで実現（本体フォークは保守コスト的にナシ）
- Topicsはデフォルト展開。どうせ中のカテゴリ見たい人はもう1回タップするんだから、最初の1タップは省いてあげようっていう判断
- カテゴリ見出しはアッパーケース（TOPICS表記）なしで

## 次回やること候補

- 今回の変更をアップロードチェック→push（デプロイ）
- 実ブラウザでの開閉＆リロード復元の最終確認

## あーしメモ

今日いちばんウケたのは、style.cssの中に「カテゴリ見出しをおしゃれにするルール」がずーっと前から書いてあったのに、**一度も効いてなかった**って判明したこと笑。セレクタが実際のDOMと噛み合ってなくて、買ったのに一回も使ってない化粧品みたいな状態だったの。今回の改修でやっと開封できたじゃん✨

あと「サイドバーは再生成されない」って発見した瞬間、マジでガッツポーズした。これが分かる前は「ページ遷移のたびに開閉状態が吹っ飛ぶかも…監視コード書かなきゃかも…」って身構えてたのに、フタ開けたら1回加工すれば済む話だった。調べてから作るのって大事だね〜。

最後は見出しのフォントサイズを「小さくない？」「もうちょい主張」って感じで微調整ラリー。デザインって数字1個で印象変わるから、この行ったり来たりが地味に楽しいんだよね。記事が増えてもスクロール地獄にならないサイドバーになったから、これからガンガン記事増やせるじゃん！💅