タグ: AI, AI活用術, CSS, Firefox, Google Chrome, HTML, Mac, Microsoft Edge, Safari, Windows, WordPress, カスタマイズ, ショートカットキー, ブラウザ, プロンプト, 検証ツール・デベロッパーツール
- このトピックには0件の返信、1人の参加者があり、最後に
プロンプトエンジニアにより1日、 3時間前に更新されました。
-
投稿者投稿
-
5月 9, 2026 5:21 pm #1429
プロンプトエンジニアモデレーター使える場面、状況の想定
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のコードを取得しましょう。- 検証ツール内で、修正したい箇所のコードを一度クリックし選択。
- 青くハイライトされた状態で、キーボードのショートカットキーで、コピー(Ctrl + C / Command + C)。
- AIのチャット画面へ移動し、そのまま貼り付け(Ctrl + V / Command + V)。
(または右クリックで表示されるメニューから、コピー(Copy) > 外側のHTMLをコピー(Copy outerHTML)をクリック)
用意した「▲ 解決プロンプト」を添えて、一緒に送信するだけです。
ポイント解説
もし「どこまでコピーすればいいか」を迷う時には、少し広めの範囲(親要素のdivタグなど)を含めてコピーして渡すと、AIが前後の関係性を正確に理解できるようになるので、おすすめです。ブラウザの「検証ツール」には、CSSやJavaScriptの確認のほか、カスタマイズに役立つ様々な機能も詰まっていますので、積極的に活用するようにしましょう。
注意点
CSSには「優先順位」があります。AIが提案したCSSを追記しても、テーマ側やプラグイン側のCSSの方が強く効いていて、見た目が変わらない場合があります。その時は「反映されませんでした」と伝えるだけでなく、検証ツールで実際に適用されているCSSも取得して、AIへ共有すると、原因特定が進みやすくなります。
-
投稿者投稿
- このトピックに返信するにはログインが必要です。