このページで分かること
CSS修正の基本
CodexにCSS修正を頼む時の前提と注意点を確認します。
余白調整
上下左右の余白を、対象ブロックだけに絞って直します。
文字サイズ
見出し、本文、注釈、ボタン文字を分けて考えます。
カード幅
PCとスマホでカードやボックスが崩れないよう確認します。
ボタン調整
リンク先を変えず、押しやすさと読みやすさを整えます。
スマホ確認
390px幅で横はみ出しや文字の重なりを確認します。
CodexでCSS修正を頼む前に知っておきたいこと
CSSはサイトの見た目に関わるファイルです。1箇所の修正が他ページに影響することがあり、共通CSSを触る場合は特に慎重に扱います。
対象ページだけに効く修正なのか、サイト全体に効く修正なのかを分け、Codexには対象範囲と確認方法を明確に伝えます。
CSS修正は小さく頼むのが安全
一度に全部直さず、余白だけ、文字サイズだけ、ボタンだけのように分けます。PC確認とスマホ確認もセットにし、共通CSSを触る場合は影響範囲を報告させます。
HTTP 500、404、大きな表示崩れが出た場合は、無理に進めず停止して報告する条件を入れておきます。
Codexに頼みやすいCSS修正
| 修正内容 | 頼みやすさ | 理由 | 確認項目 |
|---|---|---|---|
| 余白調整 | 高い | 対象ブロックを絞りやすい | PC/スマホの余白 |
| 文字サイズ調整 | 高い | 見た目の変化が分かりやすい | 見出しと本文のバランス |
| カード幅調整 | 中 | グリッドやレスポンシブに影響する | 横はみ出し |
| ボタン調整 | 高い | 対象を限定しやすい | 押しやすさ・リンク先 |
| ヘッダー調整 | 注意 | 全ページに影響しやすい | PC/スマホ両方 |
Codexに頼む時に注意が必要なCSS修正
- 共通ヘッダーCSS
- 共通フッターCSS
- 全ページ共通カード
- 大きなレイアウト変更
- display / position / overflow の大幅変更
- !important 多用
- 既存クラスを消す
- CSSだけでHTML構造の問題をごまかす
大きい変更は、先に調査Codexで影響範囲を確認してから実装してください。
CSS修正の悪い指示・良い指示
| 悪い指示 | 問題点 | 良い指示 |
|---|---|---|
| デザインをいい感じに直してください。 | 対象が広すぎ、どのCSSを触るか不明です。スマホ確認、触らないもの、影響範囲も分かりません。 | /codex-web-design/ の「よくある質問」ブロックだけを対象に、カード間の余白を少し広げてください。変更してよいのは対象ブロックに関係するCSSだけです。title、description、canonical、robots、H1、sitemap.xml、robots.txt、ads.txt、AdSenseコード、ニュースJSON、cron、DBは変更しないでください。PC表示とスマホ390px表示を確認し、横はみ出しがないか報告してください。 |
余白を直したい時の頼み方
どこの余白かを指定し、上、下、左右を分けます。PCとスマホで違う場合があるため、余白を広げる目的、狭める目的も書きます。
このページのカード同士の縦余白だけを少し広げてください。PCとスマホ390pxで見た時に詰まりすぎないようにしてください。文字サイズを直したい時の頼み方
見出し、本文、注釈、ボタン文字を分けます。小さくしすぎず、スマホで読めるか確認します。SEOタグやH1そのものは変えません。
見出し文言は変えずに、カード内の説明文だけ少し読みやすいサイズに調整してください。H1やtitleは変更しないでください。カードやボックス幅を直したい時の頼み方
カードグリッド、横幅、折り返し、1列/2列/3列の条件を決めます。スマホで1列にし、横スクロールを出さない指定が大切です。
PCでは3列、スマホ390pxでは1列になるようにカード幅を調整してください。既存カードHTMLは大きく変えず、CSS中心で対応してください。スマホ表示のCSS修正で見ること
- 横はみ出し
- カードが1列になるか
- 表が読めるか
- ボタンが押しやすいか
- 画像が切れていないか
- ヘッダーとロゴが重なっていないか
- 文字が小さすぎないか
- ニュース欄が長すぎないか
詳しい考え方は CodexでWebデザイン修正を頼む方法 と 公開前後チェック も参考にしてください。
既存CSSを壊さないための注意点
- 既存クラスを消さない
- 全体に効くCSSをいきなり変えない
- 似た既存ブロックをコピー元にする
- 新しいCSSを足す場合はスコープを限定する
- 不要な !important を避ける
- 変更前後の差分を報告させる
CSS修正後の確認チェックリスト
- 対象ページが 200 OK
- CSSが 200 OK
- PC表示で崩れていない
- スマホ390pxで横はみ出しなし
- 内部リンク404なし
- 画像404なし
- title / description / canonical / robots / H1 が維持
- noindexなし
- sitemap.xml変更なし
- robots.txt変更なし
- ads.txt変更なし
- AdSenseコード変更なし
- 変更ファイルが想定内
- 触っていないファイルが報告されている
Codexに渡すCSS修正テンプレート
━━━━━━━━━━━━━━━━
Codex作業依頼
CSS最小修正
━━━━━━━━━━━━━━━━
目的
対象ページのCSSを最小修正し、見た目を整えてください。
対象サイト
対象URL
対象ファイル
修正したい場所
今の問題
参考にする既存ページ・既存ブロック
変更してよいもの
変更してはいけないもの
・title
・meta description
・canonical
・robots
・H1
・sitemap.xml
・robots.txt
・ads.txt
・AdSenseコード
・Analyticsコード
・Search Console確認ファイル
・DB
・cron
・.htaccess
・GitHub設定
・Secrets
PC表示で確認すること
スマホ390pxで確認すること
CSS確認
内部リンク確認
画像確認
SEOタグ維持確認
停止条件
報告書形式
━━━━━━━━━━━━━━━━よくある質問
- CodexでCSS修正はできますか？
- できます。対象ページ、対象CSS、確認項目を明確にすると安全です。
- 共通CSSを触らせても大丈夫ですか？
- 影響範囲が広いため注意が必要です。先に調査し、確認対象ページを決めてから修正します。
- スマホ表示も直せますか？
- 横はみ出し、カード崩れ、表の読みづらさなどは修正対象にできます。390px確認を入れましょう。
- !important を使ってもいいですか？
- 多用は避けます。既存CSSの構造を確認し、必要最小限にします。
- CSS修正後に何を確認すればいいですか？
- 対象ページ、CSS、PC/スマホ表示、内部リンク、画像、SEOタグ、noindex、AdSenseコード維持を確認します。
- HTMLも一緒に変えてよいですか？
- 必要な場合はありますが、CSS修正とHTML構造変更は分けて報告させると確認しやすくなります。
- SEOタグは変えない方がいいですか？
- CSS修正では変えない指定にするのが安全です。