データベースに戻る
プログラミング・開発
中級
無料版

ChatGPTでブログの修正CSS案を出す方法

見た目の困りごと、困る画面、対象箇所のHTML、分かる範囲のCSSをChatGPTに渡し、ブログの修正CSS案を出す方法。見出し、余白、文字サイズ、スマホ表示などを当てずっぽうで触らず、小さく試しながら直したいときに使いやすい。

解決したい課題
  • 困りごとは分かっても、原因がHTML構造なのかCSS指定なのか切り分けにくい。
  • どのセレクタに効く修正なのか分からないまま触りやすい。
  • 検索で見つけたCSSをそのまま貼ると、別ページや別パーツまで崩れることがある。
  • PCではよくてもスマホで崩れる、またはその逆が起きやすい。
  • テーマ依存が強く、一般論だけでは安全に直しにくい。

ブログの見た目を直したくても、どのCSSをどう直せばよいか分からず、検索で見つけたコードをそのまま貼って崩すのが不安で手が止まりやすい。

期待される効果
  • 症状ベースで原因候補を絞れるため、先に何を見るべきか分かりやすい。
  • 変更箇所と意図が明示されるので、修正理由を追いやすい。
  • 小さく試すCSS案を優先するため、大きく崩すリスクを減らしやすい。
  • PCとスマホのどちらで困るかを分けて整理できる。
  • プレビュー確認前提の流れにできるため、安全寄りに進めやすい。

困りごと、現状HTML、分かる範囲のCSSをもとに、原因候補、確認すべきポイント、最小変更の修正CSS案、試す順番をまとめて返すことで、当てずっぽうではなく小さく試しながら見た目を直しやすくなる。

対象ツール

ChatGPT

プロンプト

ブログの見た目の困りごとに対して、現状確認前提で安全寄りの修正案を出してください。いきなり全面書き換えはせず、小さく試せるCSSを優先してください。 【入力】 - 困りごと: ここに入力 例: 見出しが弱く見える / 本文の行間が詰まる / ボックス内の余白が狭い / スマホで文字が小さくて読みにくい - 困る画面: ここに入力 例: PC / スマホ / 両方 - 対象箇所のHTML: ここに入力 - 現在のCSS: 分かる範囲で入力 - 触れる場所: ここに入力 例: 追加CSSのみ / 子テーマのCSS編集可 / HTMLは少し触れる 【出力ルール】 1. まず原因候補を最大3つに絞ってください。 2. 各原因候補ごとに、どこを確認すべきかを具体的に書いてください。 3. 修正案は『小さく試せる順』で最大3案まで出してください。 4. 各修正案ごとに以下をセットで出してください。 - 変更対象になりそうなセレクタ - 修正の意図 - コピペ用CSS - 影響しそうな範囲 - 試す順番 5. 現状HTML/CSSだけでは特定しきれない場合は、推測と断定を分けて書いてください。 6. 関係ない場所まで崩れにくいよう、できるだけ対象を絞ったセレクタで出してください。 7. !important の多用、全面リセット、テーマ全体を書き換える提案は避けてください。 8. 最後に『適用前チェック』『適用後チェック』を短く出してください。 【禁止】 - 今のコードを確認せずに断定的に全面修正すること - 大規模なCSSの書き換え - HTML構造を無視した提案 - 影響範囲の説明なしでCSSだけ出すこと 出力は日本語で、初心者〜中級者が試せる実務向けにまとめてください。

実践手順

1
困りごとを1つに絞る。最初は『見出しが弱い』『余白が狭い』『スマホで読みにくい』のように1症状だけ扱う。
2
対象箇所のHTMLと、分かる範囲のCSSを用意する。正確に取れなくても、該当ブロック周辺を拾う。
3
困る画面がPCかスマホか両方かを決めて、promptの入力欄を埋める。
4
ChatGPTにpromptを渡し、原因候補と確認ポイントが自分の症状に合っているか先に確認する。
5
出てきた修正案の中から、最も小さく試せる案を1つだけ選ぶ。
6
変更前のコードを保存したうえで、その案だけを追加してプレビュー確認する。
7
問題がなければ採用し、何を直したかをメモして再利用できるよう残す。

出力サンプル

入力例: 困りごと=スマホで記事本文の行間が詰まって読みにくい / 困る画面=スマホ / 対象HTML=<div class="entry-content"><p>本文...</p></div> / 現在のCSS=.entry-content p { margin-bottom: 0.6em; line-height: 1.5; } / 触れる場所=追加CSSのみ。出力例: 原因候補として『line-heightが狭い』『段落間隔が短い』などが出て、最初に試す案としてスマホ時だけ .entry-content p の line-height と margin-bottom を少し広げるCSSが返る。

注意点

このハックは、今あるHTMLやCSSを見ながら小さく直すことが前提です。テーマ依存が強いため、一般的に正しそうなCSSでもそのまま効かない、または関係ない場所まで効くことがあります。必ず変更前の状態を残し、広すぎるセレクタや一気に複数案を入れる使い方は避けてください。公開前はPCだけでなくスマホ表示も確認し、副作用がないかを見る運用にしたほうが安全です。

共有

Xで共有

関連ハック

2026-03-11| ID: hack_0018