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

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

アイコンのイメージ

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

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

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

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

<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です。
プラグインを使わなくても簡単に実装できますのでお試しください。

Related Posts