WordPressの有料テーマ『AFFINGER6』で、サイドバーのカテゴリ名一覧（カテゴリーリンク）をスタイルシート（CSS）で装飾する方法です。
コピペでOKのCSSコードをご紹介します。
『AFFINGER管理』に初めからチェックが入っている、
【全体設定】＞＞【カテゴリーリンク】＞＞【カテゴリーリンクに簡易デザイン適応】
だと、ウィジェット『カテゴリー』で作成できる『カテゴリーリンク』はこの状態です↓↓↓
シンプル便利系です。
↑↑↑これを、こうします↓↓↓
以下のコードをコピーして、【外観】＞＞【カスタマイズ】の【追加CSS】部分にペーストしてください。
このままだと、当サイト『あとりえ極星堂』のサイトカラーと同じ色合わせになります。
『あとりえ極星堂』とおそろいでもOKですが（笑）、せっかくなので、ご自身のお好きな色を使って装飾してくださ～い＾＾
/*サイドバーのカテゴリ名でフォントオーサム（＞）を消す*/
#side li.cat-item a::after {
content: "";
font-family: FontAwesome;
position: absolute;
right: 10px;
}
/*サイドバーのカテゴリ名を付箋風にする*/
.cat-item-label{
font-size:16px;/*カテゴリ名のフォントサイズ*/
color:#0b409c;/*カテゴリ名の文字色*/
display: inline-block;
width:85%;/*付箋の長さ（100%まで伸ばせます）*/
padding: 5px 0px 5px 15px;
background-color: #f2f7ff;/*付箋の背景色*/
border-left: solid 16px #dadde5;/*付箋の左側の色*/
border-bottom: solid 1px #dadde5;/*付箋下のボーダーの色*/
}
/*サイドバーのカテゴリ名で、名称間のボーダーと余白を調整する*/
#side li.cat-item a {
padding: 5px;
border-bottom: 0px solid #e1e1e1;
}いま紹介したコードでは消えてしまっていますが、デフォルトの簡易デザインではそれぞれのカテゴリ名の間に薄いグレーのボーダーが表示されています。
グレーのボーダーうっすら存在しています。
そのカスタマイズについて、以下で解説します。
ボーダーを表示させてデザインしたい方は、この続きもご覧ください＾＾
それぞれのカテゴリ名の間にあるボーダーは表示させたいんだけど……
ボーダーを表示させたい
『 /*サイドバーのカテゴリ名で、名称間のボーダーと余白を調整する*/ 』の箇所のCSSを消すと、デフォルトの簡易デザインのときに表示されている薄いグレーのボーダーを表示させることができます。
表示させたボーダーの色を変えたい
ボーダーの色だけを変えたいときは、『 /*サイドバーのカテゴリ名で、名称間のボーダーと余白を調整する*/ 』の箇所のCSSをこんな感じにしてください↓↓↓
このサンプルでは、黒いボーダー（#000000）が出てくるはずです。
以下のコードで『#000000』となっているところにお好きな色を入れると、その色のボーダーが表示されるという仕組みです。
/*サイドバーのカテゴリ名で、名称間のボーダーと余白を調整する*/
#side li.cat-item a {
padding: 5px;
border-bottom: 1px solid #000000;
}表示させたボーダーの太さを変えたい
ボーダーの太さを変えることもできます。
『border-bottom』の行の意味は以下のとおりなので、px数を上げると太いボーダーにできます。
border-bottom: 【ボーダーの太さ】px 【ボーダーのデザイン】 【ボーダーの色】;表示させたボーダーのデザインを変えたい
デフォルトの『solid』は直線のこと。
CSSではいろんなボーダーデザインがあるので、直線以外も表示させることができます。
やり方はとっても簡単！
紹介しているコードで『solid』となっている箇所を以下のデザインのものに変更します。
すると、そのデザインが反映されてます。
※デザインによっては、ボーダーの太さをちょっと太くしないとわかりづらいかもしれません……。
- solid：直線
- dashed：破線
- dotted：点線
- double：二重線
- groove：くぼんだ線
- ridge：隆起した線
このコードを書いた理由
サイドバーに置く「カテゴリ名の一覧リンク」のデフォルト簡易デザインが、あまりにシンプルだったからです……。
メニューのウィジェットを使って「カテゴリ名の一覧リンク」を作れば、そこそこカッコイイデザインにはなるようです。
が、メニューのウィジェットを使って「カテゴリ名の一覧リンク」を作ると、カテゴリを増やしたり減らしたときにそれが自動では反映されないんですね～。
わざわざ自分で、メニューの作成画面から変更を加えないといけない。
対してウィジェット『カテゴリー』だと、カテゴリに変更を加えたときに自動で反映されます。
わたしは更新作業でとことんラクをして自動化したいからこそ、WordPressでサイトを制作しています。
カテゴリの変更をするたびに手動でメニューをいちいち書き換えるくらいなら、最初にCSSを書いてしまうぞ～って思ってしまったので書いちゃいました。
といいつつ、デフォルトの簡易デザインもいいな～と思い始めてしまいました。
2021年8月現在はデフォルトデザインで「カテゴリ名の一覧リンク」を作っているので、このコードは使っていません……。
せっかく書いたのにな～。
