【CSS】ブログのサイドバーのテキストにカテゴリーアイコンを表示する方法

少し前にブログのサイドバーにカテゴリーアイコンを付けました。

カテゴリーアイコンのイメージ

最初、カテゴリやページのリンクにアイコンを付けられるWordPressプラグイン「Category and Page Icons」をインストールしましたが、当ブログの環境では上手く動作しませんでした。パーミッションをいじったり、直接画像をアップロードしたり、色々試してみましたがダメでした…orz

そこで、プラグインを使わずにCSSを変更して表示することにしましたので、その方法を簡単に説明します。

カテゴリーにアイコン画像を表示する方法

まず、カテゴリーを表示している部分のHTMLソースを確認します。

WordPressのサイドバーのカテゴリーにアイコン画像を表示する

<div class="widget-2 side_widget">
<h3>カテゴリー</h3>
<ul>
<li class="cat-item cat-item-15"><a href="https://www.webernote.net/category/firefox" title="Firefox">Firefox</a></li>
<li class="cat-item cat-item-29"><a href="https://www.webernote.net/category/iphone" title="iPhone">iPhone</a></li>
<li class="cat-item cat-item-9"><a href="https://www.webernote.net/category/webcreate" title="Webサイト制作">Webサイト制作</a></li>
<li class="cat-item cat-item-12"><a href="https://www.webernote.net/category/webinfo" title="Web関連記事">Web関連記事</a></li>
<li class="cat-item cat-item-13"><a href="https://www.webernote.net/category/wordpress" title="Wordpress">Wordpress</a></li>
<li class="cat-item cat-item-26"><a href="https://www.webernote.net/category/news" title="ニュース">ニュース</a></li>
<li class="cat-item cat-item-25"><a href="https://www.webernote.net/category/lifehack" title="lifehack">ライフハック</a></li>
<li class="cat-item cat-item-17"><a href="https://www.webernote.net/category/memorandum" title="雑記">雑記</a></li>
</ul>
</div>

WordPressの場合、クラスが自動で付与されていると思いますのでcssでそれぞれの<li>に画像を適用します。

.side_widget ul .cat-item-15 {
 background-image: url(images/firefox.png);
 background-position: 0 4px;
 background-repeat: no-repeat;
 margin-left: 5px;
 padding-left: 27px;
}
.side_widget ul .cat-item-29 {
 background-image: url(images/iphone.png);
 background-position: 0 4px;
 background-repeat: no-repeat;
 margin-left: 5px;
 padding-left: 27px;
}
.side_widget ul .cat-item-9 {
 background-image: url(images/pc.png);
 background-position: 0 4px;
 background-repeat: no-repeat;
 margin-left: 5px;
 padding-left: 27px;
}
.side_widget ul .cat-item-12 {
 background-image: url(images/global.png);
 background-position: 0 4px;
 background-repeat: no-repeat;
 margin-left: 5px;
 padding-left: 27px;
}
.side_widget ul .cat-item-13 {
 background-image: url(images/wp.png);
 background-position: 0 4px;
 background-repeat: no-repeat;
 margin-left: 5px;
 padding-left: 27px;
}
.side_widget ul .cat-item-26 {
 background-image: url(images/news.png);
 background-position: 0 4px;
 background-repeat: no-repeat;
 margin-left: 5px;
 padding-left: 27px;
}
.side_widget ul .cat-item-25 {
 background-image: url(images/lh.png);
 background-position: 0 4px;
 background-repeat: no-repeat;
 margin-left: 5px;
 padding-left: 27px;
}
.side_widget ul .cat-item-17 {
 background-image: url(images/book.png);
 background-position: 0 4px;
 background-repeat: no-repeat;
 margin-left: 5px;
 padding-left: 27px;
}

こんな感じで背景画像を指定すればOKです。

WordPressのサイドバーのカテゴリーにアイコン画像を表示する

プラグインを使わなくても簡単に実装できますのでお試しください。

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

2 件のコメント

  • 返信 まゆ |

    テンプレートを使っての試み。
    カテゴリに参考のようなアイコンをつけたいんですが、やっぱり超初心者で判りません。
    凄いです。
    どこをどう見たら良いのかすら・・・真似したい!

    • 返信 Turkey |

      >まゆさん
      最初はなかなか難しいですよね。
      ざっくり説明するとCSSでリストの背景にアイコンを置いて、画像の位置を調整してるって感じです。結構使えるテクニックだと思いますので、覚えておくと便利だと思いますよー!

コメント