HTMLタグを反映させずに紹介するには特殊文字を使おう

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

最近はブログでカスタマイズ方法を紹介することが多くなりました。

オシャレにオリジナリティあふれるブログを作る人の参考になればと思っているのですが、せっかくのカスタマイズ方法を紹介しようと思うと困ることがあります。

そのままHTMLタグを書いてしまうと文中で反映されちゃうんですね。

今回はHTMLタグを反映させないで紹介できる方法をお伝えします！

具体例

例えばこのブログのCSSには蛍光ペン効果を出すためのコードを使ってます。

具体的な方法は「蛍光ペン・マーカー風の線を引くCSS」を御覧ください。

mukutto.com

蛍光ペン・マーカー風の線を引くCSS

続きを読む>>

そのHTMLタグを紹介したい場合、本当であればこういうコードを紹介したいんです。

ところがこれをこのまま書いてしまうと

こうやって書くといいですよ

と、こんな風にHTMLが反映されちゃうんですよね。

とりあえずの対策として本来は小文字で書かなきゃいけないところを大文字にすればなんとかなりますけど、あまり見た目がよろしくない。

むむむっ。

特殊文字を使う

そこでご紹介したい方法が特殊文字を使う方法です。

特殊文字というのはホームページを作る時なんかに使う特別な文字のこと。

< > & “

↑タグ入力ではこういう文字を使って表現しますが、これをそのまま入力するとHTMLタグの一部だと認識されてしまいます。

それを防ぐため、この文字はタグの一部じゃなくて単なる文字なんだよ、というのを示すため特殊文字を使おうというわけです。

特殊文字の入力方法

特殊文字の対応（一例）はこのようになっています。

左側の記号を表示させるため、右側の記述方法を書きます。

ちなみに記述方法の文字は全て小文字で入力してください。

具体例

特殊文字を反映させた書き方を比べてみましょう。

↑こうやって入力すると、

<span class=”keikou”>これで大丈夫</span>

ほら、ちゃんとタグは表示されるのにさっきみたいに蛍光ペンが反映されてません。

特殊文字を使うことでタグの一部とは認識されず、単なる文字としか見られてないということです。

エスケープと呼ばれる（らしい）

この方法は専門用語でエスケープと呼ばれる常識的な手段（らしい）です。

SEの人なんかにとっては当然の知識かもしれないですね。いい勉強になりました。

プラグインを使うと重くなる

実はWord Pressにはコードをキレイに紹介するための専用プラグインが存在しています。

Crayon Syntax Highlighter という有名なプラグインなんですが、サイト表示が遅くなるというデメリットがあります。

ページを開くときの快適性を保つためできるだけプラグインを使いたくない！という僕のような人は今回の特殊文字を使う方法を試してみて下さい。

まとめ

特殊文字は他にもたくさんあります。

ë　こんなのとか

ø　こんなのとか

ζ　こんなのとか

░░ こんなのもあります

気になる人はHTMLの特殊文字一覧などを参考にしてみましょう。