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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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

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

具体的なHTMLタグを使って

このタグをコピペすれば簡単にマネできるよ

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

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

スポンサーリンク

具体例

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

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

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

2017.03.09

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

Ex

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

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

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

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

むむむっ。

 

特殊文字を使う

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

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

< > & “

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

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

特殊文字の入力方法

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

記号 記述方法
< &lt;
> &gt;
& &amp;
&quot;

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

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

具体例

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

Ex2

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

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

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

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

例えば僕の場合だとさらに枠で囲んでタグを紹介したりします。

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

こうすることで普通の文章とタグの区別も付きやすいし見た目もスマートですな。

エスケープと呼ばれる(らしい)

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

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

頭がよくなってる気がする!(嘘

 

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

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

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

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

スポンサーリンク

まとめ

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

ë こんなのとか

ø こんなのとか

ζ こんなのとか

░░ こんなのもあります

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

▐▌▄▀◊▒░▒░☼♪

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!

ABOUTこの記事をかいた人

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム