カテゴリーウィジェットなどのリストスタイルをカスタマイズする

ワードプレスのサイドバーに出せるウィジェット（「カテゴリー」など）で、リストタイプのもののスタイルを変更する例です。

この記事での画面例はルクセリタスになっています。お使いのテーマにより初期デザインやクラス名が異なりますのでご注意下さい。

デザイン変更

CSS追記

お使いのテーマの子テーマ用スタイルシート（style.css）に追記します。

リストスタイル「・」などを消す例

ul {list-style:none;}

リストスタイルの色々については　以下の「リスト」項目にあります。

/*********************
* サイドバーのリスト
* ******************/#side .widget ul li{
position:relative;
padding:15px 0 0px 30px;
margin-bottom:10px;
border-top:dotted 1px #D8D8D8;
line-height:1.2;
}
#side .widget ul li:before{
font-family: "Font Awesome 5 Free";
content: "f152";
font-weight: 900;
color:#5787b7;
padding-right:5px;
}

※ルクセリタスをお使いの方で、フッターウィジェットも同様にする際は、フッターエリアのクラス名でも追記して下さい。

#footer.widget

見出しについて

ついでにサイドバー、フッターでのタイトル見出しデザインをこの記事でのサンプルと同じようにする場合は以下です。

/************************//*サイドバー・フッターウィジェットタイトル*//************************//* Side Title */#side h3 {
padding: 10px;
margin: 5px 0;
border: solid 1px #779dc4;
border-radius: 8px;
color:#779dc4;
font-size:18px;
}
#side h4 {
padding: 10px;
margin: 5px 0;
border: solid 1px #e1e1e1;
color:#878787;
font-size:14px;
}
#footer h4 {
padding: 10px;
margin: 5px 0;
border: solid 1px #779dc4;
border-radius: 8px;
color:#779dc4;
font-size:18px;
}

見出しデザインは以下も参考にして下さい。

アイコンフォントについて

アイコンフォントを利用していない環境の方は、以下で使い方を説明していますので参考にして下さい。

他の矢印アイコンは以下もご覧ください。