データベースに戻る
プログラミング・開発
中級
無料版
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だけでなくスマホ表示も確認し、副作用がないかを見る運用にしたほうが安全です。
共有
関連ハック
仕事効率化
初級
ChatGPTで質問リストを作る方法
面談、相談、会議、問い合わせの前に、場面や目的をChatGPTに渡して質問リストを作る方法。聞き漏れを減らし、限られた時間で必要な確認を進めたいときに使いやすい。
質問リスト面談準備相談準備確認漏れ防止
日常生活
初級
ChatGPTでプレゼント案を考える方法
相手、関係性、用途、予算、好みをChatGPTに渡し、プレゼント案を考える方法。何を贈ればいいか分からないときに、候補を3〜5個に絞って比較したい場面で使いやすい。
プレゼント選びギフト候補予算内で選ぶ日常生活
日常生活
初級
ChatGPTで冷蔵庫の中身から献立を提案させる方法
冷蔵庫の中身、人数、作れる時間、使いたい食材をChatGPTに渡し、今日の献立候補を提案させる方法。何を作るか決まらないときに、余り物を使いながら手軽に決めたい場面で使いやすい。
献立提案冷蔵庫の中身余り物活用時短ごはん
2026-03-11| ID: hack_0018