[プロンプトエンジニア]

使える場面、状況の想定

WordPressサイトの修正をしたい時、通常のテキストデータだけでAIに状況を説明しようとすると、どうしても情報が不足してしまいます。AIはあなたのサイトの実際の構造が見えないため、見当違いな回答を返してしまう原因になります。

そんな時は、ブラウザの「検証ツール（デベロッパーツール）」から取得した「HTMLコード」をそのままAIに渡してみましょう。
HTMLには、文書構造だけでなく、CSSやJavaScriptとの関係性なども記されていますので、それらの情報を理解して、的確なアドバイスをくれるようになります。

➡ 以前に解説した「AIに「画像」を見せて現状共有。解決を早める！最速スクリーンショット活用術」と、合わせて活用すると効果は倍増です。

解決プロンプト

（後で解説する、▼ ブラウザ検証ツールの使い方の手順で、HTMLを貼り付けた後に、以下のようなテキストでリクエストを添えてみてください）

[html]
<div class="wp-block-buttons is-content-justification-center is-layout-flex">
<div class="wp-block-button is-style-fill">
<a class="wp-block-button__link wp-element-button" href="/inquiry.php">
お問い合わせはこちら
</a>
</div>
</div>
[/html]

WordPressで、上記のHTMLのリンクボタンの箇所の背景色をオレンジに変更して、上の余白を少し詰めたいです。
これを実現するための追加CSSを作成してください。
もし他に確認が必要な情報があれば、具体的にリクエストしてください。

AIの回答例

まずはシンプルに、以下の追加CSSで実現できます。

/* お問い合わせボタンの背景色をオレンジに変更 */
.wp-block-button.is-style-fill .wp-block-button__link {
    background-color: #f7931e; /* オレンジ */
    border-color: #f7931e;
}

/* ホバー時 */
.wp-block-button.is-style-fill .wp-block-button__link:hover {
    background-color: #e67e00;
    border-color: #e67e00;
}

/* ボタン上の余白を少し詰める */
.wp-block-buttons {
    margin-top: 10px;
}

もし「余白がまだ広い」場合は、margin-top: 10px; の数値をさらに小さく（例：margin-top: 0;）してください。
テーマ側のCSS設定が強く効いていて、色の変更が反映されない場合は !important を付与します。

【さらに調整可能な項目】

• ボタンの角丸や横幅、文字サイズ
• ホバー時のアニメーション
• スマホ表示時のサイズ最適化
• 上下の余白バランスの調整

実際の表示スクリーンショットや、お使いのテーマ名を教えていただければ、よりピンポイントで最適化したCSSを作成できます。

OS・ブラウザ別「検証ツール」でHTMLを取得する最短ショートカットキー

Google ChromeやMicrosoft Edge、Safariなど、主要なブラウザでは、HTMLコードを取得するための「検証ツール（デベロッパーツール）」が標準搭載されています。
ショートカットキーを使って、特定のHTMLを最速でコピー＆ペーストする手順をマスターしましょう。

Windowsの場合（主なブラウザ：Chrome / Edge / Firefox）

• F12 または Ctrl + Shift + I：検証ツールが即座に起動します。

国内シェアの約9割を占めるChromeやEdgeでは共通の操作です。対象の要素、ボタンや見出しの上で右クリック ＞ 検証と操作しても、同じ画面が開きます。

Macの場合（主なブラウザ：Safari / Chrome）

• Option + Command (⌘) + I：検証ツールが起動します。

Macでシェア1位のSafariや、2位のChromeでも共通のショートカットキーです。
※Safariでメニューに「開発」が表示されていない場合は、設定の「詳細」から「メニューバーに“開発”メニューを表示」をオンにしてください。

HTMLをコピーしてAIに貼り付ける手順

検証ツールが開くと、右側（または下側）にHTMLコードが表示されます。
長くて複雑に見えますが、右クリックした箇所のコードがすでに選択（青くハイライト）された状態になっていますので、以下の手順でHTMLのコードを取得しましょう。

1. 検証ツール内で、修正したい箇所のコードを一度クリックし選択。
2. 青くハイライトされた状態で、キーボードのショートカットキーで、コピー（Ctrl + C / Command + C）。

（または右クリックで表示されるメニューから、コピー（Copy） ＞ 外側のHTMLをコピー（Copy outerHTML）をクリック）

3. AIのチャット画面へ移動し、そのまま貼り付け（Ctrl + V / Command + V）。

用意した「▲ 解決プロンプト」を添えて、一緒に送信するだけです。

ポイント解説

もし「どこまでコピーすればいいか」を迷う時には、少し広めの範囲（親要素のdivタグなど）を含めてコピーして渡すと、AIが前後の関係性を正確に理解できるようになるので、おすすめです。ブラウザの「検証ツール」には、CSSやJavaScriptの確認のほか、カスタマイズに役立つ様々な機能も詰まっていますので、積極的に活用するようにしましょう。

注意点

CSSには「優先順位」があります。AIが提案したCSSを追記しても、テーマ側やプラグイン側のCSSの方が強く効いていて、見た目が変わらない場合があります。その時は「反映されませんでした」と伝えるだけでなく、検証ツールで実際に適用されているCSSも取得して、AIへ共有すると、原因特定が進みやすくなります。

[投稿者]

投稿