2026年 01月 07日

CSS 2026

tech

せっかくバックエンドシステムも変わったことだしと思ってCSSをアてなおした。何年ぶりかわからん (調べたら約10年一緒だった)

以下のように gemini-3-flash-preview に指示して、何度かやりなおしたら割といい感じだったので、さらに指示を加えたり手動で数字いじってなんとかした。

この日記を以下の条件で CSS を書きなおして新しいデザイン(見た目)を適用するとしたらどうしますか。やってみて
- 落ち着いたトーン 
- 「読みやすさ」最重視  
-「コード」は情報密度を高く
- 「写真」はできる限り大きく 
- ブロックの大きさに px 基本的に指定しないこと 
- フルにレスポンシブ (モバイルも同一ページです)

中央揃えだとなんかモダンに感じる。

コードブロックと写真の幅を画面いっぱいにしたりするのは後からの指示。

HTML の変更はしないつもりだったけど、結局微調整した。

ヘッダのアイコン

ヘッダにアイコンも追加してみた。Nano Banana Pro で何度かイメージを伝えつつ気に入るのをいろいろ出させてブラッシュアップしたあと、Inkscape でトレースして、「パスの簡略化」で点の数を削減した。

なお gemini-3-pro-preview に同様にことをやらせたら、完全なるゴミができたため捨てました。遅いし

JS と WebComponents

CSS とは直接関係ないけどJSまわりも若干モダンにした。ものすごく古い書き方をしていたり、loading="lazy" がない時代の画像のプレースホルダーコードが残ったりしていた。なんか大抵のことはブラウザがやってくれる時代になっていた……

見出しの改行位置を調整するのを独自でやっていたけど、完全にやめて budou-xのWebComponents を導入した。

アーカイブあさり

  • 2014年1月 はこれはこれでよかったな
  • 2015年2月 は今も使ってるタイトルに近い。けどウェブフォントだったようだ
  • 2016年10月 は前のCSSに近い。ここからはほぼマイナーアプデしかしてないはず

関連エントリー

✖

バックエンドかえてからメタデータ(ogpとかもろもろ)がちゃんと入っておらず、はてブのタイトルとかがおかしくなっていた。なおしたつもり。

結構いろいろなおしまくっている

  • sitemap.xml / feed.xml は encoding/xml で出すように
    • html/template だと XML の PI が出せなかったり、そもそもXML用じゃないので問題がある。text/template は論外
  • 関連エントリを 2-gram かつより効率良い実装に書き換え。
    • エントリ数が1万弱なので、そんなに困ってはいないのだけどやりたくて

DB の DATE 型にしてあるカラムを TEXT 型にする

go-sqlite3 だと DATE を time.Time にしてくれちゃうが、それだと困るという。DBをそのままで持ってくる前提で、元々 CAST(date AS TEXT) as date とかで頑張っていたけど、これが sqlc と非常に相性が悪い。CAST するとそのクエリ専用の型が作られてしまう。そして共通の型に詰め替えるという手間 (コピー) が発生する。

sqlc の overrides とかでなんとかならないかと思ったが、go-sqlite3 の時点で time.Time になっちゃうのと、特にドライバオプションで切り替えることもできなそうなので、諦めて TEXT にすることにした。

ただ SQLite はカラムの型変更が ALTER TABLE でできない。知らなかった。

ということでめんどいことに……

BEGIN TRANSACTION;

-- 1. Create new table with TEXT type for date
CREATE TABLE entries_new (
    id INTEGER PRIMARY KEY,
    ...
);

-- 2. Copy data from old table
INSERT INTO entries_new (id, title, body, formatted_body, path, format, date, created_at, modified_at, publish_at, status)
SELECT id, title, body, formatted_body, path, format, CAST(date AS TEXT), created_at, modified_at, publish_at, status
FROM entries;

-- 3. Drop old table and rename new table
DROP TABLE entries;
ALTER TABLE entries_new RENAME TO entries;

-- 4. Re-create indexes
CREATE INDEX index_date ON entries (date, path);
...

COMMIT;

関連エントリー