はじめに
前回のブログ改善ログから数ヶ月、コツコツとブログをいじり続けていました。 気づけば結構な量の改善が溜まっていたので、その2としてまとめておきます。 今回もClaude Codeくんに大活躍してもらいました。ありがとう、Claude Codeくん…！
改善
テーマの自作化
これまで使っていた hugo-theme-stack をベースに、 自作テーマ hugo-theme-stack-liquid-glass を作りました。 名前のとおり、すりガラス（Liquid Glass）風の見た目に寄せたUIにしています。 最初はstackを少しずつ手直ししていただけなのですが、 気づけば独立したテーマとして切り出せるくらいカスタマイズしていたので、 それなら、と別のテーマとして分離しました。
管理方法も整えました。最初はテーマのファイルをブログのリポジトリに直接置いていたのですが、 テーマとコンテンツが混ざって管理しづらかったので、別リポジトリに切り出してgit submoduleにしました。 オリジナルのstackもsubmoduleで管理する構成なので、それに倣った形です。 テーマ側にはちゃんとバージョンを切って（v0.2.0 → v0.3.0 → v0.4.0）、 ブログ側はsubmoduleのバージョンを上げるだけで更新できるようにしています。
目次（TOC）のモバイル対応
PCでは目次をサイドバーに固定表示していますが、スマホだとサイドバーが隠れて目次が見えません。 そこで画面右下にフローティングアクションボタン（FAB）を置き、 タップするとスピードダイヤル的にメニューが開くようにしました。 目次ボタンを押すと目次がボトムシート（モーダル）でせり上がってきます。 長い記事でもスマホから章を行き来できるようになりました。 ダークテーマで閉じるボタンが見えづらかったのも直しています。
共有ボタンのフローティング対応
同じフローティングメニューに、共有（Xでシェア）とリンクをコピーのボタンも並べました。 PCサイドバーの共有ウィジェットと同じ選択肢をスマホでも出す形にして、 スマホからサッと記事をシェアできるようにしています。ボタンの視認性（不透明度）も調整しました。
OGP・Twitter Card 画像の自動生成
記事のタイトル入りOGP画像（Twitter Card）を自動生成する仕組みを入れました。 Goで背景画像に記事タイトルを描画するジェネレータを書いて、 シェアされたときに味気ない見た目にならないようにしています。 一度はブログ側に実装したのですが、「これはテーマの責務では？」と思い直し、 テーマ（stack-liquid-glass）側へ移設しました。 なお、OGP対応は前回ログのあとに一度別アプローチで試してうまくいかず、 巻き戻した経緯もあります。
CI の整備
Pull Request時のチェックをCIで回すようにしました。 まずHugoのビルドが通るかを確認するようにして、submodule込みでビルドが壊れていないか、 マージ前に気づけるようにしています。併せてビルドキャッシュのパス周りも直しました。
さらに、日本語の文章校正に textlint を導入しました。
preset-ja-technical-writing と preset-ja-spacing をベースに、
自分の書き味に合わないルールは .textlintrc.json で無効化しています。
mise run lint / mise run lint:fix で手元でも回せるようにしつつ、
CIでも content/**/*.md を検査するようにしました。
表記揺れやスペースの入れ忘れを機械的に潰せます。
試してやめたこと
NFC 用リンク集ページ
NFCタグから飛ばすためのリンク集ページを試作してみました。 名刺代わりにNFCで各種SNSへ飛ばせたら面白いかな、と思ったのですが、 QRコードページで事足りることに気づき、結局削除しました。
おわりに
前回は祝日の日曜大工的なノリでしたが、今回は数ヶ月かけてじわじわ育てた分の棚卸しになりました。 テーマを自作したり、モバイルの使い勝手を詰めたり、CIを整えたりと、 だんだん「ブログを運営している」感が出てきて楽しいです。 作ったり消したりを繰り返しながら、これからも気ままに育てていきます。