ブログの見た目と名前を変えました。
今回は Claude Code (Opus 5.5) と一緒に作業しています。
前回と同じく、わたしがやったのはほぼ「こうしたい」を言うことと確認くらいです。
Before
After
なんで変えたか
AstroPaper のままだと見た目が借り物っぽかったし、
ぶっちゃけちょっと飽きてました。飽き性なので。
log(): never
前のタイトルは while True: で、トップには # pass、
キャッチコピーは「break がない記録。」でした。Python の無限ループのネタです。
新しいタイトルは log(): never です。こんどは TypeScript のネタにしました。
TypeScript の never は「決して return しない関数」の戻り値の型で、
例外を投げるか、無限ループするかでしか終わらない関数に付けます。
ログを書く関数なのに戻ってこない、というちょっとした冗談です。
トップページも、ヒーローの部分を
function log(): never {で始めて、ページの一番下を unreachable. で閉じています。
戻ってこない関数の最後には誰もたどり着けないので。
キャッチコピーは「return しない記録。」にしました。
デザインで決めたこと
- 色はアクセントをオレンジ 1 色だけにして、あとはグレーで組んでいます
- フォントは本文が LINE Seed JP、ロゴや日付・タグ・コードは Geist Mono
- 文字の太さはサイト全体で 400 に揃えました。見出しも太字にしていません
- 記事ページに目次を付けました。PC では横に固定、スマホでは折りたたみです
- 見出しにはリンクが付いていて、そのまま URL を共有できます
- OG 画像もサイトと同じダークテーマにしました
ページの一番下は unreachable. で終わっていて、横の「continue ↑」で上に戻れます。
戻ってこない関数なのに、ページは戻れます。
ついでにやったこと
見た目だけのつもりが、けっこう中身も触りました。
Astro 7 に上げた
Astro を 6 から 7 に上げました。
いちばんハマったのは、HTML の空白の扱いが変わっていたことです。
Astro 7 では compressHTML の初期値が true から 'jsx' に変わっていて、
React と同じルールでタグの間の空白を消すようになっています。
そのまま上げると、トップの function log(): never { がfunctionlog(): never { とくっついてしまいました。
ほかにもタグの # blog が #blog になったり、Updated: 26 Mar, 2026 の空白が消えたりしていました。
全部の箇所に {" "} を足して回るのも大変なので、
設定で compressHTML: true に戻しています。
上げたあとは、古いビルドと新しいビルドで全ページの文字とタグの構造を比べて、
違いがないことを確かめてから出しました。
OG 画像がはみ出していた
OG 画像 (SNS でシェアしたときの画像) は satori で作っているんですが、
新しいバージョンで箱のサイズの計算が CSS と同じ content-box になっていました。
幅 100% に余白を足したぶんだけ画像からはみ出して、
タイトルが右で切れたり、下の「by Nadja」が消えたりしていました。boxSizing: "border-box" を指定して元に戻しています。
フォントまわり
日本語の Web フォントは、読み込みが終わったときに文字の大きさが変わって
ページがガタッと動きがちです。
今回は、間に合わなければ OS のフォントのまま表示するようにして、
途中で差し替わらないようにしました。
Astro には、代わりのフォントの大きさを自動で合わせてくれる機能もあるんですが、
LINE Seed JP だと代わりの Arial が 2 倍 (size-adjust: 201%) に計算されてしまったので、
これは切っています。
太さを 400 だけにしたのは見た目の好みもありますが、
日本語フォントは文字の範囲ごとに 120 個くらいのファイルに分かれていて、
太さを増やすとそのぶんファイルも増えるから、という理由もあります。
リンクカードの API を直した
記事に URL だけ貼ると、リンクカードや YouTube・X の埋め込みになるようにしています。
この裏で動いている API が、サービスの判定を URL の文字列の一部だけで見ていたため、x.com の判定に dropbox.com や netflix.com が引っかかって、
カードが作れなくなっていました。
ドメイン名でちゃんと判定するように直して、ついでに返す URL の安全チェックも足しました。
片付け
テンプレートから持ってきたまま使っていなかったものを、まとめて消しました。
- サイトでは使っていない Sanity Studio のパッケージ
(Studio は別フォルダで動いているので、サイト側には要らなかった) - 見本の画像や、使っていないアイコン、フォント
- どこからも呼ばれていないコード
パッケージの依存関係を書いたファイル (pnpm-lock.yaml) が
1 万 5 千行くらいから 5 千行くらいまで減りました。
あと、検索用に毎回作り直されるファイルを間違って Git に入れていて、
古い検索データが 117 ファイルもサイトに混ざっていたのも見つかりました。
Archives ページもなくして、Posts に一本化しています。
前の URL は Posts に飛ぶようにしてあります。
About の画像を回り込ませた
Sanity では画像の位置を左・中央・右から選べるんですが、
「右」にしても、画像だけの行の中で右に寄るだけでした。
左右を選んだときは文章が横に回り込むようにして、
About のアイコンの横に文章が並ぶようになりました。
おわりに
書くペースは相変わらずだと思いますが、今後もよろしくお願いします。