WordPressで ¥円マークが \ バックスラッシュになる原因と対処方法

¥円マークが \バックスラッシュになる原因はフォント

WordPressで「¥」が「\」に変換される

　
WordPressを使っていて、ある日「¥」が「\」に変わっていることに気づきました。
　
このブログでもその現象がありましたが、技術ブログですので「c:\wordpress\data」といった感じで表示されていても分かってもらえるだろう、とスルーしていました。
　
ですが、このブログではない女性のユーザが多い子育てブログの方でも同じ現象に遭遇することになりました。「価格：¥1,980」とするところが「価格：\1,980」と表示されてしまったのです。
これを見た時に、さすがにこのままスルーするわけにはいかないと思い、今回の対処方法を検討することになりました。
　
　

「¥」が「\」に変換される理由

　
「¥」が「\」に変換される理由は、フォントの問題です。
　
「¥」は
日本語フォントでは「¥」ですが
欧文フォントでは「\」になります。
　
より詳細には
「¥」と「\」はどちらも unicode表記では同じ「U+005c」のコードを使用していて、日本語フォントでは「¥」を表示し、欧文フォントであれば「\」と表示するようになっているためです。
　
これは WordPressの問題なのではなく、HTMLの仕様上そうなっているのです。
　
　
では、なぜ、WordPressでこの「¥」が「\」に変換される問題が多発するのでしょうか？
　
その原因は、WordPressのテーマの cssに記述されているフォントの指定にあります。
　
　
このブログのテーマの場合、
　/{WordPress}/wp-content/themes/{テーマ}/style.css
の中の「font-family:」が記述されている箇所を見てみると、下記の様に記述してあります。
　
—————

—————
　
この内容は利用しているテーマによって全く違いますが、多くのテーマで「font-family:」の最初のフォントとして欧文フォントが指定してあるためにこの問題が発生しています。
（「font-family:」で指定してある先頭から順番に使えるフォントを利用していきます。そして、半角文字の「¥」には欧文フォントが割り当てられ、その他の日本語には日本語フォントが割り当てられていきます。）
　
WordPressが世界中で使われている CMSだからこそ起こる問題ともいえる現象でしょう。
自分で作ったテーマなど、最初から日本語で使うことを前提で作成し、日本語フォントを指定してあるテーマであればこういうことは起こらないことでしょう。
　
　
テーマの編集に関しては、「WordPressのテーマ管理方法とテーマのHTML編集のポイント解説」に記事を書いていますのであわせて参照してください。
　
　

対処方法１・文字参照による表記

　
この記事でも利用している方法ですが、文字参照による表記を利用する方法です。
文字参照（数値文字参照、文字実体参照）の解説は「数値文字参照コード変換ツール（HTML特殊文字コード変換ツール）」に記事を書いていますのでそちらを参照してください。
　
「¥」は「¥」「&#165」
「\」は「&#92」
とそれぞれ文字参照で記述することで希望する記号を編集することができます。
　
ちなみに「¥」は文字実体参照の表記で、「&#165」は数値文字参照による表記です。
「\」には文字実態参照の表記方法はなさそうです。
　
　
この方法のメリットは、「¥」を「¥」に置き換えるだけで確実に表示できるという点です。
　
逆にこの方法の問題点は、「¥」を編集するたびにその都度変換することが面倒である点です。
「¥」の文字参照はなんだったっけ？と毎回悩む場面も出てくるでしょう。
　
そんな場合はプラグイン「AddQuicktag」を使って WordPressのエディタに「¥」をあらかじめ登録しておく、という方法が有効でしょう。
「AddQuicktag」については「AddQuicktagを使って WordPressの投稿を楽にする」に記事を書いていますので、参照してください。
　
もしくは、IMEの辞書に「¥」を登録しておく方法もあるでしょう。
　
WordPressの投稿を複数の端末で行う可能性がある方は前者の方が便利だと思いますが、私の様に WordPressのエディタをあまり使っていない方は後者の方が便利でしょう。
　
　

