PukiWikiのナビゲーションバーを画面上部に固定（追従）させた話

手元で管理しているPukiWikiで、長いページを編集するたびに、上部の編集ボタンまでスクロールで戻るのが面倒だ、という話が出ました。そこでAI（Claude）に頼んでスキンのファイルをちょっと変えてもらったところ、編集や差分のリンクが並ぶナビゲーションバーが、スクロールしても画面の上端に貼り付いて追従するようになりました。

こうなりました（画面はイメージです）。

ページの中ほどまでスクロールしてもナビゲーションバーが画面上端に追従する様子（ビフォー/アフター）

何が面倒だったか#

PukiWikiのページは、上のほうに [ トップ ] [ 編集 | 凍結 | 差分 | 添付 | リロード ] といったリンクが並んでいて、編集も差分も、たいていここから始めます。

ところが本文が長くなると、下のほうを読んでいるときに「ここを直したい」と思っても、そのリンクは画面のはるか上。毎回てっぺんまでスクロールで戻らないとボタンに触れません。長いページほど、この往復が地味に効いてきます。

AIに頼んで、スキンのファイルを変更した#

私はふだんAIで開発をしているので、今回もまずAI（Claude）に「上のリンクをスクロールしても追従させたい」と相談しました。

AIによると、この上部のリンク群は スキンのファイル skin/pukiwiki.skin.php の中の <div id="navigator"> という1つのまとまりになっているとのこと。固定したい対象が1か所にまとまっているので、あとはそこを画面の上端に貼り付けるだけ、ということで、そのまま直してもらいました。

変えてもらったのは、その skin/pukiwiki.skin.php の <head> の中。次の <style> を1ブロック足しただけで、変更したのはこのファイル1つ。本文側もほかのファイルも一切いじらずに実現できました。

1
<style type="text/css">
2
#navigator {
3
  position: -webkit-sticky;
4
  position: sticky;
5
  top: 0;
6
  z-index: 1000;
7
  background-color: #ffffff;
8
  border-bottom: 1px solid #cccccc;
9
  padding: 4px 0;
10
}
11
</style>

細かい中身はAIにお任せですが、position: sticky というのが「画面の上端に固定する」役らしく、これで狙いどおりに動きました。

「画面に固定」というと position: fixed というやり方もあるそうですが、AIによると fixed だと本文側にも余白の調整が必要になるとのこと。今回は手間の少ない sticky を採用してもらいました。難しいことはAIに任せます！

やってみて良くなったこと#

どれだけ下にスクロールしても、編集・差分・添付のボタンが画面の上端にいて、いつでも手の届くところにある
「ここを直したい」と思った瞬間にそのまま編集へ進めるので、てっぺんまで戻る往復が消えた
長いページほど効果が大きく、編集のテンポが目に見えて良くなった

数行を足してもらっただけで、毎回のスクロールという小さなストレスが丸ごと無くなりました。

スキン直編集のトレードオフ#

ひとつだけ気に留めている点があります。今回は スキンのファイル skin/pukiwiki.skin.php を直接変更しているので、PukiWikiをバージョンアップしてスキンを入れ替えると、この数行は消えます。つまり、もう一度入れ直しが必要になります。

とはいえ足すのはたった1ブロックなので、戻すのもすぐです。そのときはまたAIに頼んで入れ直してもらえば済みます。

まとめ#

長いPukiWikiページの編集で、毎回上部のボタンまでスクロールで戻るのが面倒だった
AIに相談したら、スキンの skin/pukiwiki.skin.php を変更すればいいと判明。そのまま修正を依頼した
変更したのはそのファイル1つだけで、スクロールしても編集ボタンが画面上端に追従するようになった
長いページの編集が一気に楽になった

中身に詳しくなくても、「こうしたい」という構想さえあれば、あとはAIに任せて形にできる——そこがAI開発の良いところだと思います。同じように身のまわりの「面倒」を良くしたい人の参考になれば嬉しいです。