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

2019-07-18ルクセリタス・カスタマイズ

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

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

 

Before→After

↓

 

オンマウス時

 

 

 

CSS追記

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。（Ver.3.7.9以前は「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;
}

 

 

カラー変更

カラーの変更には以下をご利用下さい。

マカロンビビッドパステル和色セーフ色名 赤桃青紫黄橙緑茶黒

 

 

アイコン変更

アイコンフォントは「Font Awesome」のフリーフォントを利用しています。

 

アイコンフォントが表示されない、または使い方がわからない方は以下の記事内

「ルクセリタスをお使いの方へ」の項をご覧ください。

 

 

他のアイコンを使う場合は、以下も参考にして下さい。

 

 

 

その他のカスタマイズ