ライフハック.net

ブログ記事にHTMLタグをそのまま表示させる方法

WordPressや他のブログサービスなどでブログ記事を書いていてHTMLタグを説明したい場合、そのまま表示させる方法についてメモしておきます。

例えばこういうタグを記事内にそのまま表示させたい場合、どうするか?ということなのですが…。
↓↓↓

<a href="http://xn--eckwa3d3b3a2j.net/" target="_blank">ライフハック.net</a>

こちらはリンクタグなので、普通に書くとリンクに変換されてこうなってしまいますよね。
HTMLタグが機能してしまうからです。
↓↓↓

HTMLタグをそのまま書いてしまうと、「 < 」「 > 」「 & 」「 ” 」などがHTMLとして認識されてしまうため、見たままの文書を表示させるためには別の書き方に変換させる必要があります。

スポンサードリンク


文字実態参照とは

上記の場合、「 < 」→「 &lt; 」  「 > 」→「 &gt; 」 「 & 」→「 &amp; 」のように書き換えれば、そのまま表示させる事が出来るようになります。

このように、コード部分をそのまま文字列として表記することを「文字実体参照(実体参照)」といいます。
※数値の場合は「数値文字参照(文字参照)」

ソースなどを説明したい場合に、これをひとつひとつ直すのは大変なので便利な変換ツールを利用させてもらいましょう。

HTMLタグ 文字実体参照変換ツール

文字実体参照を変換するためのツールを提供しているサイトがあります。
ここで紹介するツールを利用させてもらうと一発変換できてとても便利です。

蓄々HTML実体参照変換 : akiyan.com

HTMLタグ 文字実体参照変換ツールakiyan.com

みんなの知識ちょっと便利帳:HTMLタグ文字実体参照(文字参照)変換ツール HTMLタグエスケープ処理 / HTMLエンコード

みんなの知識ちょっと便利帳:HTMLタグ文字実体参照(文字参照)変換ツール HTMLタグエスケープ処理 / HTMLエンコード

ちょっと長めの文章も一発で変換してくれるのでとても助かります。

スポンサードリンク
URL :
TRACKBACK URL :

コメントをどうぞ

*
*
* (公開されません)

Facebookでコメント

Return Top