「ブログでチェックマーク（✓）を使いたいのに、そのまま打つと文字化けしそうで怖い……」
「検索しても10進数コードとか専門用語ばかり出てきて、結局どれをコピペすればいいのかわからない！」
そんな悩みを抱えていませんか？
「チェックマークを使いたくて検索したけど、コードの仕組みが難しくて結局使えない」という状況は、Web制作やブログ運営を始めたばかりの頃に誰もが直面する壁です。
私も以前は、基本的な[hタグ][pタグ]くらいしか使えず、チェックマークや矢印を使いたい時は検索内に出てきたものを直接貼り付けたりしてました。しかし、それではサイトのSEO的にもよくない気がしました。
この記事を読むことで、特殊文字の正しい使い方が理解でき、明日からの記事装飾が劇的にスムーズになります。
▶本記事の内容
専門的な知識がなくても、指定のコードをコピー＆ペーストするだけで、あなたのブログにおしゃれな記号を表示させることが可能です。
この記事をブックマークに登録しておけば、今後「あの記号どう書くんだっけ？」と迷うたびに検索し直す手間がなくなります。ぜひ、辞書代わりにご活用ください。
HTML特殊文字とは？初心者が知っておくべき基礎知識
HTML特殊文字とは、キーボードで直接入力できない記号や、HTMLコード内で特別な意味を持つ文字を正しく表示させるための仕組みのことです。
例えば、「<」や「>」という記号。これらはHTMLタグ（<div>など）を定義するために使われるため、文章の中でそのまま入力すると、ブラウザが「これはタグの始まりかな？」と勘違いしてしまい、表示が崩れる原因になります。
そこで登場するのが、以下の2種類の記述方法です。
1. 文字実体参照（名前で指定）
「&」や「"」のように、「&」＋「特定の名前」＋「;」で記述する方法です。直感的に理解しやすく、広く使われています。
2. 数値文字参照（番号で指定）
「☑」のように、「&#」＋「数字」＋「;」で記述する方法です。10進数や16進数で指定され、実体参照が定義されていない珍しい記号も表示できます。
「結局どっちを使えばいいの？」と迷うかもしれませんが、結論としては「コピペして表示される方を使えばOK」です。この記事では、より確実性の高いコードをリスト化しています。
ブログでの活用法！特殊文字を導入する3つのステップ
特殊文字をブログで使うのは非常に簡単です。以下の手順で進めてみてください。
10進数コードなどの仕組みを覚える必要はありません。「選ぶ」「コピーする」「貼る」の3ステップで完了します。
ステップ1：表示したい記号を一覧から選ぶ
本記事の後半にあるリストから、あなたのブログのデザインに合う記号を探します。チェックマーク、矢印、天気、音符など、カテゴリー別にまとめています。
ステップ2：コードをコピーする
各記号の横にある「コピペ用コード」を選択してコピーします。
ステップ3：HTMLエディタに貼り付ける
ここが一番のポイントです。WordPressなどのブログツールを使っている場合、「ビジュアルエディタ」ではなく「テキストエディタ（またはカスタムHTMLブロック）」に貼り付けてください。
⚠️ よくある間違い：<>で囲まないで！
コードエディタに慣れている方に多いミスが、「特殊文字コードをHTMLタグのように < > で囲ってしまう」ことです。
× 間違い：<©>
○ 正解：©
特殊文字はそれ自体が完成されたコードです。タグではないので、< > は一切不要です。リストにあるコードをそのまま「ポンッ」と貼り付けるだけで正しく表示されます。
注意点：
ビジュアルモードで直接「✓」と入力しても、画面にはそのまま「✓」と表示されてしまいます。必ずHTMLを記述する専用のモードで貼り付けるようにしましょう。
これだけで、あなたの記事にプロっぽい装飾が加わります。
コピペで使えるHTML特殊文字コード一覧
ここからは、実際にブログやサイト制作でよく使う特殊文字をカテゴリー別に紹介します。
各セクションの詳細は以下の通りです。クリックすると該当箇所へジャンプします。
よく使われる基本の特殊文字
コピーライトや登録商標など、商用サイトでも必須となる基本セットです。
| 名前 | マーク | コピペ用コード |
|---|---|---|
| 空白 | | |
| コピーライト | © | © |
| 登録商標 | ® | ® |
| 大なり | > | > |
| 小なり | < | < |
| トレードマーク | ™ | ™ |
| ダブルクオーテーション | " | " |
| アンパサンド | & | & |
| 円 | ¥ | ¥ |
リンクボタンに使える！矢印・三角形
「詳しくはこちら」などのリンクボタンの装飾に使うと、クリック率の向上が期待できます。
| 名前 | マーク | コピペ用コード |
|---|---|---|
| 右角引用符 | » | » |
| 右向き黒三角 | ▶ | ▶ |
| 右向き三角 | ▷ | ▷ |
| 引き返し右向き矢印 | ↪ | ↪ |
| 下向き右折矢印 | ↳ | ↳ |
| 右向き小正三角形(黒) | ▸ | ▸ |
| 右向き小正三角形(白) | ▹ | ▹ |
リスト表示に最適！チェックマーク・バレット
今回のメインテーマであるチェックマークです。箇条書きの装飾に使うと、一気に読みやすくなります。
| 名前 | マーク | コピペ用コード |
|---|---|---|
| チェックマーク | ✓ | ✓ |
| エックスマーク（×） | ✗ | ✗ |
| ビュレット（中黒） | • | ߦ |
| チェックなし（箱） | ☐ | ☐ |
| チェック済み（箱） | ☑ | ☑ |
| バツ付き（箱） | ☒ | ☒ |
| 正方形(黒) | ▪ | ▪ |
| ひし形(黒) | ⧫ | ⧫ |
| 白指差し記号・右 | ☞ | ☞ |
可愛くて便利なシンボル（天気・顔文字・トランプ）
感情や状況を直感的に伝えたい時に役立つシンボルたちです。画像を使わずに表現できるのがメリットです。
| 名前 | マーク | コピペ用コード |
|---|---|---|
| 晴れ | ☀ | ☀ |
| 曇り | ☁ | ☁ |
| 笑顔 | ☺ | ☺ |
| ハート・黒 | ♥ | ♥ |
| ハート・白 | ♡ | ♡ |
| 八分音符 | ♪ | ♪ |
| 連桁付き八分音符 | ♫ | ♫ |
| 温泉マーク | ♨ | ♨ |
Macの操作説明に便利な記号
PCの操作手順を説明する際、記号を使うと「どのキーを押せばいいのか」がひと目で分かります。
| 名前 | マーク | コピペ用コード |
|---|---|---|
| command | ⌘ | ⌘ |
| option | ⌥ | ⌥ |
| shift | ⇧ | ⇧ |
| control | ⌃ | ⌃ |
| delete右 | ⌦ | ⌦ |
| return | ⏎ | ⏎ |
その他・マニアックな記号まとめ
専門的な文書や、ちょっとしたアクセントに使いたいマニアックな記号をまとめました。
| 名前 | マーク | コピペ用コード |
|---|---|---|
| 無限 | ∞ | ∞ |
| 不等号（ノットイコール） | ≠ | ≠ |
| コピーレフト | 🄯 | |
| 郵便番号（顔） | 〠 | 〠 |
| はさみ | ✂ | ✂ |
| 飛行機 | ✈ | ✈ |
ちなみにブログをしている方はこちら記事も参考になるかもしれません。
まとめ：HTML特殊文字を活用して、読者に伝わるブログを作ろう
今回は、ブログ運営で役立つHTML特殊文字をまとめて紹介しました。
特殊文字を使うメリットをもう一度振り返ってみましょう。
特にチェックマーク（✓）や矢印（»）は、読者の視線を誘導し、重要な情報を強調するのに非常に有効です。今まで「どうやって出すんだろう？」と悩んでいた方も、このページのコードをコピペするだけで今日から使いこなせるはずです。
「あの記号、どこにあるっけ？」と思った時は、いつでもこのページに戻ってきてください。ブックマークしておくと、記事執筆のスピードが格段にアップしますよ！
あなたのブログがより見やすく、魅力的なものになることを応援しています。
ブログを書いている方はファイルコンバーターの存在も知っておくと便利です。
コメント