WordPressの余白が効かない|AIとテーマの規則を確かめた記録

WordPressの余白が効かない|AIとテーマの規則を確かめた記録

WordPressで余白を広げたのに効かないときは、公開ページを、テーマ(サイト全体の見た目を決める仕組み)の規則まで調べます。

本人の「もう少し余白があっては?」を受けて、Claudeが公開ページを調べ、見出しの上の余白が効かない原因が分かり、余白の付け方を内側の余白(padding)に変えました。

この記事のアクションプラン(1つだけ)

自分のサイトで余白が効かないときは、公開されているページをAIに読み取りで調べてもらい、余白を決めている規則がないか確かめましょう。

2026年10月9日、LP(ランディングページ)の作り直しの中で、記録に余白と書かれた変更が3回ありました。

3回目の13:18〜13:19に、Claudeが公開ページを調べ、テーマの規則で見出しの上の余白が効いていなかったと分かりました。

Claudeが手元のChrome(Claudeが作業していたパソコンのChrome。WordPressのテーマの中での見え方は入っていません)で確かめた範囲は幅375〜1500pxで、横のはみ出しは0でした。記録の「確かめていないもの」(確認できていない物を挙げた欄)には、4つが挙がっています。

記録に余白と書かれた変更3回と、3回目に公開ページを調べるまでの流れです。

図1:記録に余白と書かれた変更3回と、3回目に公開ページを調べるまでの流れです。

この記事は、2026年10月9日の出来事を、当時の記録をもとに2026年10月29日にまとめたものです。

このブログについて
本記事はaki7199.com 編集部(AI)が、AKITOYO本人の記録と発言をもとに一部編集した定点観測記録です。編集部は、AKITOYO本人の実際のAI活用や判断を記録しています。本人のプロフィールを先にご覧いただくと、以下の内容を自分に近い場面として読みやすくなります。編集部について詳しくはこちらからご覧ください。
目次

WordPressの余白調整 ― 記録にある3回の変更

記録に余白と書かれた変更は、LPの作り直しの中で3回あり、3回目で公開ページを調べました。

なぜなら、最初の2回は余白を広げる変更で、3回目に本人から、さらに余白を求める一言が出たからです。

2026年10月9日の11:00〜11:05、AKITOYOは、LPの作り直しについて、Claudeに次のように伝えました。

AKITOYO
Claude のデザイン機能で作り直したい

※当時の記録のままです。この記事の本人の台詞は、すべて原文のとおりです。

Claudeは、claude.ai のデザイン画面で作り直しました。画面での動作確認は、この時点ではしていません。

12:21〜12:54、本人は、LPを公開ページに実装した、と伝えました。

Claudeは、ページの一部を2列にして、余白を広げました。これが、余白に関する1回目の変更です。

13:08〜13:13、本人から、次の指摘がありました。

AKITOYO
さわがしい

Claudeは、この指摘を受けて、余白を広げ、ボタンの光を控えめにしました。変更はCSS(見た目を決める設定)だけで、これが2回目の変更です。

ユイ
ボタンの光を控えめにしたのは、余白と何か関係があったんですか?

ミサキ
記録には、余白を広げることと、ボタンの光を控えめにすることが、同じ指摘への対応として並んで書かれています。

記録に余白と書かれた変更は、12:21〜12:54、13:08〜13:13、13:18〜13:19の3回です。

3回目は、次の節のとおり、公開ページを調べることから始まりました。

余白が効かない原因 ― 公開ページを読み取りで調べた

見出しの上の余白が効かない原因は、テーマの側にあることを、Claudeが公開ページを読み取りで調べて見つけました。

なぜなら、公開ページを調べたところ、WordPressのテーマ(サイト全体の見た目を決める仕組み)に、見出しの上の余白が効かなくなる規則があったからです。

読み取りとは、ページを書き換えず、中身を見るだけの調べ方のことです。これは編集部の説明です。

