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

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

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

デザイン変更

CSS追記

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

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

ul {list-style:none;}

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

CSSとは？　CSSの基本とセレクタ・プロパティ一覧＋使用例

CSSとは？ CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページをデザインする為、スタイルを記述する言語です。 CSSは、HTMLと組み合わせて使用します。 HTML（エイチティーエ...

ayaito.net

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

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

見出し(H2～H5)デザインCSSをまるごとコピペ！４パターン＋α

とにかく簡単にコピペで初期の見出しタグを実装する為のラフCSSです。 H2~H5を一度にコピーできるサンプル４バターン、サクっとコピペでも可能です、その他にも見出しサンプルちょっと載せてありますので、それぞれからお好みのデザインの部分を組み...

ayaito.net

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

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

Font Awesomeアイコンフォントのサイズ・向き等の変更とコードが消える対処法

当サイトでは　Ver.5以降を使用しており、記事もすべて同様のバージョンでの利用に基づいています。 Ver.4.7を使っておられる方で、アイコンフォントを探したい場合は以下をご覧ください。 Font Awesome Ver.6　について 2...

ayaito.net

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

矢印アイコンフォントのコード３２選まとめでサクっとコピー

「Font Awesome」のフリーフォントです。 なんとフリーのものだけで1,500もあるので、よく使う、または使えそうなアイコンフォントのコードをまとめまています。 このページでは「矢印」のアイコンを３２個載せています。 Font Aw...

ayaito.net