ブログのサイドバーに並ぶカテゴリー一覧。文字だけがズラッと縦に続いていると、どうにも味気ないと感じたことはありませんか。
各カテゴリー名の左に小さなアイコンが付くだけで、一覧はぐっと見やすくなり、サイト全体の印象もやわらかくなります。私自身、長年Web制作をやってきて、サイドバーやメニューの「ちょっとしたアイコン」が回遊率を地味に押し上げる場面を何度も見てきました。文字だけの一覧と、頭にアイコンが並ぶ一覧とでは、読者が目的のカテゴリーを見つけるスピードがまるで違います。
昔はこの装飾を専用プラグインに頼る人が多かったのですが、環境によっては動かなかったり、表示が崩れたりと相性問題に悩まされがちでした。私も以前、アイコン表示プラグインがどうしても動かず、パーミッションを直したり画像を入れ直したりと半日つぶした苦い記憶があります。今はそんな遠回りは不要です。カテゴリー名へのアイコン表示は、CSSだけで軽量かつ確実に実装できます。プラグインを一つ減らせるので、サイトの動作も軽くなります。
この記事では、WordPressが自動で付けてくれるクラスを足がかりに、背景画像を使う王道のやり方から、::before疑似要素でアイコン・絵文字・SVG・アイコンフォントを差し込む方法、さらに特定のカテゴリーだけを狙い撃ちするセレクタの見つけ方まで、2026年のいまそのまま使える形でまとめます。コピペで動くサンプルも置いておくので、自分のテーマに合わせて調整してみてください。
まずはカテゴリーのHTML構造とクラスを確認する
アイコンを付ける前に、土台となるHTMLがどう出力されているかを確認します。ここを押さえておかないと、CSSのセレクタをどこに当てればいいか分からず手が止まります。
WordPressの「カテゴリー」ウィジェットやwp_list_categories()でカテゴリー一覧を表示すると、おおよそ次のようなマークアップが出力されます。テーマによって囲みのdivやh3のクラス名は変わりますが、肝心のli部分の作りはほぼ共通です。
<ul>
<li class="cat-item cat-item-15"><a href="/category/firefox/">Firefox</a></li>
<li class="cat-item cat-item-29"><a href="/category/iphone/">iPhone</a></li>
<li class="cat-item cat-item-9"><a href="/category/webcreate/">Web制作</a></li>
</ul>注目してほしいのが、各liに付いている2種類のクラスです。すべての項目に共通のcat-itemと、カテゴリーごとに固有のcat-item-15（数字はカテゴリーID）が自動で付与されています。この仕組みのおかげで、「全カテゴリーにまとめて当てる」のも「特定の1カテゴリーだけ狙う」のも、CSSだけで自由自在になります。
実際のクラス名は環境で微妙に違うので、思い込みで書くのは禁物です。ブラウザでサイドバーのカテゴリー名を右クリックし「検証（Inspect）」を選べば、その項目に付いているクラスや囲みの構造が一目で分かります。私もテーマを触るときは、まずここで実物のクラス名をコピーしてからCSSを書き始めます。
出典：list-style-image – CSS | MDN
背景画像でアイコンを表示する基本のやり方
もっとも定番で、どのブラウザでも安定して動くのが背景画像（background-image）とパディングを組み合わせる方法です。アイコン画像をliの左端に背景として置き、テキストをpadding-leftで右にずらして重ならないようにする、という考え方です。
まず、全カテゴリー共通の見た目をcat-itemクラスにまとめて指定します。
.side_widget li.cat-item {
background-repeat: no-repeat;
background-position: 0 center; /* 左端・上下中央に配置 */
background-size: 16px 16px; /* アイコンの表示サイズ */
padding-left: 24px; /* テキストをアイコン分だけ右へ */
}ポイントはbackground-sizeでアイコンの表示サイズを固定し、padding-leftでその幅プラス余白だけテキストを逃がすことです。background-positionを0 centerにしておくと、文字の高さが変わっても上下中央にきれいに収まります。
共通設定ができたら、あとはカテゴリーごとに画像だけを差し替えます。先ほど確認した固有クラス（cat-item-番号）を使うと、狙ったカテゴリーだけにアイコンを割り当てられます。
.side_widget li.cat-item-15 { background-image: url(/images/icon-firefox.svg); }
.side_widget li.cat-item-29 { background-image: url(/images/icon-iphone.svg); }
.side_widget li.cat-item-9 { background-image: url(/images/icon-web.svg); }カテゴリーIDではなく、category-firefoxのようなスラッグ由来のクラスで指定したい場合は、テーマやプラグインの設定でbodyやリンクにスラッグクラスが出力されているかを確認します。出ていれば.category-firefoxのように、IDが変わっても壊れない指定にできます。画像のパスは、子テーマのCSSから見た相対パスか、サイトルートからの絶対パス（/wp-content/...）で書いておくと迷いません。
この方式は、画像を自由にサイズ指定でき、対応ブラウザを選ばないのが強みです。カテゴリーの数だけ画像を用意する手間はありますが、見た目の自由度はいちばん高い王道のやり方です。
出典：background-image – CSS | MDN
関連記事：【CSS】横並びメニューの区切り線を隣接セレクタと疑似要素で実装する方法
::before疑似要素でアイコン・絵文字・SVGを差し込む
もう一つの主流が、::before疑似要素を使ってアイコン用の「箱」を一つ作り、そこに画像や文字を流し込む方法です。背景画像方式よりも配置の微調整がしやすく、絵文字やSVGとも相性が良いのが魅力です。
画像アイコンをサイズ指定して差し込む
疑似要素で画像を扱うときに、最初につまずきやすい落とし穴があります。content: url(...)と直接画像を指定する書き方です。これでも画像自体は表示されるのですが、MDNが明記しているとおりcontentで挿入した画像は「匿名の置換要素」となり、CSSで幅や高さを変更できません。元画像のサイズそのままで出てしまうわけです。
そこで実務では、contentは空文字にしておき、画像はbackground-imageで入れてwidth・heightでサイズを決める書き方が定番になっています。
.side_widget li.cat-item a::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 6px;
vertical-align: middle;
background-size: contain;
background-repeat: no-repeat;
background-image: url(/images/icon-default.svg);
}
.side_widget li.cat-item-9 a::before {
background-image: url(/images/icon-web.svg);
}display: inline-blockを付けることで幅・高さが効くようになり、vertical-align: middleでテキストと高さがそろいます。SVGをそのままurl()で読み込めるので、拡大しても輪郭がにじまないのもうれしいところです。
絵文字をアイコン代わりに使う
画像を用意するのが面倒なときは、絵文字をそのままcontentに書いてしまうのが一番手軽です。画像ファイルもフォントの読み込みも不要で、コードを書いた瞬間に色付きのアイコンが出ます。
.side_widget li.cat-item-9 a::before { content: "💻 "; }
.side_widget li.cat-item-29 a::before { content: "📱 "; }
.side_widget li.cat-item-25 a::before { content: "💡 "; }注意点として、CSSで生成したコンテンツはDOMに含まれず、MDNも「生成コンテンツはアクセシビリティツリーに表示されず、一部の支援技術では読み上げられない」と警告しています。装飾としての絵文字なら問題ありませんが、意味を伝える重要な情報を絵文字だけに頼るのは避けましょう。読み上げ向けに代替テキストを添えたいときは、content: url(icon.svg) / "Web制作";のようにスラッシュ区切りで代替テキストを指定できます。
アイコンフォント（Font Awesomeなど）を使う
Font Awesomeのようなアイコンフォントを導入済みなら、疑似要素にフォントとコードポイントを指定して呼び出せます。アイコン側のfont-familyとfont-weightを正しく当てるのがコツで、ここを間違えると四角い豆腐（□）になってしまいます。
.side_widget li.cat-item-9 a::before {
content: "\f1c9"; /* アイコンのUnicode */
font-family: "Font Awesome 6 Free";
font-weight: 900; /* Solid系は900 */
margin-right: 6px;
}表示されない場合の原因と対処は、当ブログの別記事で詳しくまとめています。豆腐化やアイコンが出ないトラブルに当たったら、あわせて読んでみてください。
関連記事：Font Awesome 5を疑似要素で指定するとアイコンが表示されない時の解決法
リストのマーカー（行頭記号）自体をアイコンにする方法
ここまではテキストの前にアイコンを「足す」方法でしたが、リストの行頭記号（マーカー）そのものを画像や記号に置き換えるアプローチもあります。箇条書きの「・」の代わりに好きなアイコンを出したいときに便利です。
もっとも手堅いのがlist-style-imageです。url()でマーカー用の画像を指定するだけで、行頭の記号が画像に変わります。この機能は2015年7月から主要ブラウザで広く使えるBaseline（広範に利用可能）な機能なので、互換性を気にせず使えます。
.side_widget ul {
list-style-image: url(/images/bullet.svg);
}マーカーの色やサイズ、記号の中身まで細かくいじりたいなら、新しめの::marker疑似要素という選択肢もあります。contentで絵文字や記号を入れたり、color・font-sizeを変えたりできます。
.side_widget li::marker {
content: "▸ ";
color: #2b8a3e;
}ただし::markerについては一点だけ注意が必要です。MDNによると::markerは一部の主要ブラウザで未対応のため、まだBaselineには達していません。使える環境は広がっていますが、確実性を最優先するなら、現時点では前述のbackground-imageや::before方式のほうが安心です。新しい記法は「使える環境では効き、ダメでも崩れない」装飾にとどめておくのが無難です。
まとめ：用途で使い分ければアイコン化は怖くない
サイドバーのカテゴリー名にアイコンを付ける方法を、背景画像・疑似要素・絵文字・アイコンフォント・マーカー置き換えと、ひと通り見てきました。やり方はいくつもありますが、選ぶ基準はシンプルです。
迷ったら、画像アイコンは「content: "" ＋ background-image ＋ サイズ指定」、手軽さ重視なら絵文字、という2本立てを覚えておけば、たいていの場面は乗り切れます。カテゴリーの狙い撃ちには、WordPressが自動で付けるcat-item-番号やスラッグ由来のクラスを使う。この組み合わせが、いまの定番だと考えています。
大事なのは、思い込みでセレクタを書かず、必ずブラウザの「検証」で実物のクラス名を確かめてから当てること。ここを丁寧にやるだけで、「CSSが効かない」という一番よくあるつまずきはほぼ消えます。私が制作で他人のテーマを触るときも、最初の一手は決まって実物のクラス確認です。
そして、絵文字や::beforeで入れた装飾は読み上げに乗らないことがある点だけは忘れずに。意味を持つ情報はテキストやマークアップ側で担保し、アイコンはあくまで見た目を整える役割に徹させる。これを守れば、見やすくてアクセシブルなサイドバーになります。まずはお気に入りのカテゴリー1つから、好きなアイコンを当てて試してみてください。一覧の表情がガラッと変わるはずです。
