※入力内容はブラウザ上で処理されます。外部サーバーへ送信されることはありません。
HTML特殊文字変換ツールについて
このツールは、HTMLタグや記号を、ブログ記事やコード表示で使いやすい実体参照へ変換するためのWebツールです。
HTMLコードを記事内にそのまま貼り付けると、タグとして解釈されて表示が崩れたり、コードとして見せたい部分が画面に表示されなかったりすることがあります。そうしたときに、< や > などの記号を実体参照へ変換して、HTMLをテキストとして表示しやすくします。
変換はブラウザ上で行われます。入力した内容が外部サーバーへ送信されたり、保存されたりすることはありません。
使い方
- 入力欄に、変換したいHTMLコードや文字列を貼り付けます。
- 用途に合わせて、3つの変換ボタンから1つを選びます。
- 変換後のコードが下の欄に表示されます。
- 内容を確認し、「結果をクリップボードにコピー」ボタンでコピーします。
ブログ記事にHTMLタグをコードとして表示したい場合や、WordPressの本文内でHTMLを説明用に掲載したい場合に使えます。
変換できる文字
本ツールでは、選んだ変換モードに応じて、以下の文字をHTMLの実体参照へ変換します。
| 変換前 | < > の基本変換 | & と < > の変換 | フル変換 |
|---|---|---|---|
& | 変換しない | & | & |
< | < | < | < |
> | > | > | > |
" | 変換しない | 変換しない | " |
' | 変換しない | 変換しない | ' |
変換モードの使い分け
< > の基本変換
< と > だけを変換します。HTMLタグを記事内で見せたい場合に使いやすいモードです。すでに & を含むコードを大きく変えたくないときにも向いています。
& と < > の変換
&、<、> を変換します。HTMLコードを記事内に表示するための基本的なエスケープとして使えます。
フル変換
&、<、> に加えて、ダブルクォーテーションとシングルクォーテーションも変換します。属性値やサンプルコードなど、引用符まで含めて表示用に整えたい場合に使います。
このツールが役立つ場面
- HTMLタグを記事内でコードとして表示したいとき
<div>や<p>などのタグを、実際のHTMLとしてではなくテキストとして見せたい場合に使えます。 - WordPressの記事でコード解説を書くとき
ブロックエディターやカスタムHTMLの説明で、HTMLコードをそのまま掲載したいときに役立ちます。 - 表示崩れを避けたいとき
HTMLタグがブラウザに解釈されるのを防ぎ、記事内でコード例として表示しやすくします。 - クリックだけで変換したいとき
変換したい文字列を貼り付けてボタンを押すだけで、用途に合わせたエスケープ結果を取得できます。
利用時の注意点
すでに実体参照へ変換済みの文字列を再度変換すると、二重エスケープになる場合があります。たとえば、変換済みの < に対して & を含む変換を行うと、意図した表示と変わることがあります。
広告コード、アフィリエイトリンク、外部サービスの埋め込みコードなどは、実際に動作させる用途と、記事内で表示する用途で扱いが異なります。動作させるコードを変換すると、そのままでは動かなくなることがあります。コードを「表示する」のか「実行する」のかを確認してから使用してください。
ログイン不要、登録不要、無料で使えます。
コメント