Claude CodeでWordPressのシリーズページを整えた話——ボーダー削除・間隔調整・レイアウト修正
この記事でわかること
WordPressで作ったシリーズ記事一覧ページ、「なんか野暮ったいな」と思っていたのでClaude Codeに頼んで整えてもらいました。
変えたのは3つ。
① カードの枠（box-shadow）を削除
各記事カードに box-shadow: 0 2px 12px rgba(0,0,0,0.08) がついていて、全体的にゴテゴテした印象になっていました。シンプルにしたかったので、これをまるごと削除。
コード側では6枚のカード全部にインラインスタイルで書いてあったので、一括で置換してもらいました。
② サムネイルとテキストの間隔を詰める
画像の下のテキストエリアが padding: 1.2em で上下左右均等だったため、画像とタイトルの間がなんとなく間延びして見えていました。
padding: 0.5em 0.8em 0.8em に変更して、上だけ詰めました。これだけで画像とテキストがひとつのまとまりとして見えるようになります。
③ CSS columns → CSS Grid に変更
2カラムのカードレイアウトを columns: 2 で組んでいたのですが、画像の読み込みタイミングによってレイアウトがガタつくことがありました。
CSS Gridに変更することで安定します。
変更前:
columns: 2; column-gap: 1.5em;
変更後:
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em;
columns はテキストコンテンツには向いているけど、高さがバラバラな画像ブロックには Grid のほうが安定する、というのを改めて確認できました。
おまけ：各記事に注入されていたセクションを削除
各個別記事ページに「シリーズ記事」というセクションがJavaScriptで自動注入されていたのですが、記事ページには不要だったので非表示にしました。
方法は _oltana_headtag_article（Oltanaテーマのページ別headタグ設定）に以下を追加するだけ。
<style>#ol-series-section{display:none!important}</style>
6記事ぶんをWP REST APIで一括処理してもらったので、手作業ゼロでした。
細かい調整だけど、こういう「ちょっと気になってたやつ」を口頭で伝えるだけで対応してもらえるのはやっぱり便利です。Claude CodeはWP REST APIも普通に扱えるので、管理画面を開かずにサイト改善ができるのが地味に助かっています。
