この記事について
作業だけでなく、この記事の文章も AI（Claude）がまとめています。内容は実際の作業ログと実測値に基づいていますが、公開前に管理人が目を通しています。
見た目が変わりました。
このサイトはずっと配布テーマの「First」をそのまま使っていて、しかも一度もいじっていませんでした。
どれくらいいじっていなかったかというと、キャッチフレーズが “Just another WordPress site”（WordPress の初期値）のままだったくらいです。
今は「サーバ・ネットワークの覚え書き」になっています。
前回のサーバ入れ替えに続いて、これも作業はほぼ AI（Claude Code）にやらせました。
子テーマをやめて、テーマを新しく書いた
最初は「既存サイトをいじるなら子テーマ一択」だと思っていましたし、AI にもそう説明されました。
ただ今回は見た目をまるごと変える話です。その場合、子テーマだと親テーマの CSS を打ち消す !important の山になります。
それで方針を変えて、ブロックテーマを新規に書くことにしました。理由は2つです。
ひとつは、色・文字サイズ・余白を theme.json の1か所に集約できること。
もうひとつは、完成したあと自分でサイトエディタから調整できることです。CSS を触らずに色を変えられるのは、あとから効いてきます。
踏み切れたのは、事前に旧テーマを実測してもらったからでもあります。
functions.php も style.css も配布物とハッシュが一致していて、自分で足した独自コードは1行も無いことが確認できました。
失うのはカスタマイザーの設定だけ、と分かれば思い切れます。
本番をコピーした環境を手元に作って、そこで全部やった
いきなり本番のテーマを差し替えるのは論外なので、手元に検証用の仮想マシンを立てました。
OS も PHP も MySQL も本番と同じバージョンに揃えてあります。
さらに、本番の記事データを丸ごと持ってきて、実際の記事で表示を確認しました。
これが正解でした。作りたてのテーマはサンプル記事だと綺麗に見えるのに、実記事を入れたとたんに粗が出ます。
ちなみに記事の本文には画像が絶対 URL で書かれていたので、画像は本番から読まれます。
アップロード済みの画像 49MB をコピーする必要はありませんでした。
10年前の記事のコードが、地の文と同じ見た目になっていた
実記事を入れて最初に見つかった問題です。
このサイトの古い記事は、コマンドの例を <blockquote><code>…</code></blockquote> で書いています。
ブロックエディタが吐く wp-block-code ではないので、新しいテーマの CSS がまったく当たっていませんでした。公開記事21本のうち5本がこれです。
直すときにも2つ引っかかりました。
1. blockquote > code では当たらない。
WordPress の wpautop が間に <p> を挟むので、直接の子ではなくなります。子孫セレクタにする必要があります。
2. white-space: pre-wrap だけ入れると行間が倍になる。
wpautop が入れた <br> と改行が二重に効くためです。code br { display: none } が要りました。
ロゴとヘッダー画像は生成 AI に作らせた
デザインを詰めていく途中で「白すぎる」「もう少し企業サイトっぽくしたい」と思い始めて、ついでに「せっかくなのでカボスも入れたい」「kabosu.info という文字をロゴにできないか」と欲が出ました。
画像は Gemini に作らせています。かぼすの輪切りを線画にして、回路のパターンと組み合わせたものです。
綴りは一発で正確に出ました（生成 AI は文字が苦手なので、ここは確認必須だと思っていたのですが）。
効いた工夫を3つ。
白い背景を透過に変換した。
生成された画像は背景が白です。そのままだと白地以外に置けないので、「白に近い画素ほど透明にする」処理をかけました。これで白地・生成り地・濃い緑地のどこに置いても破綻しません。
線画は減色がよく効く。
色数を64色に落としたら 349KB が 99KB（72%減）になりました。元と並べて見比べましたが、違いが分かりません。
線画は拡大にも強い。
生成画像は 1024px が上限で、全幅のヘッダーに使うと大画面でぼけます。写真だとはっきり分かるのですが、線画の意匠にしたらほぼ気にならなくなりました。
これは最初から狙ったわけではなく、デザインを変えた副産物です。
逆に、画面の中の小さなアイコンは生成 AI を使いませんでした。
生成した画像のアイコンは線の太さが揃わず、小さくすると潰れます。SVG で手書きしたほうが確実ですし、テーマの色を自動で拾ってくれます。
踏んだ罠
ブロックテーマ特有のものが多かったので、同じところで困る人がいるかもしれません。
カードの中身が勝手に中央寄せになる。
グループのレイアウトが constrained だと、WordPress 本体の CSS が子要素に margin-inline: auto を付けます。default にすれば左揃えに戻ります。
「セクションだけ横幅が狭い」というのも原因は同じでした。
テンプレートに書いた表示件数が効かない。
クエリブロックが「サイトの設定を継承する」になっていると、テーマ側の指定ではなく管理画面の表示設定に従います。
3列のカード並びで10件だと最終行が1枚だけ余るので、結局サイト側の設定を9件に変えました。テーマの問題ではなかったわけです。
背景に色を付けたら、記事本文が背景と同化した。
一覧ページはカードがあるので気づけるのですが、記事ページには囲いが無かったのです。
記事ページだけ本文を白いパネルに載せる形にしたのですが、それでも見えませんでした。背景と白の差が2%しか無かったからです。背景をもう少し濃くして解決しました。
そうしたら今度はカテゴリのボタンが同化した。
ボタンの背景色と、新しくした地の色がほぼ同じでした。
教訓: 地の色を変えたら、その系統の色を使っている要素を全部見直す。
記事の上の余白だけ狭かった。
見た目の微調整だと思ったら、中身は二重管理のバグでした。
テンプレート側が HTML に直接 style="padding-top:…" を書いていて、CSS より強いので上だけ効いていなかったのです。
ブロックテーマはテンプレートが style 属性を吐くので、CSS で寸法を決めるならテンプレート側の直書きを外すのが鉄則でした。
ロゴがヘッダーからはみ出した。
「生成したロゴは余白が多いので負のマージンで詰める」という定石をそのまま当てたのですが、この画像は先に余白を切り詰めてあったので二重に効きました。
目視だとよく分からなかったので、最後はブラウザで実際の座標を測って確認しています。
いちばん笑ったやつ
作業中、「コメント送信ボタンが縦に1600px 伸びる」という珍妙な症状が出ました。
テーマの CSS をいくら見ても原因が見つかりません。
結論から言うと、テーマは正常でした。
画面を画像に変換して確認するために自作していたツールのほうにバグがあり、ブラウザを互換モード（quirks mode）で描画させていたのが原因でした。
教訓: テーマを疑う前に、それを映している環境を疑う。
おまけ — アクセスの7割は自分の監視だった
構成を見直すにあたって、アクセスログも数えてもらいました。
結果は意外でした。リクエストの7割近くはトップページへのアクセスで、その正体は自分で仕掛けた死活監視だったのです。30秒おきに叩いていれば、そうもなります。
ボットと監視を除くと、人が読んでいる数はごくわずかでした。
そして記事21本より、IPアドレス確認とwhois 検索の2つのほうが読まれていました。
これを見て、見た目を直す目的を途中で変えました。
アクセスを増やすためではなく、自分が納得できる形にすることと、古い手順で誰かを困らせないことに置き直しています。
3年より古い記事には「情報が古い可能性があります」という注記を出すようにしたのはそのためです。
コメントを残す