ブログ上でHTMLコードを紹介したいときはHTML特殊文字を変換しよう

おすすめ記事ピックアップ

ブログ上でHTMLなどのコードを紹介したいけど、うまく表示できない・・・そんなことよくあります。知っている方は、当たり前の方法ですが、ブログ上でHTMLなどのコードを紹介したい時は、HTMLを特殊文字に変換してpreで囲んで表示させます。

HTMLをそのまま掲載すると、HTMLコードとして扱われてしまい意図しない表示になります。preというコードで囲むと、改行なども維持されるので良く使われます。

実際にやってみましょう。下記サイトを使えば誰でもできます。

指定した文字を文字参照するサイト
http://furimuke.sub.jp/changemoji/

紹介したいHTMLコードをそのまま貼り付けます。

カッコなどを文字参照することで、コードとしての機能を無くします。文字参照とは文字の元のコードであり、ブラウザーで表示されるときは、正しく表示されます。

変換を押します。preで囲んでくれます。

これをそのままブログのHTMLエリアに貼り付ければ完成です。こんな風に表示されます。

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- styles for IE -->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="css/ie/ie.css" type="text/css" media="screen" />
    <![endif]-->

これでも、さらにHTMLや使っている記号に問題があれば、指定した文字を変換できます。!や=も追加すれば、それらも特殊文字に変換できます。

もう面倒くさいから、全部変換してしまえ！なんてこともできます。

指定した文字を文字参照するサイト
http://furimuke.sub.jp/changemoji/