SWELLでカテゴリーアイコンを設定したいと思っても、「ショートコードでできるのか」「CSSが必要なのか」がわかりにくく、手が止まってしまいやすいですよね。
特に、サイドバーのカテゴリー一覧やメニューまわりは、表示場所によってやり方が変わるため、初心者の方ほど迷いやすいポイントです。
でも、最初に全体像をつかんでおけば大丈夫です。
この記事では、SWELL標準アイコンの使い方から、サイドバーのカテゴリーアイコンを変更する方法、さらにメニューに自然に表示するコツまで、やさしく順番に解説します。
「自分のサイトにも取り入れられそう」と思える形でまとめているので、ぜひ最後までチェックしてみてください。
この記事でわかること
-
- SWELLでカテゴリーアイコンを付ける基本的な考え方
- SWELL標準アイコンとFont Awesomeの使い分け
- サイドバーのカテゴリー一覧にアイコンを表示する方法
- メニューや導線にアイコンを自然になじませるコツ
SWELLでカテゴリーアイコンは付けられる？
SWELLでカテゴリーアイコンを付けたいと思ったとき、「標準機能だけでできる場所」と「CSS調整が必要な場所」があることを最初に知っておくと、作業がとてもスムーズです。
結論からいうと、メニューや一部のラベルはショートコードで対応しやすく、サイドバーのカテゴリー一覧はCSSで調整する方法が現実的です。
ここを知らずに進めてしまうと、ショートコードを入れても表示されなかったり、思った場所にアイコンが付かなかったりして、「SWELLではできないのかな」と感じやすくなります。
でも、仕組みさえわかれば難しくありません。
まずは、SWELLのカテゴリーアイコンでできることをやさしく整理していきます。
まず知っておきたい「できること」と「できないこと」
SWELLでは、標準のアイコンショートコードを使ってアイコンを呼び出せます。
そのため、本文内・ボタン・一部のメニュー表示のように、ショートコードが解釈される場所では比較的かんたんにアイコンを使えます。
一方で、カテゴリー一覧のようにWordPress側の出力仕様に左右される箇所では、ショートコードをそのまま入れても反映されないことがあります。
このようなケースでは、カテゴリーIDごとにCSSを書き分けて、表示されるアイコンを差し替える考え方が役立ちます。
つまり、「どこに表示したいか」でやり方が変わるということです。
| 表示したい場所 | おすすめの方法 | 難易度 |
|---|---|---|
| 本文・ボタン・装飾パーツ | ショートコード | 低い |
| メニューのラベル | ショートコード | 低〜中 |
| サイドバーのカテゴリー一覧 | CSSでアイコンを差し替え | 中 |
カテゴリーアイコンでつまずきやすい理由
カテゴリーアイコンでつまずきやすい理由は、アイコンの選び方・表示場所・設定方法がひとつではないからです。
たとえば「SWELLの標準アイコンを使いたい」のか、「Font Awesomeの好きなアイコンを使いたい」のかでも手順が変わります。
さらに、サイドバーのカテゴリー一覧では、カテゴリ名に直接ショートコードを書くのではなく、CSSの::beforeを使って見た目を整えるケースが多くなります。
この違いを知らないまま作業すると、設定が合っているのに表示されないように見えてしまいます。
最初に全体像を知っておくことが、いちばんの近道です。
この記事の結論
SWELLでカテゴリーアイコンを付ける方法は、「ショートコードで付ける方法」と「CSSで差し替える方法」の2つを使い分けるのが基本です。
まずはSWELL標準アイコンの使い方を把握し、そのあとでサイドバーやメニューなど、表示したい場所ごとの設定に進むと迷いにくくなります。
この記事では、初心者の方でも流れがつかみやすいように、基本から実践まで順番にまとめていきます。
「結局どの方法を選べばいいの？」という疑問まで、やさしく整理していきますね。
SWELLで使えるアイコンの基本を確認しよう
カテゴリーアイコンを設定する前に、まずはSWELLで使えるアイコンの基本を押さえておくと安心です。
アイコンの呼び出し方がわかると、サイドバーだけでなく、見出し前・ボタン内・メニューなどにも応用しやすくなります。
最初に基本を理解しておくことが、あとでカスタマイズをラクにするポイントです。
SWELL標準アイコンの呼び出し方
SWELLの標準アイコンは、ショートコードで呼び出せます。
使い方はとてもシンプルで、アイコンクラス名を指定するだけです。
たとえば、フォルダ系やタグ系、チェック系のアイコンを使えば、カテゴリーまわりとも相性よくなじみます。
記述例は次のような形です。
カテゴリーアイコンとして使うなら、記事テーマと意味が近いアイコンを選ぶと、見た目が自然にまとまりやすくなります。
| 用途 | おすすめ例 | 印象 |
|---|---|---|
| ブログ記事系 | 定番でわかりやすい | |
| まとめ・一覧系 | 整理された印象 | |
| おすすめ情報系 | 目を引きやすい | |
| お知らせ系 | 案内向き |
Font Awesomeを使う方法
SWELL標準アイコンだけではイメージに合うものが見つからない場合は、Font Awesomeを使う方法もあります。
この方法なら、より幅広いデザイン表現がしやすくなります。
ただし、標準アイコンより設定がひとつ増えるため、まずはSWELL標準アイコンで足りるか確認してから進めるのがおすすめです。
シンプルなサイトなら、標準アイコンだけでも十分きれいに仕上がります。
「やさしい雰囲気にしたい」「もう少し洗練された印象にしたい」といった場合に、Font Awesomeを検討すると流れが自然です。
アイコン名の探し方
アイコン設定で意外と時間がかかるのが、どのアイコン名を使えばいいか探す作業です。
そんなときは、先に「用途」で絞るのがおすすめです。
たとえば、暮らし系カテゴリなら家・ハート・チェック、仕事系ならブック・ペン・フォルダなど、意味の近いものから選ぶと失敗しにくくなります。
また、カテゴリーごとにバラバラなテイストを選ぶより、線の太さや印象がそろったアイコンを選ぶほうが、サイト全体が整って見えます。
迷ったらまず3つほど候補を出して、実際に表示して比べると決めやすいです。
サイドバーのカテゴリー一覧にアイコンを付ける方法
検索意図として特に強いのが、サイドバーのカテゴリー一覧に出るフォルダアイコンを変えたいという悩みです。
この部分は、ショートコードを直接入れて解決するというより、CSSで見た目を調整していく形がわかりやすいです。
最初は少しむずかしく見えますが、やっていることは「カテゴリーごとに見た目を指定する」だけです。
標準のフォルダアイコンを変更する考え方
サイドバーのカテゴリー一覧は、カテゴリーごとにクラス名が付いて出力されます。
そのため、特定のカテゴリーIDに対してCSSを書けば、アイコンを切り替えられます。
考え方としては、カテゴリリンクの前に出ているアイコンを、::beforeで上書きするイメージです。
この方法なら、テーマファイルを直接編集しなくても調整しやすいのがうれしいところです。
カテゴリーごとにアイコンを出し分けるCSS例
ここでは、カテゴリーごとにアイコンを変える基本例を紹介します。
カテゴリーIDの数字は、ご自身の環境に合わせて置き換えてください。
.widget_categories > ul > .cat-item-1 > a::before{
content: "\\e92e";
margin-right: 0.4em;
}
.widget_categories > ul > .cat-item-4 > a::before{
content: "\\e7fd";
margin-right: 0.4em;
}
.widget_categories > ul > .cat-item-5 > a::before{
content: "\\e925";
margin-right: 0.4em;
}このように書くと、カテゴリーごとに違うアイコンを表示しやすくなります。
まずは1つのカテゴリーだけで試して、問題なく表示されたら数を増やすと失敗しにくいです。
色・サイズ・余白を整えるコツ
アイコンは表示できても、サイズや余白が合っていないと、少し野暮ったく見えてしまいます。
そんなときは、色・サイズ・余白を少しだけ整えると、ぐっと見やすくなります。
たとえば次のような調整です。
.widget_categories > ul > li > a::before{
font-size: 0.95em;
margin-right: 0.45em;
opacity: 0.9;
}色を強くしすぎると主張が大きくなりやすいので、本文や見出し色となじむ範囲で控えめに使うのがおすすめです。
カテゴリー一覧は毎回目に入る場所なので、派手さよりも読みやすさを優先すると、長く使いやすいデザインになります。
ヘッダーやメニューのカテゴリーにアイコンを表示する方法
サイドバーだけでなく、ヘッダーやメニューまわりのカテゴリーにもアイコンを付けたい方は多いです。
この場合は、ショートコードが使いやすい場面が増えるため、サイドバーより手軽に感じることがあります。
サイト全体の回遊性を高めたいときにも、メニューのアイコンは役立ちます。
ナビゲーションラベルにショートコードを入れる方法
メニューラベルにアイコンを付けたいときは、カテゴリ名やラベルの先頭にショートコードを入れる考え方がわかりやすいです。
たとえば、次のように記述します。
ブログ
学び
暮らしこの方法は、「カテゴリー一覧そのもの」ではなく、カテゴリーへの導線としてメニューを使うときに特に便利です。
見せたいカテゴリーが決まっているなら、サイドバーを細かくカスタマイズするより手軽に整えられることもあります。
表示されないときの確認ポイント
ショートコードを入れたのにアイコンが出ないときは、焦らなくて大丈夫です。
まずは、入力した場所がショートコードを解釈する場所かどうかを確認してみましょう。
また、Font Awesomeを使っている場合は、読み込み設定ができているかも大切です。
さらに、キャッシュの影響で反映が遅れることもあるため、一度キャッシュ削除や再読み込みをしてみると解決することがあります。
「コードが間違っている」と決めつける前に、表示場所と読み込み状況を見直すのがコツです。
デザインを自然に見せるコツ
メニューにアイコンを付けるときは、情報量を増やしすぎないことが大切です。
全部の項目に別々のテイストのアイコンを入れると、かえって視線が散ってしまいます。
おすすめは、主要カテゴリだけに絞って付けることです。
また、アイコンと文字の間隔を少し空けるだけでも、見た目がかなり整います。
かわいさや華やかさを出したい場合でも、サイト全体の雰囲気と合うかを見ながら、やさしく取り入れていくのがおすすめです。
SWELLのカテゴリーアイコンでよくある質問
ここでは、SWELLのカテゴリーアイコン設定でよく迷いやすいポイントをまとめます。
最初につまずきやすい部分を先に知っておくだけで、作業のストレスがかなり減ります。
ショートコードが表示されないのはなぜ？
ショートコードがそのまま文字として表示される場合は、入力した場所がショートコードを処理しない可能性があります。
特に、カテゴリー名そのものにショートコードを入れて反映させようとすると、思った通りに表示されないことがあります。
そんなときは、ショートコードで対応する場所なのか、CSSで調整する場所なのかを見直してみましょう。
この切り分けができると、原因をかなり早く見つけやすくなります。
どのアイコンを選べば違和感が出にくい？
違和感が出にくいのは、カテゴリの意味と近いアイコンです。
たとえば、まとめ記事ならリスト系、レビューなら星系、暮らしならホーム系、学びならブック系など、直感的に伝わるものが向いています。
また、かわいさを重視しすぎるより、読者がひと目で意味を想像できることを優先したほうが、使いやすいサイトになりやすいです。
カスタマイズで失敗しないための注意点
カテゴリーアイコンのカスタマイズでは、いきなり複数箇所を同時に触らないことが大切です。
まずは1カテゴリー、1か所だけでテストして、表示や余白が整ってから広げていくと安心です。
また、アップデート後に見え方が変わることもあるため、設定内容はメモを残しておくと復旧しやすくなります。
小さな工夫ですが、こうした積み重ねが、あとからの管理をとてもラクにしてくれます。
まとめ
この記事のポイントをまとめます。
- SWELLのカテゴリーアイコンは、表示場所によって設定方法を使い分けるのが基本です。
- 本文や一部メニューでは、ショートコードでアイコンを呼び出しやすいです。
- サイドバーのカテゴリー一覧は、CSSで差し替える方法が実用的です。
- ショートコードが表示されないときは、入力場所の仕様確認が大切です。
- SWELL標準アイコンだけでも、十分見やすいデザインに整えられます。
- Font Awesomeを使うと、より幅広いデザイン表現がしやすくなります。
- カテゴリーごとの出し分けは、カテゴリーIDを使うと整理しやすいです。
- 色・サイズ・余白を少し調整するだけで、見た目が大きく変わります。
- アイコン選びは、カテゴリの意味と一致するものを選ぶと自然です。
- 最初は1か所ずつ試してから広げると、失敗しにくくなります。
SWELLのカテゴリーアイコンは、最初は少しややこしく見えても、仕組みを知ると意外と整理しやすいカスタマイズです。
大切なのは、どこに表示したいのかを先に決めて、その場所に合った方法を選ぶことです。
ショートコードで済む場所と、CSSで調整したほうがきれいに仕上がる場所を切り分けるだけで、作業の迷いがぐっと減ります。
見た目のかわいさだけでなく、読者にとってわかりやすい導線づくりにもつながるので、ぜひご自身のサイトに合う形でやさしく取り入れてみてください。
