AI / Claude Code

【AIログ解説】「スマホで読みにくい」の一言でCSSが書き変わり6記事が一括更新されるまで

この記事でわかること

  • ── STEP 1 ── プロンプト（依頼）
  • ── STEP 2 ── Claudeの判断プロセス
  • ── STEP 3 ── 実行したコード
  • ── STEP 4 ── ターミナルログ（実際の出力）
  • ── STEP 5 ── 何が起きたのかの解説
  • なぜ1行直すだけで6記事が変わるのか

Claude Codeに作業を依頼すると、裏側でどんなことが起きているのか。

この記事では「プロンプト（依頼）」→「Claudeの判断」→「実際のコード・ターミナルログ」→「何が起きたのかの解説」という流れで、AIの動きをそのまま公開する。

── STEP 1 ── プロンプト（依頼）

スマホで見たときに目次の各項目に改行を入れて
読みやすくしたいんですができますか

スマホで記事を確認したところ、「この記事でわかること」の目次ボックス内の項目が詰まって読みにくかった。

── STEP 2 ── Claudeの判断プロセス

受け取った依頼から、Claude Codeはこう判断した。

  1. 問題の特定: 目次ボックス（.sisan-summary）のリスト項目の行間が狭い
  2. 原因の確認: obsidian_to_wp.py内のCSSを確認 → .sisan-summary li{margin-bottom:.3em} が原因
  3. 修正方針: margin-bottomを拡大し、line-heightも追加
  4. 影響範囲: このCSSは全記事共通のため、既存記事も一括再生成が必要

── STEP 3 ── 実行したコード

① CSSの修正（obsidian_to_wp.pyを編集）

# 修正前
.sisan-summary li{margin-bottom:.3em;font-size:.95em}

# 修正後
.sisan-summary li{margin-bottom:.85em;font-size:.95em;line-height:1.6}

margin-bottomを0.3em → 0.85em（約3倍）に拡大。
line-height:1.6を追加して行内の高さも確保。

② 既存6記事の一括再生成・更新

articles = [
    (734, 'AIに知り合いを覚えさせる活用術_20260422.md'),
    (740, 'ClaudeCodeメモリの仕組み_20260422.md'),
    (742, 'Claude活用ログ_20260422.md'),
    (745, 'サムネイル自動生成の裏側_20260422.md'),
    (754, 'ObsidianグラフとWordPressリンクの一致_20260422.md'),
    (756, '記事投稿が速い理由_20260422.md'),
]

for post_id, filepath in articles:
    content = open(filepath).read()
    title = extract_title(content, filepath)
    body = strip_obsidian_links(strip_frontmatter(content))
    html = format_with_aiso(body, title)   # ← 新しいCSSが埋め込まれる
    r = requests.post(f'{WP_BASE}/posts/{post_id}', auth=AUTH, json={'content': html})

各記事のMarkdownファイルを読み込み → HTML再生成（新CSSが埋め込まれる）→ WordPress APIで上書き保存、という流れを6記事分ループ処理した。

── STEP 4 ── ターミナルログ（実際の出力）

ID:734 → 200 Claude Codeに「知り合いの情報」を覚えさせると、日々の業務が
ID:740 → 200 Claude Codeの「メモリ」はどこに保存されるのか？仕組みと資産
ID:742 → 200 Claude活用ログ｜2026-04-22｜タスク管理・記事投稿・メモ
ID:745 → 200 AIがサムネイルを自動生成する裏側｜Pythonへの「指示」はコードそ
ID:754 → 200 ObsidianのグラフビューとWordPressの関連記事リンクが一
ID:756 → 200 AIの記事投稿はなぜ速いのか｜テキスト処理と画像生成の速度差を

200はHTTPステータスコードで「成功」を意味する。6記事すべてが正常に更新されたことがわかる。

── STEP 5 ── 何が起きたのかの解説

なぜ1行直すだけで6記事が変わるのか

WordPressの記事のデザイン（CSS）は、記事のHTMLの中に直接埋め込まれている。

つまりCSSを変えただけでは既存記事には反映されない。HTMLを再生成して上書きする必要がある。

Claude Codeはこの「1行直しただけでは終わらない」という連鎖を自動で判断し、影響を受ける記事をすべて洗い出して一括更新した。

200って何？

HTTPのステータスコードというルールがある。

  • 200 → 成功
  • 201 → 新規作成成功
  • 400 → リクエストが間違っている
  • 404 → 記事が見つからない
  • 500 → サーバーエラー

requests.post()でWordPressのAPIに「この記事をこの内容で上書きして」と送ったとき、WordPressが「OK、完了した」と返すのが200だ。

for post_id, filepath in articles: の意味

Pythonの繰り返し処理だ。articlesというリストの中身を1件ずつ取り出して、同じ処理を繰り返す。

6記事分の同じ処理を6回書く代わりに、リストとループで1回にまとめている。これが「一括処理」の正体だ。

このフォーマットの意図

このシリーズでは、AIに作業を依頼したときに裏側で何が起きているかを、そのまま公開していく。

  • プロンプト：何を依頼したか
  • 判断プロセス：AIがどう考えたか
  • コード：実際に書かれたコード
  • ログ：実行結果のターミナル出力
  • 解説：それが何を意味するのか

「AIに頼んだら何かやってくれた」で終わらせず、その中身を理解することが、AI活用の精度を上げる近道だと考えている。

関連記事

TAG
ブログ

BLOG

View All
PAGE TOP