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

使える場面、状況の想定

はじめてWordPressを使う方や、クラシックエディター（旧エディタ）からブロックエディターに乗り換えたとき、HTMLコードを直接編集したいのに、管理画面上で「切り替えボタンが見当たらない、コードエディターの表示はどこ？」と、迷ってしまった場面を想定しています。

コードエディターは、部分的なデザインやレイアウト調整のために、特定のブロックのHTML構造を確認・変更するのに大変便利な機能です。

まずは、AIに「画像」を見せて現状共有。解決を早める！最速スクリーンショット活用術を参考に、管理画面（投稿記事や固定ページの編集画面）のスクリーンショットを準備してください。
ブロックエディターの画像をAIのチャット欄に貼り付けて、目的の操作手順や設定方法をChatGPTに解説してもらいましょう。

【スクショ画像】

解決プロンプト（質問）

（編集画面のスクリーンショットを貼り付けた後に、以下のように指示してください）

# 質問
この画像に写っている範囲で、
HTMLコードを直接編集できる「コードエディター」に切り替えるボタン、またはメニューが
どこにあるか教えてください。

専門用語を使わず、画像内の「どの位置」にある「何というボタン」をクリックすればよいか、ステップを順番に指定してください。
切り替えのショートカットキー（Windows/Mac）があれば、合わせて教えてください。

AI・ChatGPTの回答例

コードエディターに切り替える方法

この画像に写っている範囲では、「コードエディター」そのものは表示されていません。ただし、そこへ切り替えるためのメニューを開くボタンは写っています。

手順

1. 画面右上の「︙（点が3つ並んだボタン）」をクリック

   場所は、

   • 画面のいちばん右上付近
   • 青い「公開」ボタンの少し左
   • 右側の設定欄（投稿／ブロック）の上あたり

   にある 「︙」ボタン です。

2. 開いたメニューの中から「コードエディター」をクリック

   「︙」を押すとメニューが開きます。

   その中にある

   「コードエディター」

   をクリックすると、HTMLを直接編集する画面へ切り替わります。

---

この画像だけで見える範囲の説明

画像内で実際に見えているのは、

• 「︙（点が3つ）」ボタン → 見えている
• 「コードエディター」という項目 → まだ見えていない（︙を押した後に表示される）

という状態です。

---

ショートカットキー

WordPressのブロックエディターでは、通常次のショートカットで切り替えできます。

OS	ショートカット
Windows	Ctrl + Shift + Alt + M
Mac	⌥ Option + ⌘ Command + Shift + M

※ WordPressのバージョンや管理画面の設定によっては動作しない場合があります。その場合は右上の「︙」メニューから切り替えてください。

画像で指し示しながら説明したほうが分かりやすければ、該当ボタンの位置に印を付けた画像も作れます。

ポイント解説

このAIプロンプトは、コードエディターの場所に限らず、ブロックエディターの操作・設定方法、基本的な使い方全般に広く応用できますので、ぜひ以下のテクニックも合わせてマスターしてください。
➡ WordPressのブロックエディタの使い方・操作方法をAIに質問してみる

AI・ChatGPTからの回答の最後に「画像で指し示しながら説明したほうが分かりやすければ、該当ボタンの位置に印を付けた画像も作れます。」という提案があったので、続きのプロンプトで「それでは、画像の作成をお願いします。」とだけ入力してみました。

出力された画像が以下です。

驚くほど完璧な出力結果ですね。
もしかすると、もう人間より丁寧なサポートを受けられるのかもしれません。

注意点

このAIの回答例は、出来るだけデフォルト設定に近いChatGPTの応答をシミュレーションしています。生成AIは、これまでの会話の履歴やパーソナライズ設定によって、ユーザーごとに異なる反応をするということを覚えておいてください。

また、コードエディターを用いる際の注意点としては、もともとビジュアルエディター（ブロックエディターの標準編集画面）で作ったページのコードを直接編集すると、表示崩れが発生するリスクがあるという点です。
元のHTMLコードをバックアップし、リビジョン機能を用いながら、安全に修正作業を行うようにしてください。

[投稿者]

投稿