28記事のCSSを
1ファイルにまとめた日
各記事に書き散らかされていた8000行超のスタイルを一掃。これで「直せば全部に反映される」構造になった

この日は朝から想定外のことが起きた。前日にアップロードしたサムネイル画像が、本番サイト（edencode.jp）でちゃんと表示されていない記事がいくつかある。ローカルでは全部表示されているのに。

調べてみると、Xサーバーのファイルアップローダーが一度に20ファイルまでしかアップできないという制限が原因だった。全28枚を一気に送ろうとして、途中でこっそり止まっていた。フォルダを分割してアップし直すことで全枚数の表示を確認。

このちょっとした引っかかりが、次の大仕事へのきっかけになった。

サムネイル問題を直しながら、ふと思った。この調子で記事が増え続けたら、デザインを変えるたびに28ファイルを手動で直すことになる。それは地獄だ。

問題は明確だった。各記事にインラインCSS（HTMLファイルの中にスタイルをそのまま書いてしまった状態）が150〜200行ずつ埋め込まれていて、記事ごとにバラバラの書き方になっていた。なかでもグレー系のテキストカラーが特にひどく、ほぼ全記事で別々の値が使われていた。

「今やっておかないと、あとで絶対後悔する」——そう判断して、この日の作業テーマをCSS共通化に切り替えた。

全28記事のインラインCSSを css/blog-common.css という1ファイルにまとめた。ナビゲーション・本文・カード・フッターなど、記事ページで使うスタイルはすべてここに集約する。

各記事のHTMLからは膨大なインラインCSSが消えて、代わりにたった1行のlinkタグだけになる。

合計で各記事から約8000行を超えるCSSが消えた。そのぶん、記事本文だけがファイルに残る状態になった。

各記事の見た目はカテゴリによって色が変わる。UEFN系は緑、ログ系はオレンジ、ラボ系は紫——これを記事ごとに個別に書いていたのを、bodyタグのクラス一発で切り替えられる仕組みに変えた。

新しいカテゴリを追加したくなったら、blog-common.css に1行足すだけ。記事ファイルを1本ずつ触る必要がなくなった。

共通化ができたことで、細部の修正が一気にやりやすくなった。以下をまとめて対処した。

サブナビ（記事の前後移動ボタン）の視認性改善 — 色が暗すぎて気づかれにくかったのを、アクセントカラーの枠線＋光彩に変更。文字サイズも11px→13pxに拡大した。

サムネイル上のバッジをガラス風に — 画像が入ったことでバッジが読みにくくなっていた問題を、背景の暗色半透明＋ぼかし（backdrop-filter）で解決。画像の上でも文字がくっきり読める。

Artworkページを「準備中」表示に変更 — ダミーカードが公開されたままになっていたのを「Coming Soon」表示に切り替えた。本物の作品ができたときに差し替える予定。

SNSリンクを統一 — 各ページのSNSリンクが場所によってURLがバラバラだったのを、すべて # に統一。アカウント開設時に一括で差し替えられる状態にした。