ブログでHTMLのコードを紹介しようとして貼り付けたら、コードが消えてリンクや太字になってしまった、ということがあります。
原因は、「<」や「>」がタグの始まりと終わりとして読まれてしまうことです。
これを防ぐには、特殊文字を決まった記号の組み合わせに置き換える「エスケープ」をします。
この記事では、置き換える文字の一覧と順番、ツールで変換する手順、WordPressでコードを載せるときの注意点を紹介します。
この記事で使うHTML特殊文字変換は、当サイトと同じMOTOKI合同会社が作った「WEBツール箱」の1つです。
無料で、会員登録なしで使えます。
最終確認日：2026年9月28日
この記事で分かること
- エスケープが必要な5つの文字と、変換後の形
- 「&」を最初に変換しないといけない理由
- ツールで変換する手順と、元に戻す方法
- WordPressでコードやショートコードを文字として見せる方法
答え｜変換するのは5文字
HTMLで特別な意味を持つ文字は、次の5つです。
| 文字 | 変換後 | 変換が必要な場面 |
|---|---|---|
| & | & | いつでも（いちばん最初に変換する） |
| < | < | いつでも |
| > | > | いつでも |
| “ | " | 属性の値の中に入れるとき |
| ‘ | ' | 属性の値の中に入れるとき |
本文にコードを載せるだけなら、上の3つを変換すれば表示は崩れません。
href=”…” のような属性の値の中に文字を入れるときは、引用符の2つも変換します。
順番が大事｜「&」をいちばん先に変換する
変換後の形は、どれも「&」で始まります。
そのため、「<」を先に「<」に変えてから「&」を変換すると、いま作った「<」の「&」まで変換されてしまいます。
| 変換の順番 | 「<p>」の結果 |
|---|---|
| & → < → >（正しい順番） | <p> |
| < → > → &（間違った順番） | &lt;p&gt; |
間違った順番では「&lt;」のような二重変換の形になり、ページには「<p>」と記号のまま表示されます。
エディターの置換機能で手作業で変換するときは、この順番に気をつけてください。
ツールで変換する｜貼るだけで変換される
- HTML特殊文字変換を開く
- 変換したいコードを貼る
- 「変換の向き」で「特殊文字に変換（エスケープ）」を選ぶ
- 変換結果をコピーする
入力と同時に変換されるので、変換のボタンはありません。
リンクのタグを1行、エスケープした結果です。
「<」「>」「&」に加えて、「引用符も変換する」にチェックが入っているので、「”」も「"」になりました。
変換前の45文字が、変換後は71文字になっています。
下の「ページ上での見え方」は、変換後のコードを貼ったときにページにどう出るかを表しています。
「半角スペースを にする」にチェックを入れると、半角スペースも「 」に置き換わります。
ふつうは使いませんが、スペースを連ねて字下げした部分をそのまま見せたいときに使います。
二重に変換されたときは「元に戻す」
「&lt;」のように「amp;」が重なっていたら、二重に変換されています。
すでにエスケープされた文字列を、もう一度エスケープすると起きます。
「変換の向き」を「元の文字に戻す（アンエスケープ）」にして貼ると、1段階だけ戻せます。
二重に変換された文字列が、1回で正しいエスケープの形に戻りました。
戻した結果をもう一度戻すと、今度は元のタグになります。
amp;という文字自体が原文の場合もあります。回数だけで判断せず、元データと照合して必要な1段階だけ戻します。
WordPressでコードを載せるとき
ブロックエディターの「コード」ブロックに貼るなら、エスケープは自動で行われるので、このツールは要りません。
変換が必要になるのは、次のような場面です。
- カスタムHTMLブロックの中に、コードを文字として見せたいとき
- テーマやプラグインのファイルに、説明用のコードを直接書くとき
- 段落の中に、タグの名前を文字として書きたいとき
- WordPress以外のサイトやメールマガジンに、コードを載せるとき
中でも、「<script>」を含むコードをカスタムHTMLブロックにそのまま貼ると、表示されずにページの中で実行されてしまいます。
例えば、次のコードを見せたいときです。
<script>
alert("test");
</script>このまま貼ると、ページを開いたときに実行されます。
エスケープしてから貼れば、文字として表示されます。
ショートコードは、エスケープでは止まらない
WordPressには、角かっこで囲んだ「ショートコード」という仕組みがあります。
本文に [gallery] と書くと、その場所に画像のギャラリーが表示されます。
角かっこは、HTMLの特殊文字ではありません。
そのため、HTMLのエスケープをしても、ショートコードは文字としては表示されず、そのまま実行されます。
ショートコードを文字として見せたいときは、角かっこを二重にして [[gallery]] と書きます。
こう書くと、ページには外側の角かっこが1組外れた [gallery] が表示され、実行はされません。
なお、コアの「コード」ブロックは、保存するときに「[」を「[」という形に置き換えています。
このサイトのWordPressが読み込んでいるブロックのプログラムで、2026年9月28日にこの処理を確かめました。
コードブロックの中なら、ショートコードが実行されないのはこのためです。
なぜエスケープが必要か｜表示崩れと安全のため
エスケープは、表示を崩さないためだけのものではありません。
お問い合わせフォームなどで利用者が入力した内容を、エスケープせずにページに出すと、悪意のあるスクリプトが実行されてしまいます。
これをXSS（クロスサイトスクリプティング）と呼びます。
WordPressでテーマやプラグインを自作するときは、画面に出す値を esc_html() や esc_attr() に通してから出力します。
このツールは、その変換を手作業で確かめたいときにも使えます。
ツールの限界
- 変換するのは「&」「<」「>」と引用符、指定したときの半角スペースだけ
- 日本語や絵文字は、そのまま残す
- JavaScriptの文字列やURLの中に入れる値の変換には使えない
- 角かっこは変換しないので、ショートコードを止めるには二重の角かっこを使う
URLの中に入れる値の変換は、URLエンコード・デコードで行います。
よくある質問
Q. 貼ったコードはどこかに送られますか？
送られません。
変換処理はブラウザー内で行う設計です。ただし、この説明だけでページ全体や拡張機能による通信まで保証できません。秘密鍵や認証情報を含むコードは貼らず、架空のサンプルで確認してください。
Q. 「'」と「'」はどちらを使えばよいですか？
どちらも「’」を表します。
ツールは「'」を出力します。
「'」は古いHTMLの仕様には無かったので、「'」のほうが幅広い環境で通ります。
Q. コードブロックに貼ったのに表示が崩れます
コードブロックではなく、カスタムHTMLブロックや段落に貼っていないかを確かめてください。
テーマやプラグインのコードブロックを使っている場合は、そのブロックがエスケープするかどうかも確かめます。
自動でエスケープするブロックへ変換済みの文字を貼ると二重変換になります。まず短いサンプルを未変換で貼り、保存後の公開表示を確認します。HTMLソースへ直接埋め込む場合だけ、その出力位置に合うエスケープを行います。
まとめ
- エスケープが必要なのは「&」「<」「>」「”」「’」の5文字
- 「&」をいちばん先に変換しないと、二重変換になる
- 二重に変換されたら、「元の文字に戻す」で1段階ずつ戻す
- WordPressのコードブロックは自動でエスケープするが、カスタムHTMLブロックはしない
- ショートコードを文字として見せるには、角かっこを二重にする
ほかの項目もまとめて点検するなら、「WordPressサイトを自分で点検する手順」で順番と使い分けを解説しています。
ツールの一覧はWEBツール箱にあります。
