15 Shares

ハートマークや半角カッコを文字化けさせずに表示する「文字参照」とは

『おかえりなさいませ、ご主人様 

メイド

「ご主人様」の後ろにあるハートマーク。これは画像ではなく、テキストで表示しています。通常は「♥」のように黒塗りですが、文字装飾と同じようにCSSで指定すれば自由に色や大きさを変えられます。

キーボードで「はーと」を変換してハートマークを入力することもできますが、これだと環境によっては文字化けする可能性があります。そこで、文字化けを回避できる「文字参照」と呼ばれる方法で表示しました。

ブログでは、この文字参照を必ず使わなければならないこともあります。たとえば、HTMLコードを解説するときにタグを囲む<半角カッコ>などがそうです。これを全角にしていると、ちょっとカッコ悪いんですよね… カッコだけに……

というわけで、今日は文字参照について勉強しましょー。

ブログで文字参照が必要なケース

HTMLやPHPなどのコードを紹介するカスタマイズ記事では、必ずカッコ<>を使いますよね。

で、ブログによってはこんな注釈がそえられているのを目にしたことがありませんか?

※下記コードの<>は半角に直してください

<HTML>~</HTML>

こんな表記があった瞬間、『修正するのはちょっと面倒だなー』と思ってしまうのは僕だけじゃないはず。

タグを紹介するときは文字参照必須!

たとえば、imgタグの書き方を紹介するとします。

<img src=”http://naifix.com/wp-content/themes/GUSH/images/naifix_logo.png” alt=”初心者ブロガー指南:Naifix” width=”200″ height=”50″ />

これをブログのテキストエディタに直接入力すると、ブログシステムはそれがHTMLタグであると認識してしまうので、画像を表示します。

初心者ブロガー指南:Naifix

リッチテキストエディタなら、自動修正機能が働いてこのように表示するかもしれません。

&lt;img src=”http://naifix.com/wp-content/themes/GUSH/images/naifix_logo.png” alt=”初心者ブロガー指南:Naifix” width=”200″ height=”50″ /&gt;

これを回避するために、前後のカッコ<>を全角<>で書く方がいるのです。

img src=”http://naifix.com/wp-content/themes/GUSH/images/naifix_logo.png” alt=”初心者ブロガー指南:Naifix” width=”200″ height=”50″ /

でも、すごく不親切だと思いませんか?

ユーザーはコードをコピペした後に、いちいちカッコ部分を修正しなければなりません。修正箇所が2ヵ所ならまだ許容範囲かもしれませんが、これが5個も10個もあったらたまりませんよね。

1ヵ所修正を忘れたらそれだけでNGですから、そのままコピペして使ってもらえるような形がベストです。

半角カッコの表示方法はすでに答えが書かれていますが、気づいたでしょうか。

そう、「&lt;」や「&gt;」の部分。これが文字参照といわれる表記方法です。

文字参照とは

文字参照とは、WEBサイト(HTML)で直接記述できない文字を表示させる方法で、次の2つがあります。

  • 数値文字参照(or 文字参照)
  • 文字実体参照(or 実体参照)

冒頭のハートマークは、数値文字参照でも文字実体参照でも表示できます。

数値文字参照 &#9829;
文字実体参照 &hearts;

文字どおり「数値文字参照」は数字を使い、「文字実体参照」は英語(略語)を使います。注意点は、すべて半角英数字であるということ。

どちらを使ってもかまいませんが、なかには「数値文字参照」でしか表示できない記号もあるので、覚えやすいほうを使ってください。

記号だけではなく、「x²(エックス二乗)」のような特殊文字も表示できますぜ!

環境依存文字と書かれていたら要注意

使いたい文字が文字化けを起こすかどうかわからない場合は、変換したときに「環境依存文字」が出てくるかどうかを見てください。

「はーと」を変換してみると、出ていますね。

環境依存文字

でも、その横に「unicode」とも併記されています。

実は、unicodeであれば「環境依存文字」と書かれていても、ほぼ問題なく表示されます。

○つきの数字も環境依存文字として知られています。「メールで丸囲み数字はNG!」と教わった記憶があるかもしれません。

環境依存文字

こちらは、unicodeと書かれているものとそうではないものがあります。

ちょっと混乱しそうですが、HTMLでこれらの環境依存文字を使うとき、文字コードが「Shift_JIS」なら文字参照を使う必要がありますが、WordPressのように文字コードが「UTF-8」なら環境依存文字は文字参照を使わなくても表示されます。

ただ、絶対ではありませんし、タグを紹介するときにはやっぱり文字参照が必須です。

コピペでOK!よく使う記号一覧

では、よく使われる記号やマークの文字参照一覧を載せておきます。そのままコピペして使えるので、ブックマークしておくか、IMEに登録して使ってください。

WordPressなら、よく使うものを「AddQuicktag」に登録しておくと便利ですよ。

表示 数値文字参照 文字実体参照
" &#34; &quot;
& &#38; &amp;
< &#60; &lt;
> &#62; &gt;
[ &#91; なし
] &#93; なし
« &#171; &laquo;
» &#187; &raquo;
© &#169; &copy;
² &#178; &sup2;
³ &#179; &sup3;
&#9824; &spades;
&#9827; &clubs;
&#9829; &hearts;
&#9830; &diams;
&#9671; なし
&#9825; なし
&#9828; なし
&#9831; なし

参考HTML文字実体参照一覧

検索しなくてもOK!数値文字参照変換ツール

『あれ?あの文字はどうやって表示するんだっけ?』とド忘れしてしまったときは、検索しなくても変換ツールをブックマークしておけばOK。

数値文字参照変換ツール
文字列 → 数値実体参照変換

文字列を入力して変換ボタンを押すだけ。

ハートマークを文字参照に変換

あら、便利!

WordPressでコードを表示できるプラグイン

長ったらしいHTMLコードを紹介するときに、いちいち文字参照を使うのは面倒です。

WordPressなら「Crayon Syntax Highlighter」というプラグインで解決するので、カスタマイズネタを多く扱っているならぜひ使ってみてください。

こんな感じで表示されます。

» Crayon Syntax Highlighter の使い方はこちら

表示速度がちょっと遅くなるのが難点ですが、ただコードを記載するよりもちょっとプロっぽく見えると思います(見た目は大切ですよ!)。

ただ、なんでもかんでもこのプラグインに頼るのではなく、文中の説明でタグを紹介するときなどは文字参照を使ったほうがスッキリすると思います。

例1)
記事タイトルには<h1>を使いましょう
例2)
記事タイトルには下記のタグを使いましょう

まとめ

まとめ

今日の要点はこちら。

  • カスタマイズ記事を書くなら文字参照を覚えよう
  • WordPressでコードを紹介するならプラグインが便利

細かいことですが、せっかく訪問してくれた方に手間をとらせないよう工夫しましょう。小さな積み重ねが大きな満足度となって表れます。

サービス業と同じく、ブログでも「目配り・気配り・心配り」は大切です!

それでは、また。