サイドバーのカテゴリーリストをボタン表示にする

2017.08.152024.10.07

この記事は約5分で読めます。

記事内に広告が含まれています。

本記事は、サイドバーのカテゴリーリストをツリー表示からボタン表示に変更するカスタマイズの方法を紹介するものです。
特にテーマがLuxeritasの方にはCSS装飾の色調を合わせてますので、使いやすいと思います。

完成図
参考サイト
関数
1. １　記事数表示が必要ない場合
2. ２　記事数表示が必要な場合
CSS
まとめ

完成図

私の使っているLuxeritasですと、元はこんな感じ。

非常にシンプルです。
十分に用はなすんですけど……味気ない。

そこで、こんな風に変えます。

参考サイト

本記事はdoop 様の記事を参考にしています。
ショートコード部分はそのまま利用しますので、必要に応じて元サイトを御参照ください。

関数

２つに場合分けします。

１　記事数表示が必要ない場合

特にやることはありません。
カテゴリーウィジェットの「投稿数を表示する」などのチェックが全て外れていることを確認してください。

２　記事数表示が必要な場合

以下のページの関数をfuncitons.phpに記述します。

404 NOT FOUND | doop

There is always an easier way to do it...

終わったら、テキストウィジェットをサイドバーに設置して、ショートコードを記述してください。

CSS

以下のCSSをstyle.cssに記述してください。
元のですと文字が小さく感じるので大きくしています。
また色をLuxeritasのSNSボタンのホワイトカラーバージョンに合わせています。
もし気に入らない場合は、横に説明をつけましたので変えて下さい。

/************************************
**　カテゴリー一覧
************************************/
.widget_categories ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
.widget_categories ul li {
 display: inline-block;
 margin: 0 .5em 0 0 !important;
 padding: 0;
}
.widget_categories ul li a {
 position: relative;
 display: inline-block;
 max-width: 260px;/*ボタンの最大幅、一番長いカテゴリ名に合わせて調整*/
 height: 29px;/*ボタンの縦幅*/
 line-height: 28px;
 padding: 0 4em 0 .6em;/*ボタン内部のパディング幅、最後に調整するといい感じ*/
 background-color: rgb(251, 251, 251);/*ボタンの色*/
 border: 1px solid #ccc;/*ボタンの枠線*/
 border-radius: 3px;/*ボタンの丸み*/
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 color: #333;/*文字の色*/
 font-size: 13px;/*文字の大きさ*/
 text-decoration: none;
 -webkit-transition: .2s;
 transition: .2s;

}
.widget_categories li .cat_count {
 position: absolute;
 top: 3px;
 right: 5px;
 z-index: 2;
 width: 28px;/*カウント部分の幅*/
 height: 21px;/*カウント部分の高さ*/
 line-height: 18px;
 background-color: #fff;/*カウント部分の背景色*/
 border: 1px solid #ccc;/*カウント部分の境界線*/
 border-radius: 100%;
 color: #333;/*カウント部分の文字色*/
 text-align: center;
 -webkit-transition: .2s;
 transition: .2s;
}
.widget_categories ul li a:hover {
 background-color: #c4fdfd;/*ホバーした時の色*/
 border: 1px solid #c4fdfd;/*ホバーした時の境界線*/
 color: #333;/*ホバーした時の文字色*/
}
.widget_categories ul li a:hover .cat_count {
 background-color: #fff;/*ホバーしたときのカウント部分の色*/
 color: #333;/*ホバーしたときのカウント部分の文字色*/
}
#text-【ウィジェットに割り振られた番号】 .widget {
 margin: 0 0 1px 0;
 padding: 5px 5px;

textの番号の調べ方は次の通り。
ChromeでF12をクリックし、右上部分にマウスを当てて下へ下ろしていきます。
すると、次のようになります。