対処方法２・フォントの lang属性を指定する

　
表示するフォントの言語（lang属性）を指定する方法です。
　
「¥」を表示したい場合
<span lang=”ja”>\</span>
　
「\」を表示したい場合
<span lang=”en”>\</span>
<span style=”font-family: Arial;”>\</span>
　
ただし、これだけではブラウザの設定、テーマの設定によっては正しく表示されない場合がありますので、下記の設定を「style.css」に追記しておきましょう。（フォントの指定は、それぞれのテーマに記載してあるフォントを指定しましょう。）
　
—————

—————
　
「style.css」は先ほど記載しましたが下記になります。
　/{WordPress}/wp-content/themes/{テーマ}/style.css
　
追加する場所は、先に書いた「font-family」が指定してある行の下あたりに追加しておけばいいでしょう。
　
　
この方法のデメリットは、「style.css」に設定を追加する必要がある上に、入力する際も「spanタグ」で lang属性を指定する必要がある点です。
「対処方法その１」と比較してメリットが見いだせません。
　
強いてメリットを上げるとすれば、「¥」を和文フォントとして表示させますので、日本語の見慣れたフォントで表示させることが可能という点です。
　

　
ただ、この点も「¥25,980」という表記の場合は、この点も数字は欧文フォントで表示されながら、「¥」だけ和文フォントで表示されるという状況になりますので、これをどうとらえるかによるでしょう。
　
　

対処方法３・そもそも欧文フォントを指定しない

　
この方法は対処療法ではなく、根本的な問題点を解決する方法です。
　
この問題が発生する原因が、欧文フォントが先に指定してあるために起こることであるため、そもそも欧文フォントを指定せず、日本語フォントだけを指定するという解決方法です。
　
個人的にも、「そもそも日本語の記事なので、全て日本語フォントで表示することに何か不都合があるのだろうか？」と思いますので、思い切って「style.css」に記述してある「font-family」の指定をすべて日本語フォントにしてしまうというこの方法が簡単なんじゃないかと思います。
　
最初に書いた「font-family」の記述を例にとると、欧文フォントの「arial, helvetica, 」部分を削除し、下記の様に設定することで、全て日本語フォントで表示されるようになります。（「osaka」は MacOSの標準日本語フォントです。）
　
—————

—————
　
この方法の最大のメリットは、一度設定するとそれ以降の変換作業が必要ない、という点です。
普通に「¥」を入力すれば「¥」が表示されるようになります。
　
ただ、この方法の最大のデメリットは、「\」の文字参照である「&#92」を入力しても「¥」が表示されてしまう点です。
なぜなら、ほとんどの日本語フォントには「\」が存在しないからです。
　
とはいえ、「\」を編集する必要があるブログを書く方は非常に限られているんじゃないかと思いますので、これが理由でこれを選択しない理由はほぼないでしょう。
今のところこのブログでも「\」を編集する必要はありませんでしたので。
　
また、「style.css」の編集などをしたことがない方は、心理的なハードルが高い作業であることは否めません。
　
　

WordPressで「¥」が「\」になる対応のまとめ

　
今回の記事の WordPressで「¥」が「\」に変換されることの対応としては、「¥」を使う頻度が多ければ 3番の対応も検討していいと思いますが、「¥」を使う機会もそれほど多くないんじゃないかと思いますので、1番の対処療法で問題ない場合がほとんどじゃないかと思います。
　
ちなみに、WordPressには他にも置き換わってしまう文字がありまして、そちらに関してはまとめ記事として「WordPressの記事編集で文字が自動変換される要注意な文字列」を、詳細な解説記事として「WordPressでダブルクォートなどの文字が自動変換？原因と対処方法」を記事にしていますのであわせて参考にしてください。
また、文字参照（数値文字参照、文字実体参照）の解説と、変換ツールに関しての説明は「数値文字参照コード変換ツール（HTML特殊文字コード変換ツール）」に記事を書いていますのでそちらを参照してください。