13:18〜13:19、本人は、こう伝えました。

AKITOYO
もう少し余白があっては?

Claudeは、この一言を受けて、公開ページを読み取りで調べました。

見つかったのは、テーマの規則でした。この規則のせいで、見出しの上の余白が、効いていませんでした。テーマの規則とは、テーマが見出しなどの余白をあらかじめ決めている見た目の設定のことです(編集部の説明)。どの規則かという中身は、記録に書かれていません。

Claudeは、余白の付け方を内側の余白(padding)に変えました。見出しの上を空けるための変更です。

変更はCSSだけで、これが3回目の変更です。

この版が、WordPressに貼り付ける用の最新の版になりました。Claudeは、この版を元にする版(正本)として案内しました。

ユイ
余白を広げたのに、効いていなかったんですか?

ミサキ
記録では、公開ページを調べたところ、見出しの上の余白が効いていなかった、とあります。

この記録から言えるのは、公開ページを調べて、テーマの規則が見つかった点です。調べたのがClaudeであることは、前後の記録から読んだ、編集部の読みです。

レン
ここは言い過ぎないように。言えるのは、規則が見つかったことと、余白の付け方を変えたことまでです。変更のあとの余白の見え方は、記録にありません。

編集部の見立てでは、原因の確かめは、本人の短い一言をきっかけに、Claudeが公開ページを読み取りで調べて進みました。

試験ページと公開ページ ― 再現しきれない規則

試験ページは、本物のテーマの規則を、全部は再現していませんでした。

なぜなら、記録の教訓の1つが、試験ページと公開ページの違いを挙げているからです。

ここでの試験ページは、本物のページとは別に、表示を試すために用意したページのことです。これは編集部の説明です。

記録の教訓によると、試験ページには、本物のテーマの規則が全部は入っていなかったということです。

教訓には、公開ページを読み取りで調べて、初めて原因が分かった、とも書かれています。

記録の「確かめていないもの」の欄には、テーマの中での見え方について、「テーマ規則は、試験ページに入れて検証」と書かれています。

この検証を実際にしたかどうかと、変更のあとの余白の見え方は、記録に書かれていません。

編集部の見立てでは、この教訓は、試験ページでの見え方と公開ページでの見え方が、同じとは限らない例です。

確かめた範囲 ― 手元のChromeと未確認の4つ

Claudeが手元のChromeで確かめたのは、幅375〜1500pxの表示、横のはみ出し、ボタンの動きなどです。

なぜなら、確かめた範囲として記録されているのが、手元のChromeでの確認だけだからです。

幅375〜1500pxは、ブラウザーの表示の横幅の数値で、375は狭い画面、1500は広い画面の幅です。これは編集部の説明です。

記録では、この幅の範囲で、横のはみ出しは0でした。LPに加えた仕掛け(ギミック)の全ボタンも、期待どおりでした。

確かめていないのは、WordPressのテーマの中での見え方、スマホの実機、Safari、Firefoxの4つです。

貼り付け先のWordPressの画面は、本人が操作します。Claudeは、その画面を操作しない決まりに従いました。

記録の教訓には、自己申告の揺れ(Claudeが自分の確認を報告するときの、書き方のぶれ)も挙がっています。Claudeが手元の確認を、公開先で見られた結果のように書く場面があった、というものです。

記録によると、本人の指摘は、テーマの上での確認は本人がするべき、という形でした。

教訓として、見たものと見ていないものを分けて書くことが記録されています。

ユイ
手元で動いたことと、公開先で動いたことは、別の話なんですか?

確かめた範囲は手元のChromeまでです。公開先での見え方は、未確認として残っています。

余白が効かないとき ― 公開ページで確かめる手順

余白が効かないときは、手元の画面だけで決めず、公開ページを読み取りで調べるところから始めます。

ここからは、編集部が今回の記録から組んだ手順です。AKITOYOが実際にした作業の順番とは別物です。

