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

Web・PC

あーりーです。

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

 

その記事が「HTMLのタグをそのまま表示するには」です。

 

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

ダブルクォートとは

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

<body bgcolor="#ffffff">

 

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

これ

&quot;

シングルクォートとは

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

 alert('Yes');

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

これ

&#39;

WordPressだとうまくいかない

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

 

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

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

 

それが…

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

半角で表示したいのに全角になる

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

 

でも…

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

 

こんな感じで…

<body bgcolor=#ffffff>

 

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

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

解決法は<PRE>タグ

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

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

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

うまくいく手順

手順はこうです。

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

2.<PRE></PRE>タグを記述する

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

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

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

6.記事を投稿(公開)する

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

 

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

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

 <body bgcolor="#ffffff">

 

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

めでたし、めでたし。

補足

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

タイトルとURLをコピーしました