HTMLでダブルクォート、シングルクォートをそのまま表示

あーりーです。

ずいぶん前になりますが、HTMLをブラウザで開いたときに、タグのマークである < > を表示させる方法をメモしました。

今回は、ダブルクォートやシングルクォートをそのままブラウザで表示する方法をメモしておきます。

ダブルクォートとは

ダブルクォートとは、HTMLなどでもよく使われる、この赤い部分のマーク（？）のことです。

<body bgcolor="#ffffff">

ダブルクォートをブラウザ上で表示させるには、HTMLに以下のように記述します。

これ
↓
"

シングルクウォートは、この赤い部分のことです。

 alert('Yes');

シングルクウォートをブラウザ上で表示させるには、HTMLに以下のように記述します。

これ
↓
'

ここから先の話は、ぼくだけの何らかの特殊な環境によるものなのか、それとも一般的にそうなのかわかりませんが、覚えておきたいことなのでメモとして書いておきます。

上に書いた記述方法を、テキストエディタでやるぶんには、うまくいくんです。

HTMLのソースをメモ帳などで開いて「"」と書いて保存してブラウザで開くと、ちゃんと半角のダブルクォートとして表示されます。

それが…

なぜかWordPressだとうまくいかないんです。

WordPressのテキスト編集モードで「"」と記述して、ビジュアル編集モードに戻ったときは、ちゃんと半角で表示されるんです。

でも…

実際に投稿してみると（あるいはプレビューを見てみると）、どうしても全角のダブルクォートとして表示されてしまうんです。

こんな感じで…
↓

このダブルクォート（赤い部分）は全角です。

半角じゃないと意味がないのに…。

その解決法がわかったので、メモしておきます。

試しに<PRE>タグを使ってみたんです。

すると、うまくいきました！

手順はこうです。

１．WordPressの記事投稿画面でテキスト編集モードにする

２．<PRE></PRE>タグを記述する

３．一度、ビジュアル編集モードに戻る

４．さっき<PRE>タグを記述した箇所に枠線ができている

５．その枠線の中に、ダブルクォートを含んだコードを書く

６．記事を投稿（公開）する

※投稿の前に、プレビューで確認することをオススメします

これでダブルクォートがちゃんと半角で表示されます。

上の方法で記述したのが、これです。
↓

 <body bgcolor="#ffffff">

このダブルクォート（赤い部分）はちゃんと半角です。

めでたし、めでたし。

この記事は2017年4月25日に書いています。その後のWordPressのバージョンの更新や、閲覧するみなさんの環境によっては、もしかすると記事内の「全角」だの「半角」だのという記述が、現実と違ってくるかも知れません。その際は、どうかご容赦を。