円マーク「￥」がバックスラッシュ「╲」で表示される原因と対処方法【HTMLコードで入力すれば確実に表示可能】

WordPress

2022.11.032019.03.23

円マーク「￥」が、バックスラッシュ「╲」になってしまう。

こんなことで困っていませんか？

この記事を書くのにも、それらの文字を使うので、とても苦労してしまいます(笑)。

最悪、全角で入力すれば表示がおかしくなることはありませんが、どうせなら半角で正しく表示させたいですよね。文字コードとフォントとOSが絡み合って、確実な正解が見つからないのですが、対処法を紹介します。

結論としては、HTMLコード「¥」で入力すれば確実に円マークが表示されます。

円マークとバックスラッシュ
対処の仕方
まとめ

円マークとバックスラッシュ

円マークとバックスラッシュは文字として全く異なります。当たり前ですね。

本来は全く異なる文字ですが、同じ文字コードを利用していた時期があります。

最初の文字コード

PCやスマホで表示される文字は、画像ではなくコード(数字)で処理されます。

最も古い文字コードは「ASCII(アスキー)コード」と呼ばれ、7bit(0～127)で表現していました。128文字しか表現できません。

ASCIIコードは英語のキーボードのキーに数字を割り当てるために作られました。

128文字だけなので、アルファベットと数字、よく使用される記号、制御文字しか割り当てることができません。日本語のような数千文字もある言語は表記することができませんでした。

基本アルファベットなので、ドル記号($)はありますが、円マークはありません。今でも日本以外の国のキーボードに円マークはありません。

円マークがないので、日本ではバックスラッシュの文字を勝手に円マークに置き換えて使用(表示)していました。

これが諸悪の根源です。

日本では勝手に8bitに拡張して半角カタカナを割り当てたりもしていました。

現代の文字コード

現在は、ほとんどの国の言語に対応するためにbit数が拡張されています。bit数を拡張することで何万もの種類の文字を表現できます。(正確には複数バイト文字)

円マークとバックスラッシュも異なる文字として別のコードが割り当てられています。

ここでは詳細を説明しませんが、文字コード体系にいくつか種類があります。

文字コード体系の例

Shift-JIS
Unicode
EUC
Utf-8

最近は少なくなりましたが、WEBページを見ていて、文字化けすることがありますよね？

これは本来の文字コード体系ではない文字コード体系でWEB表示してしまい、ムチャクチャな文字の羅列に見えてしまう現象です。

なぜ円マークとバックスラッシュが正しく表示できないのか

現在の文字コード体系では、きっちり円マークとバックスラッシュが分けられています。

でも未だに表示がおかしくなりますよね。なぜでしょう？

最初の文字コードで説明したように「日本では勝手にバックスラッシュを円マークに置き換えていた」ことが主原因です。

この主原因のために2つの現象が発生します。

キー入力の間違い
表示の間違い

キー入力の間違い

今でもPCのキー入力にはASCIIコードが使われています。

現在販売されているPCの日本語キーボードには円マークがあります。けど、円マークは本来ASCIIコードに存在しません。

つまり、円マークのキーを押してもバックスラッシュが入力されます。

キーボードによっては、円マークとバックスラッシュの両方がキー設定されているものもありますが、どちらも円マークが表示されます。意味があるのか謎です。。

PCの性能も文字の種類も大きく変わっているのに、キーボードだけは初期のPCから全く変わっていません。接続端子がPS/2からUSBやワイヤレスに変わっただけです。

表示の間違い

「ちゃんと円マークで入力されるよ！」と思われますが、実際にはバックスラッシュが入力されています。

なぜ円マークが表示されるのでしょうか？

PCが勝手にバックスラッシュを円マークに変えて表示しているだけです。PCが勝手にと言いましたが、正しくはフォントが表示しています。

フォントは文字コード値に一致した文字を表示させるだけです。

フォントにはたくさんの種類があります。日本語用のフォントでは、今までの慣習に従ってバックスラッシュを円マークとして表示します。例えばMS ゴシックなどの昔から有名なフォントは円マークを表示します。

今までの慣習に囚われず正しい文字で表示するフォントではバックスラッシュが表示されます。日本語を含んでいないフォントもバックスラッシュが表示されます。

