あーりーです。
ずいぶん前になりますが、HTMLをブラウザで開いたときに、タグのマークである < > を表示させる方法をメモしました。
その記事が「HTMLのタグをそのまま表示するには」です。
今回は、ダブルクォートやシングルクォートをそのままブラウザで表示する方法をメモしておきます。
ダブルクォートとは
ダブルクォートとは、HTMLなどでもよく使われる、この赤い部分のマーク(?)のことです。
<body bgcolor="#ffffff">
ダブルクォートをブラウザ上で表示させるには、HTMLに以下のように記述します。
これ
↓
"
シングルクォートとは
シングルクウォートは、この赤い部分のことです。
alert('Yes');
シングルクウォートをブラウザ上で表示させるには、HTMLに以下のように記述します。
これ
↓
'
WordPressだとうまくいかない
ここから先の話は、ぼくだけの何らかの特殊な環境によるものなのか、それとも一般的にそうなのかわかりませんが、覚えておきたいことなのでメモとして書いておきます。
上に書いた記述方法を、テキストエディタでやるぶんには、うまくいくんです。
HTMLのソースをメモ帳などで開いて「"」と書いて保存してブラウザで開くと、ちゃんと半角のダブルクォートとして表示されます。
それが…
なぜかWordPressだとうまくいかないんです。
半角で表示したいのに全角になる
WordPressのテキスト編集モードで「"」と記述して、ビジュアル編集モードに戻ったときは、ちゃんと半角で表示されるんです。
でも…
実際に投稿してみると(あるいはプレビューを見てみると)、どうしても全角のダブルクォートとして表示されてしまうんです。
こんな感じで…
↓
<body bgcolor=“#ffffff“>
このダブルクォート(赤い部分)は全角です。
半角じゃないと意味がないのに…。
解決法は<PRE>タグ
その解決法がわかったので、メモしておきます。
試しに<PRE>タグを使ってみたんです。
すると、うまくいきました!
うまくいく手順
手順はこうです。
1.WordPressの記事投稿画面でテキスト編集モードにする
2.<PRE></PRE>タグを記述する
3.一度、ビジュアル編集モードに戻る
4.さっき<PRE>タグを記述した箇所に枠線ができている
5.その枠線の中に、ダブルクォートを含んだコードを書く
6.記事を投稿(公開)する
※投稿の前に、プレビューで確認することをオススメします
これでダブルクォートがちゃんと半角で表示されます。
上の方法で記述したのが、これです。
↓
<body bgcolor="#ffffff">
このダブルクォート(赤い部分)はちゃんと半角です。
めでたし、めでたし。
補足
この記事は2017年4月25日に書いています。その後のWordPressのバージョンの更新や、閲覧するみなさんの環境によっては、もしかすると記事内の「全角」だの「半角」だのという記述が、現実と違ってくるかも知れません。その際は、どうかご容赦を。