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

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

 

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

 


 

デザイン変更

デフォルト表示例

 

カスタマイズ表示例

 

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

 

CSS追記

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

 

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

ul {list-style:none;}

 

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

CSSとは? CSSの基本とセレクタ・プロパティ一覧+使用例
CSSとは? CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページをデザインする為、スタイルを記述する言語です。 CSSは、HTMLと組み合わせて使用します。 HTML(エイチティーエ...

 

 

上記のカスタマイズ例用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;
}

 

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

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

 

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

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

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

 

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

矢印アイコンフォントのコード32選まとめでサクっとコピー
「Font Awesome」のフリーフォントです。 なんとフリーのものだけで1,500もあるので、よく使う、または使えそうなアイコンフォントのコードをまとめまています。 このページでは「矢印」のアイコンを32個載せています。 Font Aw...
綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています

View Comments (6)

  • だめでした!また別の方法を探してみます!ありがとうございました。

    • #side .widget の指定をしていないからではないでしょうか?

      ソースまで全部見ていないのでわかりませんが、
      ページャーの部分もリストスタイルで表示されている為、
      単に「ul」や「li」にスタイルを設定すると、そちらにも反映されてしまうので、
      サイドバーのウィジェットエリアのみなど、リストスタイルにデザインを反映させたい部分のみを指定して設定するのが一番いいですが、
      もしかすると以下を1行追記でいけるかも?

      #paging .pagination ul li:before{contents:none;}

  • ちょっと現象が確認できないのですが、お使いのテーマはルクセリタスでしょうか?
    テーマが違えばリストスタイルもページャーのスタイルも使っているCSSクラス名などが違う為、当方では確認不可です。

  • 記事が長くなったので、2ページに分割したのですが、記事のリストスタイルがページャーに反映されています。

    ページャーのリストスタイルはどうやって消しますでしょうか?