ルクセリタスのカテゴリーウィジェットをデザインカスタマイズ

ルクセリタスのサイドバーなどに表示するカテゴリーウィジェットをカスタマイズしてみます。

CSSを追記するだけですので、コピペで簡単に完了します。

Before→After
CSS追記
- カラー変更
- アイコン変更
その他のカスタマイズ

Before→After

↓

オンマウス時

背景色付きの角丸枠をつけ、フォルダのアイコンフォントを表示しています。

CSS追記

「Luxeritas」→「子テーマの編集」

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。（Ver.3.7.9以前は「style.cssタブ」）

style.cssに以下を追記します。

/*カテゴリーウィジェット*/
.widget_categories a{
font-size: 14px;
padding:8px;
text-decoration:none;
color:#fff; /*文字色*/
display:inline-block;
width:90%; /*表示幅*/
background:#165e83; /*背景色*/
border-radius:5px;
margin-bottom:5px;
}
.widget_categories a:hover{
background:#8fd2ed;
}
/*アイコンフォント設定*/
.widget_categories a:before{
font-family:"Font Awesome 5 Free";
content:"f07b"; 
font-weight:900;
color:#fff;
float:left;
padding-right:4px;
}

サイドバータイトルをサンプルのように表示するには以下も追記して下さい。

/*サイドバーウィジェットタイトル*/
#side h3, #side h4 {
padding: 10px;
margin: 5px 0;
border: solid 1px #165e83; /*枠線色*/
color:#165e83; /*文字色*/
border-radius:  8px;
}