小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

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

カスタマイズ&プラグイン
この記事は約5分で読めます。

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

スポンサーリンク
この記事を読む方へのオススメ

完成図

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

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

質問者の写真

味気ないなあ……
 

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

スポンサーリンク

参考サイト

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

スポンサーリンク

関数

2つに場合分けします。

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

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

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

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

WordPressでサイドバーのカテゴリ表示をカスタマイズする – doop
Webサイトをリニューアルして以来、ずーっと気になっていたのが サイドバーに表示している「カテゴリー」のデザイン。 ただ縦に並んでるだけなので、やたらスペースをとるし、何よりカッコ悪い。 WordPressの標準についてるタグクラウドも悪くはないけど、投稿数を表示できない。 と、言うわけでカスタマイズしてみる。

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

スポンサーリンク

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をクリックし、右上部分にマウスを当てて下へ下ろしていきます。
すると、次のようになります。

示された番号を記入してください。

スポンサーリンク

まとめ

解答者の写真
利便性だとツリー型の方が優るんだけどね
デザインを優先したい方には試してほしい
 

当サイトだと正直カテゴリーリスト自体の利用率が高くないのもあるから「ま、いっか」って感じです。
ツリー型でお洒落なCSSを紹介したサイトも結構あるから、よかったら探してみてください。

アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
カスタマイズ&プラグイン
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました