家のブログ（WordPress）のカスタマイズまとめ ― AI に言葉で頼んで、3つの配色・曜日で変わるロゴ・一覧の形を作った

by ojiji · 2026年11月8日

このブログは WordPress で、テーマは Hueman Pro です。2025年に作ったときはほぼ初期設定のままでしたが、2026年10月から少しずつ見た目と機能を直してきました。テーマのファイルは書き換えず、テーマの設定・追加 CSS・小さな追加プログラム（mu-plugins）だけで変えています。この記事では、これまでのカスタマイズをまとめます。

もう一つの特徴は、作業のほとんどを AI（Claude Code・Codex）に言葉で頼んで進めたことです。「画像が大きすぎる」「幅はブラウザに合わせたい」のように感じたことを伝えると、AI が設定を変え、パソコンとスマホの幅で画面を撮って確認し、結果を見せてくれます。3つの配色の切り替えも、この進め方で作りました。

追加 CSS：WordPress の管理画面（カスタマイズ）から足せる CSS。テーマを更新しても消えない
mu-plugins：wp-content/mu-plugins/ に置くだけで必ず有効になるプラグイン。テーマの更新でも消えず、管理画面から誤って止めることもない
テスト環境：家のサーバーにある同じ構成のブログ。ここで試してから、本番に丸ごとコピーする（テスト環境と本番のブログを丸ごとそろえる）

1. 進め方：AI に言葉で頼み、画面で確かめる

デザインの変更は、毎回次の流れで進めました。

ブログを見て、気になったことをそのまま伝える（例：「画像が大きすぎる」「最新の記事が分からない」）
AI が原因を調べ、直し方の案を出す。案が複数あるときは選ぶ
AI が、変更前の設定を控えてから、テスト環境のブログを変える
AI が Chrome を画面なしで動かし、パソコンの幅とスマホの幅で画面を撮って確認する。崩れがあれば自分で直す
自分のブラウザでも見て、良ければ本番に反映する

実際に伝えた言葉と、変わった内容の一部です。

伝えたこと	AI が変えたこと
画像が大きすぎる、最新の記事が分からない	2列のカードから1列の一覧に。1件目のタイトルに「最新」の印
画像の背景は白に、抜粋をあと3行ほど	画像の余白を白に、抜粋を 80 → 190 文字に
幅はブラウザに合わせたい	固定幅（1200px・枠付き）をやめ、ブラウザの幅いっぱいに
「あわせて読みたい」の画像の大きさをそろえたい	画像を高さ 150px にそろえ、余白を白に
見る人が色を選べるようにしたい	グレー・グリーン・ブルーの3つの配色と切り替えボタン
サイドバーがスクロールについてこず見づらい	サイドバーの固定をやめ、タグの一覧をページの一番下へ
記事の本文だけ幅が固定になっている	本文の最大幅の指定を外した

自分で CSS を書かなくても、「どう見えてほしいか」を伝えれば形になります。ただし、AI が撮った画面は Chrome の再現で、実機ではありません。最後は自分の目で見て決めます。

2. トップの一覧：全文表示から、1列の一覧へ

最初は、トップに記事の全文が10件並んでいて、とても長いページでした。まず2列のカード型にし、その後「画像が大きすぎる」という感想から、1列の一覧（画像は左に小さく、右にタイトルと抜粋）に変えました。どちらもテーマの設定（記事一覧のデザイン）で選べます。

一番新しい記事のタイトルの前には「最新」の印を付けています。トップの1ページ目の、一覧の1件目だけに付く指定です。

/* 1列の一覧：画像の形をそろえ、日付を目立たせ、最新の記事に印 */
.post-list-standard .post-standard .post-thumbnail img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.post-list-standard .post-date { color: #24483F; font-weight: 600; }
.home.blog:not(.paged) #grid-wrapper article.post-standard:first-child .post-title a::before {
  content: "最新"; display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 4px;
  background: #DDAE68; color: #fff; font-size: 0.7em; font-weight: 700; vertical-align: middle;
}
/* スマホでは、カテゴリーと抜粋を隠して日付とタイトルだけに */
@media (max-width: 719px) {
  .post-list-standard .post-category, .post-list-standard .entry.excerpt { display: none; }
}

文字は 14px から 16px にし、日本語向けのフォントと行間 1.9 を指定しました。

3. 幅：ブラウザの幅いっぱいに

テーマの設定で、全体の幅を「1200px・枠付き」から「ブラウザの幅いっぱい（最大 1920px）」に変えました。パソコンと iPad の横向きでは本文とサイドバーの2列、スマホと iPad の縦向きでは1列になり、サイドバーは右端の « ボタンで開きます。

このとき、記事ページの本文だけは「1行が長くなりすぎないように」と、最大 860px に絞っていました。ところが、トップは広がるのに記事だけ狭いのが気になったので、後からこの指定を外し、本文も画面に合わせて広がるようにしました。読みやすさを取るか、画面の広さを生かすかは好みです。気になったら、数字を変えて戻せます。

/* 外した指定。広い画面で本文の幅を絞りたいときは、これを入れる */
.single .entry-inner { max-width: 860px; }

4. 配色の切り替え（グレー・グリーン・ブルー）

ヘッダーの帯の右端に丸いボタンが3つあり、押すと配色が変わります。ロゴの色も一緒に変わります。選んだ配色はブラウザに保存されるので、次に開いたときも同じ色です。何も選んでいない人にはグレーを表示しています。

このブログのトップを、グレー・グリーン・ブルーの3つの配色で表示した画面。ロゴとヘッダーの帯、最新の印の色が変わっている — 同じページを3つの配色で表示したところ

この機能は、「見る人が色を選べるようにしたい」と頼んで作ってもらいました。ボタンの場所は、AI が出した案の中から選びました。最初はモノクロでしたが、画面を見て「もう少し明るいグレーに」「何も選んでいない人の標準をグレーに」と伝えて直しています。

しくみは単純です。テーマの色（深緑 #24483F・黄土 #DDAE68）は、ページの <head> の中のスタイルに書き込まれています。ブラウザで、そのスタイルの色の文字列を、選んだ配色の色に置き換えます。

テーマの設定はグリーンのまま、ページの head に入る色の文字列をブラウザの JavaScript が置き換え、グレー・グリーン・ブルーで表示する流れの図 — テーマの設定やデータベースは変えずに、表示のときだけ色を差し替える

// mu-plugins/freebear-palette.php の一部（JavaScript）
var PALETTES = {
  mono:  { label: 'グレー',   main: ['#5F6368', '95,99,104'],  accent: ['#B0B4B8', '176,180,184'] },
  green: { label: 'グリーン', main: ['#24483F', '36,72,63'],   accent: ['#8CBDA0', '140,189,160'] },
  blue:  { label: 'ブルー',   main: ['#1F4E79', '31,78,121'],  accent: ['#5BC0EB', '91,192,235'] }
};
var STYLE_IDS = ['hueman-main-style-inline-css', 'wp-custom-css', 'infinite-css'];

function recolor(name) {
  var p = PALETTES[name];
  STYLE_IDS.forEach(function (id) {
    var el = document.getElementById(id);
    if (!el) return;
    if (!(id in original)) original[id] = el.textContent;
    el.textContent = original[id]
      .replace(/#24483F/gi, p.main[0]).replace(/36,\s*72,\s*63/g, p.main[1])
      .replace(/#DDAE68/gi, p.accent[0]).replace(/221,\s*174,\s*104/g, p.accent[1]);
  });
}

データベースは変えていないので、元に戻すときは freebear-palette.php とロゴ画像のフォルダを消すだけ
URL に ?palette=blue のように付けると、その配色で開く。確認や、配色を指定したリンクに使える
注意：テーマの設定で色を変えると、置き換えの元の色が変わって切り替えが効かなくなる。そのときはプログラム側の色も直す
自分で足した色（下で出てくるヘッダーの一文の色など）も、追加 CSS に #24483F で書いておけば、一緒に切り替わる

5. 曜日で変わるロゴ

ロゴは、Codex に「freebear から連想するロゴ」を SVG で何案か作ってもらいました。WordPress のロゴには SVG を使えないので、Chrome で透過 PNG にして登録しています。その後、6案と元のロゴを曜日ごとに切り替えるようにしました（月曜〜土曜は6案、日曜は元のロゴ）。割り当ては AI の「おすすめ」に任せました。

6案それぞれに、3つの配色と、スマホのヘッダー用の白抜きの版を用意した（36枚）
曜日はブラウザで、日本時間で判定する（Intl.DateTimeFormat の timeZone: 'Asia/Tokyo'）。ページをキャッシュから出しても、曜日が古くならない
開いたままでも1分ごとに曜日を確かめ、日付が変わったら切り替える
URL に ?logo-day=mon のように付けると、その曜日のロゴで確認できる

6. ヘッダーの一文・サイドバー・関連記事

ヘッダーの一文：ロゴの右に「このブログは、実際の作業記録（Obsidian）をもとに AI が下書きを作り、内容を確認してから投稿しています」と表示。Hueman にはロゴの横に文字を入れる場所が無いので、mu-plugins からページの表示後に差し込んでいる。スマホではヘッダーの下に小さく出す
サイドバー：新着記事・カテゴリー（記事が0件のものは隠す）・RSS のリンクに整理。サイドバーが画面より長く、固定表示だとスクロールについてこなかったので、固定をやめ、タグの一覧はページの一番下に「タグから探す」として移した
関連記事（あわせて読みたい）：画像の大きさがばらばらだったので、高さ 150px にそろえた

/* 「あわせて読みたい」の画像の形をそろえる */
.pro-rel-posts-wrap .post-thumbnail img { width: 100%; height: 150px; object-fit: contain; background: #fff; }

7. 読んでもらうための機能（プラグイン）

プラグイン	役割
SEO SIMPLE PACK	検索結果用の説明文、SNS で共有したときの画像と題名（OGP）
Easy Table of Contents	見出し（h2 など）から目次を自動で作る
Breadcrumb NavXT	パンくずリスト（本文の上の「ホーム > カテゴリー > 記事」）。表示は mu-plugins から
Cache Enabler	ページを保存しておき、速く表示する
Modern Image Formats	アップロードした画像から、軽い WebP 形式も作る

検索エンジン向けの記事の情報（構造化データ）は、SEO SIMPLE PACK が出さないので、mu-plugins で足しています。

8. アイキャッチを青系にそろえる

記事のアイキャッチ（一覧や SNS に出る画像）は、白い背景・濃紺の文字・右に青い線画、という形にそろえています。配色を切り替えても、アイキャッチの色は変えません。

画像は、Codex（codex exec）に見本の SVG と文言を渡して作ってもらい、Chrome で PNG に変えて登録しています。AI が作った画像は、文字のはみ出しや矢印の向きの間違いがあるので、必ず画像を見て確かめ、直してもらいます。この記事のアイキャッチと説明図も同じ方法で作りました。

9. はまったところ

追加 CSS の「>」が効かない：子要素を指す > を書くと、保存のときに > に変えられて効かなくなった。> を使わない書き方にした
変えたのに表示が変わらない：Cache Enabler が古いページを出していた。設定を直接変えたときは、キャッシュを消す
スマホで「続きを読む」のボタンが右にはみ出す：テーマのボタンの幅が画面より 15px 広かった。767px 以下でボタンの幅を画面に合わせる指定を足した
「あわせて読みたい」がページの元の HTML に無い：表示後に JavaScript で作られるため。確認は、Chrome で表示した後の内容（--dump-dom）で行った
Chrome の画面なしでスマホ幅を撮ると右が切れる：幅を 500px 未満にすると、実際には問題が無いのに切れて写る。確認は 500px 以上で行う
記事の「\」が消える：プログラムから記事を投稿すると、本文の「\」が取り除かれた。wp_slash() を通して渡す

/* スマホで「続きを読む」のボタンが画面からはみ出さないように */
@media (max-width: 767px) {
  #infinite-handle {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    box-sizing: border-box;
  }
}

まとめ

テーマのファイルは書き換えず、テーマの設定・追加 CSS・mu-plugins で変える。テーマを更新しても消えず、元にも戻しやすい
「どう見えてほしいか」を言葉で伝えれば、AI が直して、パソコンとスマホの画面で確かめてくれる。3つの配色や曜日で変わるロゴも、この進め方で作った
配色の切り替えは、テーマの色の文字列をブラウザで置き換えるだけ。データベースは変えない
家のテスト環境で試し、見て決めてから本番に丸ごとコピーする