WordPressで丸数字（①②③）を入力する方法！文字化けするか不安に思ってる人はスッキリ

丸数字を入力したいけど、文字化けする？

リストの数字を丸数字に変更したい

簡単に丸数字を入力する方法を知りたい

①、②などの丸数字は環境依存文字なので、文字化けしないか心配じゃないですか？

「もしかしたら文字化けしてるかも？」と不安に思いながらブログを書くのはイヤですよね。

ただ、安心してください！

今のほとんどのWebサイトでは、環境依存文字を使っても文字化けすることはありません。

というのも、現在はほとんどのWebサイトが共通した文字コードを使っているので、文字化けすることは滅多にありません。

そこで今回は、

• WordPressで丸数字を入力する方法
• 丸数字の入力コード
• WordPressのリストを丸数字にカスタマイズする方法

を紹介していきます。

「文字化け恐い！」って思っている方は、この記事を参考に丸数字をガンガン使っちゃってください！

UTF8で丸数字は文字化けしない！

結論から言うと、今はほとんどのWebサイトがUTF-8という文字コードを採用しているので、丸数字が文字化けする可能性は極めて低いです。

UTF-8は、世界中の文字を共通のコードで表すことができるように作られているUnicodeの1つです。

そのため、文字に割り当てられているコード番号が環境によって異なることはありません。

UTF-8でWebサイトを構築する流れは、今や主流となっています。

なので、安心して丸数字を使うことができます。

自分自身でWebサイトを制作する場合は、文字コードをUTF-8に設定するのを忘れないようにしましょう！

そうしないとあなたの制作したWebサイトで文字化けが起きてしまいます。

WordPressで丸数字を入力する方法

WordPressで記事を書くときに丸数字を入力する方法は2つです。

コピペしてくるのもめんどくさいので、数字を入力して変換しちゃったほうが簡単です。

例えば、「1」と入力して「変換」キーを押せば、変換候補の一覧に丸数字が出てきます。

ただ、文字変換で入力できる丸数字は50までです。

51以上の数字を丸数字にしたい場合は、自分で制作する必要があります。

こちらの記事が参考になるので試してみてください。

Wordで51以上の数字を〇や□で囲む方法

丸数字の入力コード一覧

丸数字と丸数字に対応した入力コードを記載してあるのでコピペして使ってください！

使う機会はあまりないかもしれませんが（汗）

丸数字（白）のコード一覧

丸数字（黒）のコード一覧

olのlist-style-typeを丸数字にする方法

このブログ（テーマ）で使われている下記のようなリストを作る方法です。

最もシンプルなのは、丸数字のコードを文字の前に入力することです。

<ol>
  <li>&#9312;サンプル1</li>
  <li>&#9313;サンプル2</li>
  <li>&#9314;サンプル3</li>
</ol>

ol li {
  padding-left: 1.8em;
  list-style: none;
}

ただし、これだといちいち丸数字のコードを入力しなければいけないので、非常にめんどくさい！

ということで、「ol」の「li」については常に丸数字が適用されるようにしてみましょう！

HTML

HTMLはめちゃくちゃシンプル！

というかそのままです。

<ol>
  <li>サンプル1</li>
  <li>サンプル2</li>
  <li>サンプル3</li>
</ol>

CSS

CSSはちょっと長めです。

ol {
counter-reset: number;/* これを記述しないと数字が増えない */
}

ol li {
padding-left: 1.8em;
list-style: none;
}

ol>li:before {
counter-increment: number;
content: counter(number) ;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
font-weight: bold;
display: block;
text-align: center;
border-radius: 50%;
position: absolute;
-webkit-transform: scale(0.8);
transform: scale(0.8);
left: 1px;
top: 0;
}

ol li:before {
background: #000;/* 背景色 */
border-color: #000;/* 境界線の色 */
color: #fff;/* 文字の色 */
}

CSSで数字の背景を丸くして、<li>が増えると数字が増えるように設定しています。

サイズや色をカスタマイズして使ってみてください！

もちろんそのまま使ってもOKです。

僕の使っている「スワロー」というテーマは、最初からolが丸数字になっています。

ある程度カスタマイズされているテーマを選べば、記事を書くことに集中することができます。

自分が使いやすいテーマをいろいろと使って試してみましょう！

その他環境依存の文字を紹介

丸数字以外も環境依存文字はいくつもあります。

そもそもどうやって変換したら出てくるんだよ！

って文字も多いので、そのようなときは下記からコピペして使ってください。

環境依存文字を使うときの注意点は、ユーザーが読みにくくならないかどうか考えてから使うようにしましょう。

「㌍ ㌦ ㌣ ㌫ ㍊ ㌻」などは、かわいくてなんか使いたくなっちゃいますが、ぶっちゃけ読みずらいです。

まとめ

WordPressの記事内で丸数字を使う場合は、文字化けを気にする必要がないので気にせず使うことができます。

丸数字を使うことで、読みやすい記事を書くことができるので、使うべきところではしっかりと使いましょう！

ただ、メールなどでは使用している人の環境によって、環境依存文字は文字化けするので使わないほうがいいです。

WordPressで集客できるブログを作る方法まとめ