推測となりますが、同じフォントでもインストールされているOSによって動作が異なっていると思われます。
例えばWindowsでは昔ながらの円マークに置き換えて表示することが多いのですが、スマートフォンで使われているAndroid OSなどでは正しいバックスラッシュが表示されることが多いです。
スマホは昔ながらのキーボードではなくソフトウェアキーでの入力なので、仕様通りに動作しているからだと思います。

対処の仕方

OSやフォントの違いが影響するので、完璧な対処方法がありません。

具体的な症状ごとにその対処の仕方を紹介します。

症状：円マークがバックスラッシュで表示される

円マークがバックスラッシュで表示される症状です。ほとんどはこの症状で困っていると思います。

価格情報で「¥1,000」などと書いたのにバックスラッシュの「\1,000」で表示されてしまいます。

ほとんどのケースは「PCから投稿したときは円マークなのに、スマホの表示ではバックスラッシュになる」です。自分のPCの表示は円マークなので悩みます。

原因

円マークを入力したつもりなのに、バックスラッシュを入力してしまっていることが原因です。

スマホの表示がおかしい訳ではありません。PCでの入力と表示が日本語環境だと特殊なためです。

対処

これまでの説明の通り、PCのキーボードから直接円マークを入力することはできません。別の方法で正しい円マークを入力します。

キーボードで打ち込んだ文字ではなく、特殊文字として特別なフォーマットで円マークを入力します。

WEBページはHTMLで記述されていることは皆さんご存知だと思います。

HTMLだと例えば「<」などHTMLの文法に直接影響する文字をそのまま文章中に書くことはできません。特殊文字として文章中に書き込む必要があります。

円マークの特殊文字は「¥」または「¥」です。

円マークとバックスラッシュの特殊文字は以下のようにHTMLに書きます。

特殊文字	HTMLコード	ISO数値コード
円マーク	¥	¥
バックスラッシュ	\	\

入力方法としては以下の2種類があります。

WordPressのエディタを「テキスト」モードにして直接HTMLに書き込む

WordPressのエディタを「ビジュアル」モードで編集している場合、HTML入力の機能を利用して入力する

どちらの場合もキーボードの円マークを押すのではなく、HTMLとして「¥」を入力します。

HTMLの記述例

この製品の価格は&yen;1,000です。

上記HTMLの表示例

この製品の価格は¥1,000です。

WordPressのエディタを一度テキストモードからビジュアルモードに変更し、再度テキストモードに変更すると、「¥」ではなく「¥」になることがあります。この文字は「正しい円マークの文字コード」なので問題ありません。「バックスラッシュの文字コードなのに表示だけ円マークになっている文字」ではないので安心してください。

症状：バックスラッシュを入力できない

PCの日本語キーボードではバックスラッシュが入力できません。

本当は入力できているのですが、見た目の表示が円マークになってしまいます。

表示の問題なので、次の「症状：バックスラッシュが円マークで表示される」で説明します。

症状：バックスラッシュが円マークで表示される

日本語の一般的な文章では、ほぼバックスラッシュを使うことがないので、あまり気にしなくても良いかもしれません。

PCの操作説明などを書くときにバックスラッシュを表示させたいが、円マークになってしまうことがあります。

原因

PCの日本語キーボードには円マークのキーがあります。バックスラッシュが印字されているキーもある場合があります。

PCの日本語キーボードの円マーク、バックスラッシュのキーを押した場合、どちらもバックスラッシュのASCIIコードがPCに入力されます。

日本語OSの場合、バックスラッシュのASCIIコードは円マークが表示されます。これが原因です。

対処

ASCIIコード上はバックスラッシュなので、入力は問題ありません。

正しく表示されるように対処します。

日本語だと円マークで表示されるので、バックスラッシュのみ英語のフォントで表示させます。下のHTML記述例の1番と2番です。

HTMLの記述例

0.この「\」はバックスラッシュです。 
1.この「<span style="font-family: arial;">\</span>」はバックスラッシュです。
2.この「<span style="font-family: arial;">&bsol;</span>」はバックスラッシュです。
3.この「<span style="font-family: arial;">&yen;</span>」は円マークです。