『おかえりなさいませ、ご主人様 ♥』
「ご主人様」の後ろにあるハートマーク。これは画像ではなく、テキストで表示しています。通常は「♥」のように黒塗りですが、文字装飾と同じように CSS で指定すれば自由に色や大きさを変えられます。
♥
キーボードで「はーと」を変換してハートマークを入力することもできますが、これだと環境によっては文字化けする可能性があります。そこで、文字化けを回避できる「文字参照」と呼ばれる方法で表示しました。
ブログでは、この文字参照を必ず使わなければならないこともあります。たとえば、HTML コードを解説するときにタグを囲む <半角カッコ> などがそうです。
Headline
ブログで文字参照が必要なケース
HTML や PHP などのコードを紹介するカスタマイズ記事では、必ずカッコ < > を使いますよね。
ブログによってはこんな注釈がそえられているのを目にしたことがありませんか？
※下記コードの＜＞は半角に直してください
＜HTML＞～＜/HTML＞
いちいち変換するのは手間ですが、なぜこのような注釈があるのでしょうか。
タグを紹介するときは文字参照必須！
たとえば、img タグの書き方を紹介するとします。
これをブログのテキストエディタに直接入力すると、ブログシステムはそれが HTML タグであると認識してしまうので、画像を表示します。
リッチテキストエディタなら、自動修正機能が働いてこのように表示するかもしれません。
これを回避するために、前後のカッコ < > を全角 ＜＞ で書く方がいるのです。
でも、すごく不親切だと思いませんか？
ユーザーはコードをコピペした後に、いちいちカッコ部分を修正しなければなりません。修正箇所が 2 ヵ所ならまだ許容範囲かもしれませんが、これが 5 個も 10 個もあったらたまりませんよね。
1 ヵ所修正を忘れたらそれだけで NG ですから、そのままコピペして使ってもらえるような形がベストです。
半角カッコの表示方法はすでに答えが書かれていますが、気づいたでしょうか。
そう、「<」や「>」の部分。これが文字参照といわれる表記方法です。
文字参照とは
文字参照とは、Web サイト（HTML）で直接記述できない文字を表示させる方法で、次の2つがあります。
- 数値文字参照（or 文字参照）
- 文字実体参照（or 実体参照）
冒頭のハートマークは、数値文字参照でも文字実体参照でも表示できます。
♥
♥
文字どおり「数値文字参照」は数字を使い、「文字実体参照」は英語（略語）を使います。すべて半角英数字で書いてください。
どちらを使ってもかまいませんが、なかには「数値文字参照」でしか表示できない記号もあるので、覚えやすいほうを使いましょう。
記号だけではなく、「x²（エックス二乗）」のような特殊文字も表示できます！
環境依存文字と書かれていたら要注意
使いたい文字が文字化けを起こすかどうかわからない場合は、変換したときに「環境依存文字」が出てくるかどうかを見てください。
「はーと」を変換してみると、出ていますね。
でも、その横に「unicode」とも併記されています。
実は、unicode であれば「環境依存文字」と書かれていてもほぼ問題なく表示されます。
○つきの数字も環境依存文字として知られています。「メールで丸囲み数字は NG ！」と教わった記憶があるかもしれません。
こちらは、unicode と書かれているものとそうではないものがあります。
ちょっと混乱しそうですが、HTML でこれらの環境依存文字を使うとき、文字コードが「Shift_JIS」なら文字参照を使う必要がありますが、WordPress のように文字コードが「UTF-8」なら環境依存文字は文字参照を使わなくても表示されます。
ただ、絶対ではありませんし、タグを紹介するときには文字参照を使うのが無難です。
コピペでOK！よく使う記号一覧
では、よく使われる記号やマークの文字参照一覧を載せておきます。そのままコピペして使えるので、ブックマークしておくか、IME に登録して使ってください。
WordPress なら、よく使うものを「AddQuicktag」に登録しておくと便利ですよ。
| 表示 | 数値文字参照 | 文字実体参照 |
|---|---|---|
| “ | " | " |
| & | & | & |
| < | < | < |
| > | > | > |
| [ | [ | なし |
| ] | ] | なし |
| « | « | « |
| » | » | » |
| © | © | © |
| ² | ² | ² |
| ³ | ³ | ³ |
| ♠ | ♠ | ♠ |
| ♣ | ♣ | ♣ |
| ♥ | ♥ | ♥ |
| ♦ | ♦ | ♦ |
| ◇ | ◇ | なし |
| ♡ | ♡ | なし |
| ♤ | ♤ | なし |
| ♧ | ♧ | なし |
参考 HTML文字実体参照一覧
検索しなくてもOK！文字参照変換ツール
すべての文字を登録・記憶しておくのは難しいので、変換ツールをブックマークしておくのがおすすめです。
いずれのツールも、文字列を入力して変換ボタンを押すだけで文字参照が表示されます。
まとめ
以上、文字参照の解説でした。
細かいことですが、せっかく訪問してくれた方に手間をとらせないよう工夫しましょう。小さな積み重ねが大きな満足度となって表れます。
サービス業と同じく、ブログでも「目配り・気配り・心配り」は大切です！
それでは、また。