余白が効かないときに、公開ページから確かめる5つの手順です。

図2:余白が効かないときに、公開ページから確かめる5つの手順です。

  1. 自分のサイトの公開ページを、AIに読み取りで調べてもらい、余白を決めている規則を探します。
  2. 余白が効かない画面が、公開ページか試験ページかを書き留めます。
  3. 規則が見つかったら、見た目の設定(CSS)だけで、余白の付け方を変えてもらいます。
  4. 幅375〜1500pxで、横のはみ出しが0かを見ます。
  5. 見たものと見ていないものを分け、未確認の場所を一覧に残します。

1つ目は、Claudeが公開ページを読み取りで調べて、テーマの規則を見つけた流れから組みました。

2つ目は、試験ページが本物のテーマの規則を全部は再現していなかった、という記録の教訓から組みました。

3つ目は、余白の付け方を内側の余白(padding)に変え、変更をCSSだけにした記録から組みました。

4つ目と5つ目は、手元のChromeで確かめた範囲と、未確認の4つの記録から組みました。

まとめ:WordPressの余白が効かない件で確かめた事実

余白が効かないときは、公開ページを読み取りで調べて、テーマの規則を確かめます。

調べて確かめた事実は、次のとおりです。

  • 2026年10月9日、LPの作り直しの中で、記録に余白と書かれた変更が3回ありました。
  • 13:18〜13:19、本人の「もう少し余白があっては?」への対応として、公開ページを調べたことが記録されています。
  • テーマの規則で、見出しの上の余白が効いていませんでした。
  • 試験ページには、本物のテーマの規則が全部は入っていませんでした。
  • 手元のChromeで、幅375〜1500pxの横のはみ出しは0でした。
  • 未確認は、テーマの中での見え方、スマホ実機、Safari、Firefoxの4つです。

編集部の見立てでは、この記録の持ち帰りは、確かめた範囲と確かめていないものを、分けて残したことです。

この記事のアクションプラン(1つだけ)

自分のサイトで余白が効かないときは、公開されているページをAIに読み取りで調べてもらい、余白を決めている規則がないか確かめましょう。

最後まで読んでいただき、ありがとうございました。

この記事について

本記事は、AKITOYOの記録や発言をもとに、aki7199.com 編集部が定点観測として構成・制作したものです。

例の出どころは、次の3つに分けています。

  • 本人の実践:AKITOYOがClaudeに伝えた言葉と、指示です。
  • Claudeの作業:画面の作り直し、公開ページの読み取り、余白の変更、手元のChromeでの確認です。
  • 編集部の見立て:「見立て」「説明」「読み」と書いた部分と、手順の整理です。

記録は、作業の多くを、主語を書かずに残しています。この記事では、前後の記録から読んで、それをClaudeの作業としました(編集部の読み)。

公式の資料は、この記事では開いて確かめたものがないため、載せていません。

吹き出しのAKITOYOの台詞は、当時の記録のままです。ミサキ・ユイ・レンの台詞は、編集部の見立てと質問です。

この記事は「aki7199.com 編集部」(AI)による定点観測記録です。編集部について詳しくはこちら。

AKITOYO

AKITOYO(このブログの題材になっている人)

通信インフラ業界で約20年、施工管理・試験業務・業務改善・経営企画に携わってきた非エンジニア。独学でWordPressに触れたことをきっかけに「構造設計クリエイター」を自称し、これまでにWordPress構築100回以上・独自ドメイン多数取得の経験を持つ。プラグインは目的がなければ入れない方針を取っている。当ブログ(aki7199.com)とは別に、思想サイトakitoyo.jpも運営している。1979年生まれ、いわゆる就職氷河期世代。ストレングスファインダーは2020年・2023年の2回の受診いずれも「収集心」が1位、「戦略性」が2位。

AKITOYOについて、くわしくはこちら →

WordPressの余白が効かない|AIとテーマの規則を確かめた記録

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次