HTML の文字化けを回避する「数値文字参照」「文字実体参照」とは
ハートマーク（♥）や丸付き数字（①）は特殊な扱いとなっており、一昔前は表示するのに手間がかかりました。
現在、WordPress のように文字コードが UTF-8 で作成されたサイトであれば、変換して出てくる記号をそのまま使えます。
WordPress の文字コード（UTF-8）と改行コード（LF）
通常のテキストと同じく、以下のように色や大きさを CSS で変更するのも可能なので、表現の幅が広がりますよね。
♥
しかし、一部システム・環境によっては依然として文字化け、あるいは正しく表示されません。そのようなときは、「文字参照」と呼ばれる方法を使えば解決できます。
詳しく見ていきましょう。
文字参照とは
文字参照とは、Web サイト（HTML）で直接記述できない文字を表示させる方法で、次の2つがあります。
- 数値文字参照（or 文字参照）
- 文字実体参照（or 実体参照）
ハートマークは、数値文字参照でも文字実体参照でも表示できます。
| 数値文字参照 | ♥ |
|---|---|
| 文字実体参照 | ♥ |
文字どおり「数値文字参照」は数字を使い、「文字実体参照」は英語（略語）を使います。すべて半角英数字で書いてくださいね。
どちらを使ってもかまいませんが、なかには「数値文字参照」でしか表示できない記号もあるので注意しましょう。
記号だけではなく、「x²（エックス二乗）」のような特殊文字も表示できます。
変換時に環境依存文字と書かれていたら要注意
使いたい文字が文字化けを起こすかどうかわからないときは、変換のさいに「環境依存文字」が出てくるかどうかを見てください。
「はーと」を変換してみると、出ていますね。
でも、その横に「unicode」とも併記されています（IME によっては表示されません）。
冒頭でも少し触れましたが、UTF-8 で作成されたサイトであれば unicode の文字をそのまま使えます。
○付きの数字も同じ。20 年前からパソコンを使っているなら、「メールで丸囲み数字は NG ！」と教わった記憶があるかもしれません。
文字コードが「Shift_JIS」になっているサイトは、文字参照を使わないと文字化けしてしまいます。
「UTF-8」でも絶対文字化けしない、とはかぎらないので、もし正しく表示されないときは文字参照を使いましょう。
コピペでOK！よく使う文字参照一覧
よく使われる記号やマークの文字参照一覧を載せておきます。
そのままコピペして使えるので、ブックマークしておくか、IME に登録して使ってください。
| 表示 | 数値文字参照 | 文字実体参照 |
|---|---|---|
| “ | " | " |
| & | & | & |
| < | < | < |
| > | > | > |
| [ | [ | なし |
| ] | ] | なし |
| « | « | « |
| » | » | » |
| © | © | © |
| ² | ² | ² |
| ³ | ³ | ³ |
| ♠ | ♠ | ♠ |
| ♣ | ♣ | ♣ |
| ♥ | ♥ | ♥ |
| ♦ | ♦ | ♦ |
| ◇ | ◇ | なし |
| ♡ | ♡ | なし |
| ♤ | ♤ | なし |
| ♧ | ♧ | なし |
HTMLタグ/HTMLの基本/文字参照 – TAG index
検索しなくてもOK！文字参照変換ツール
すべての文字を登録・記憶しておくのは難しいので、変換ツールをブックマークしておくのがおすすめです。
文字列を入力して変換ボタンを押すだけなので便利ですよ。
まとめ
以上、文字参照の解説でした。
「自分の環境では問題ないけど、他の人が見たら文字化けしている」ということもありますから、記号や特殊文字の扱いには注意したいですね。
＼ 2,000 名以上が購読中 ／
無料メールマガジン
SEO や WordPress に関する最新情報・ノウハウを不定期で配信中
購読お申し込み後、すぐに読めるメンバー限定コンテンツ「ブログ初心者向けキーワード選定法」をお届けします。
