WordPressで ¥円マークが \バックスラッシュになる原因と対処方法
2015/12/27
¥円マークが \バックスラッシュになる原因はフォント
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:」が記述されている箇所を見てみると、下記の様に記述してあります。
—————
1 2 3 4 5 |
* { font-family: arial, helvetica, osaka, "MS PGothic", sans-serif; margin: 0px; padding: 0px; } |
—————
この内容は利用しているテーマによって全く違いますが、多くのテーマで「font-family:」の最初のフォントとして欧文フォントが指定してあるためにこの問題が発生しています。
(「font-family:」で指定してある先頭から順番に使えるフォントを利用していきます。そして、半角文字の「¥」には欧文フォントが割り当てられ、その他の日本語には日本語フォントが割り当てられていきます。)
WordPressが世界中で使われている CMSだからこそ起こる問題ともいえる現象でしょう。
自分で作ったテーマなど、最初から日本語で使うことを前提で作成し、日本語フォントを指定してあるテーマであればこういうことは起こらないことでしょう。
テーマの編集に関しては、「WordPressのテーマ管理方法とテーマのHTML編集のポイント解説」に記事を書いていますのであわせて参照してください。
対処方法1・文字参照による表記
この記事でも利用している方法ですが、文字参照による表記を利用する方法です。
文字参照(数値文字参照、文字実体参照)の解説は「数値文字参照コード変換ツール(HTML特殊文字コード変換ツール)」に記事を書いていますのでそちらを参照してください。
「¥」は「¥」「¥」
「\」は「\」
とそれぞれ文字参照で記述することで希望する記号を編集することができます。
ちなみに「¥」は文字実体参照の表記で、「¥」は数値文字参照による表記です。
「\」には文字実態参照の表記方法はなさそうです。
この方法のメリットは、「¥」を「¥」に置き換えるだけで確実に表示できるという点です。
逆にこの方法の問題点は、「¥」を編集するたびにその都度変換することが面倒である点です。
「¥」の文字参照はなんだったっけ?と毎回悩む場面も出てくるでしょう。
そんな場合はプラグイン「AddQuicktag」を使って WordPressのエディタに「¥」をあらかじめ登録しておく、という方法が有効でしょう。
「AddQuicktag」については「AddQuicktagを使って WordPressの投稿を楽にする」に記事を書いていますので、参照してください。
もしくは、IMEの辞書に「¥」を登録しておく方法もあるでしょう。
WordPressの投稿を複数の端末で行う可能性がある方は前者の方が便利だと思いますが、私の様に WordPressのエディタをあまり使っていない方は後者の方が便利でしょう。
対処方法2・フォントの lang属性を指定する
表示するフォントの言語(lang属性)を指定する方法です。
「¥」を表示したい場合
<span lang=”ja”>\</span>
「\」を表示したい場合
<span lang=”en”>\</span>
ただし、これだけではブラウザの設定、テーマの設定によっては正しく表示されない場合がありますので、下記の設定を「style.css」に追記しておきましょう。(フォントの指定は、それぞれのテーマに記載してあるフォントを指定しましょう。)
—————
1 2 3 4 5 6 |
span:lang(ja) { font-family: "MS PGothic"; } span:lang(en) { font-family: "arial"; } |
—————
「style.css」は先ほど記載しましたが下記になります。
/{WordPress}/wp-content/themes/{テーマ}/style.css
追加する場所は、先に書いた「font-family」が指定してある行の下あたりに追加しておけばいいでしょう。
この方法のデメリットは、「style.css」に設定を追加する必要がある上に、入力する際も「spanタグ」で lang属性を指定する必要がある点です。
「対処方法その1」と比較してメリットが見いだせません。
強いてメリットを上げるとすれば、「¥」を和文フォントとして表示させますので、日本語の見慣れたフォントで表示させることが可能という点です。
ただ、この点も「¥25,980」という表記の場合は、この点も数字は欧文フォントで表示されながら、「¥」だけ和文フォントで表示されるという状況になりますので、これをどうとらえるかによるでしょう。
対処方法3・そもそも欧文フォントを指定しない
この方法は対処療法ではなく、根本的な問題点を解決する方法です。
この問題が発生する原因が、欧文フォントが先に指定してあるために起こることであるため、そもそも欧文フォントを指定せず、日本語フォントだけを指定するという解決方法です。
個人的にも、「そもそも日本語の記事なので、全て日本語フォントで表示することに何か不都合があるのだろうか?」と思いますので、思い切って「style.css」に記述してある「font-family」の指定をすべて日本語フォントにしてしまうというこの方法が簡単なんじゃないかと思います。
最初に書いた「font-family」の記述を例にとると、欧文フォントの「arial, helvetica, 」部分を削除し、下記の様に設定することで、全て日本語フォントで表示されるようになります。(「osaka」は MacOSの標準日本語フォントです。)
—————
1 2 3 4 5 |
* { font-family: osaka, "MS PGothic", sans-serif; margin: 0px; padding: 0px; } |
—————
この方法の最大のメリットは、一度設定するとそれ以降の変換作業が必要ない、という点です。
普通に「¥」を入力すれば「¥」が表示されるようになります。
ただ、この方法の最大のデメリットは、「\」の文字参照である「\」を入力しても「¥」が表示されてしまう点です。
なぜなら、ほとんどの日本語フォントには「\」が存在しないからです。
とはいえ、「\」を編集する必要があるブログを書く方は非常に限られているんじゃないかと思いますので、これが理由でこれを選択しない理由はほぼないでしょう。
今のところこのブログでも「\」を編集する必要はありませんでしたので。
また、「style.css」の編集などをしたことがない方は、心理的なハードルが高い作業であることは否めません。
WordPressで「¥」が「\」になる対応のまとめ
今回の記事の WordPressで「¥」が「\」に変換されることの対応としては、「¥」を使う頻度が多ければ 3番の対応も検討していいと思いますが、「¥」を使う機会もそれほど多くないんじゃないかと思いますので、1番の対処療法で問題ない場合がほとんどじゃないかと思います。
ちなみに、WordPressには他にも置き換わってしまう文字がありまして、そちらに関してはまとめ記事として「WordPressの記事編集で文字が自動変換される要注意な文字列」を、詳細な解説記事として「WordPressでダブルクォートなどの文字が自動変換?原因と対処方法」を記事にしていますのであわせて参考にしてください。
また、文字参照(数値文字参照、文字実体参照)の解説と、変換ツールに関しての説明は「数値文字参照コード変換ツール(HTML特殊文字コード変換ツール)」に記事を書いていますのでそちらを参照してください。
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
自サイト内のリンクをショートコードで指定する・アンカーリンク対応版
自サイト内の記事にショートコードで自動リンクを設定する関数のソースコードを提供。Post ID、slugで指定でき、アンカーリンクを設定する場合も対応。
-
ショートコードで簡単解決!カスタムフィールドでソート、抽出条件設定方法
ショートコードを使って固定ページや投稿に特定のカテゴリ一覧を編集する処理に、ソート条件、抽出条件も設定できる処理を作成。カスタムフィールドも条件に利用可。
-
WordPressの記事編集で文字が自動変換される要注意な文字列
記事を編集する際、入力した文字とは違う表示のされ方をする文字、アポストロフィ、ダブルクォート、円マーク、三点リーダ(…)など、その解説と対応方法です。
-
WordPressでダブルクォートなどの文字が自動変換?原因と対処方法
ダブルクォート、シングルクォート、HTMLタグなどが自動変換関数によって入力と違う形で表示されます。原因を2つの関数ごとに説明し、対応方法を3パターン提示します。
-
WordPressのメールフォームはwp_mail()関数でメール送信。スパム対策も
WordPressでメール送信フォームを作成するための関数「wp_mail()」の使い方の解説。CC、BCC、添付ファイルも HTMLメールも設定可能。
-
get_categories、get_termsでカテゴリとタクソノミーのターム一覧の編集方法
get_categories()関数やget_terms()関数を使ってタクソノミーのタームを取得し検索処理の部品を作るプログラム作りその解説をしています。
-
カスタムタクソノミーのターム一覧をウィジェットにショートコードで編集
カスタムタクソノミーに属するターム(カテゴリ)の一覧を wp_list_categories()関数+ショートコードでウィジェットに編集するサンプルプログラムです。
-
WordPressの一覧ページのテンプレートの種類とファイルの設定
ファイル名に従って一覧ページのテンプレートは選択される。ルールに従ってファイル名を付けることで任意のカテゴリ、タクソノミーごとのテンプレートを指定可能。
-
タクソノミーの一覧をショートコードで編集・ソート機能付き・wp_list_categories
カスタムタクソノミーのターム一覧をショートコードで編集する方法の解説です。Category Order and Taxonomy Terms Orderを利用してソート機能を追加したバージョンです。
-
WordPressプログラム全体で定数や変数を利用する場合の設定方法
WordPressで関数を追加するときなど、全体で同じ変数を使いたいと思う場面の対処方法です。変数を記述する関数はfunctions.php、wp-config.phpのいずれか。