タグ: 丸囲み数字

1そもそも、なぜCSSで作るの？

スマホやパソコンには、もともと①②③みたいな丸囲み数字が用意されています。でも、これには地味に困ることがあるんです。

まず、最初から用意されている丸囲み数字は ㊿（50）あたりまでしかないうえに、見ている人の機種によっては表示が崩れたり、文字化けすることがあります。さらに、色も大きさも変えられません。黒い数字のまま固定です。

そこで登場するのがCSS。CSSを使えば、好きな色・好きな大きさ・好きな数字の丸囲み数字を、自分で自由に作れるようになります。記事のデザインがグッと締まりますよ。

2アメブロで一番大事なルール

アメブロで装飾を作るとき、絶対に覚えておきたいルールがひとつあります。

それは、アメブロの記事本文では「インラインスタイル」しか使えないということ。

「インラインスタイル」ってなに？

CSSの書き方には大きく2種類あります。ひとつは、まとめて別の場所に書く方法（<style>タグやclassを使うやり方）。もうひとつが、タグの中に直接スタイルを書き込むインラインスタイルです。

アメブロは前者（まとめて書く方法）を記事本文に書いても、消されたり無視されたりします。だから、ひとつのタグの中にスタイルを全部書き込むインラインスタイルで作るのが正解、というわけです。

3まずは完成形をコピペ

理屈は後回しでOK。まずはこれをコピペして、いちばん最後の数字「1」を好きな数字に変えるだけで使えます。

▼ 赤い丸に白文字（基本形）

<span style="display:inline-block;width:1.5em;height:1.5em;line-height:1.5em;text-align:center;border-radius:50%;background:#e60012;color:#fff;font-size:.9em;font-weight:bold;">1</span>

最後のほうにある >1< の「1」が、表示される数字です。ここを 2 や 3 に変えれば②③になります。色を変えたい人は次の章へ！

4コードを1個ずつ分解してみよう

「呪文みたいで怖い…」という人のために、さっきのコードを部品ごとにバラして説明します。ひとつずつ見れば全然むずかしくないです😊

• <span> ～ </span> 文章の途中にちょこっと装飾を入れるための「入れ物」のタグ。この2つで挟んだ中身（＝数字）に、スタイルが効きます。
• display:inline-block; 「文章の中に置けるけど、幅や高さも指定できる箱にしてね」という指定。これがないと丸になりません。丸を作る土台です。
• width:1.5em; height:1.5em; 箱の横幅と高さ。この2つを同じ数字にするのが、きれいな真ん丸を作るコツ。「em」は文字サイズを基準にした単位で、数字を大きくすると丸も大きくなります。
• border-radius:50%; 角を丸める指定。50%にすると四角が完全な円になります。今回の主役です。20%くらいにすると角丸の四角になりますよ。
• background:#e60012; 丸の背景色。#e60012は赤のこと。ここを変えれば色が変わります（色コードは次の章に一覧あり）。
• color:#fff; 中の数字の色。#fffは白。背景が濃い色なら白文字が読みやすいです。
• line-height:1.5em; 行の高さ。height と同じ数字にすると、数字がちょうど上下まんなかに来ます。地味だけど大事。
• text-align:center; 数字を左右まんなかに寄せる指定。line-heightと合わせて、数字を中央にピタッと配置します。
• font-size:.9em; font-weight:bold; 数字の大きさと太さ。boldで太字になって見やすくなります。丸全体を大きくしたいときは width・height・font-size をまとめて大きくしてね。

5色を変えてみよう

色を変えるのは、コードの中の background:#e60012; の色コード部分だけを書きかえるだけ。下からコピーして使ってください。

▼ 例：青い丸にしたいとき（background の色コードを変えただけ）

<span style="display:inline-block;width:1.5em;height:1.5em;line-height:1.5em;text-align:center;border-radius:50%;background:#0b66c3;color:#fff;font-size:.9em;font-weight:bold;">2</span>

よく使う色コード：青 #0b66c3 ／ 緑 #2e9e5b ／ オレンジ #f08300 ／ 黒グレー #444

6白抜き（枠線だけ）バージョン

中を塗りつぶさず、枠線と数字だけのオシャレなタイプも人気です。背景の白い記事になじみやすいですよ。

▼ コピペ用

<span style="display:inline-block;width:1.4em;height:1.4em;line-height:1.4em;text-align:center;border-radius:50%;border:2px solid #e60012;color:#e60012;font-size:.9em;font-weight:bold;">1</span>

違いは2つだけ。backgroundを消して、代わりにborder:2px solid #e60012;（＝2pxの赤い枠線）を足し、文字色を枠と同じ色にしています。

72桁の数字を入れるときの注意

⑩や㉕のように2桁の数字を入れると、円がちょっと横長のたまご型になりがちです。

そんなときは width を少しだけ広げてあげます。width:1.5em を width:1.7em くらいにすると、2桁でもバランスよくおさまります（height はそのままでOK）。

8アメブロへの貼り方の手順

最後に、作ったコードをアメブロ記事に貼る手順です。ポイントは「HTML表示」に切り替えてから貼ること。

1. アメブロの記事作成画面を開く
2. 編集モードを「HTML表示」に切り替える（通常モードのまま貼るとコードがそのまま文字で出てしまいます）
3. 丸囲み数字を入れたい場所に、コピーしたコードを貼り付ける
4. 通常表示に戻して、丸囲み数字がちゃんと表示されているかプレビューで確認する

✓まとめ

丸囲み数字は、1つのコードをコピペして、数字と色を変えるだけで自由に作れます。覚えることは3つだけ。

① アメブロはインラインスタイル（タグの中に直接書く）で作る／② 真ん丸のカギはwidth＝heightとborder-radius:50%／③ 貼るときはHTML表示に切り替える。

これさえ押さえれば、記事の見出しや手順の番号がグッと見やすくなります。ぜひ色んな色で試してみてくださいね😊