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

スタイリッシュ

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

 

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

 

デザイン変更

デフォルト表示例

8501_02

 

カスタマイズ表示例

 

  • 位置調整
  • リストの前に矢印アイコンフォント

8501_01

 

CSS追記

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

 

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

ul {list-style:none;}

 

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

 

 

上記のカスタマイズ例用CSS

 

以下はルクセリタスでの例ですので、お使いのテーマに合わせたクラス名でご利用下さい。

 

/*********************
* サイドバーのリスト
* ******************/
#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;
}

 

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

 

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

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

 

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

  • WordPressランキング
  • にほんブログ村 IT技術ブログ Webサイト構築へ