\ バックスラッシュになる原因と対処方法">

エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      2018/03/21

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

 

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編集のポイント解説」に記事を書いていますのであわせて参照してください。
 
 

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

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


 

対処方法2・フォントの 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属性を指定する必要がある点です。
「対処方法その1」と比較してメリットが見いだせません。
 
強いてメリットを上げるとすれば、「¥」を和文フォントとして表示させますので、日本語の見慣れたフォントで表示させることが可能という点です。
 
20141106_wp_01
 
ただ、この点も「¥25,980」という表記の場合は、この点も数字は欧文フォントで表示されながら、「¥」だけ和文フォントで表示されるという状況になりますので、これをどうとらえるかによるでしょう。
 
 

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

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

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

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

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

 - WordPress

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

XAMPP環境で WP-DBMANAGERでの復元でDBが壊れる

XAMPP環境で WordPressの WP-DBMANAGERを利用して DBの復元をしたら DBが壊れた。

Advanced custom Fieldsのフィールドグループを簡単に複製する方法

Advanced custom Fieldsのフィールドグループの複製の方法の解説。XMLのExport、インポートする機能を利用して複製します。

Unveil Lazy LoadでWordPressを高速化!SEO効果絶大でPVもアップ!

WordPressの表示を高速化するUnveil Lazy Loadの紹介。利用するJSを見直し高速化を徹底的に追求したプラグイン。入れるだけで高速化するので使わない手はない!

P3(Plugin Performance Profiler)で負荷が高いプラグインを調査し表示スピードアップ!

まずは正確に現状把握を!P3(Plugin Performance Profiler)を使ってプラグインの処理時間を確認!簡単操作で対応すべきプラグインが一目瞭然になります!

FC2からWordPressに引越しの際のデータ加工方法の解説

FC2からWordPressに引越しの際にデータを加工する必要がありますが、その加工方法の詳細を解説。秀丸の正規表現による置換を使い作業時間も軽減する方法や加工のポイントも解説。

WP Customer ReviewsでWordPressにオリジナルの口コミサイトを構築

口コミサイトを構築するためのプラグイン。独自フォームによるレビュー、評価点を投稿でき、入力項目の追加もできます。

WordPressのウィジェットにGoogle+ページのバッジ編集方法

Google+ページの特徴(Facebook、Mixiとの違い)や構築のメリット(Google対策)、登録、バッジの編集方法の解説。

WordPressのおすすめの確認画面付きお問い合わせフォームプラグイン・MW WP Form

MW WP Formは確認画面が付いているオススメのフォームプラグインです。企業サイトを CMSとして構築する際にも利用できる実力派です。

AdminerはWordPressのデータベース管理プラグインの決定版!

データベース管理プラグインはAdminerがあれば他に必要ありません。なぜならDB管理ツールAdminerと同じものをプラグインとして提供しているからです。

ob_start、ob_get_contentsを利用しショートコード内でinclude・WordPressプラグイン開発

WordPressのプラグインやショートコードの関数作成でテンプレートをincludeする際に利用するob_start関数、ob_get_contents関数を紹介。