スポンサーリンク

【WordPress】リストのデザイン変更方法を発見

WordPress WordPress

Blog開設以来、ページデザインの変更が思い通りにならないことにずっと悩んできました。
子テーマのstylesheet.cssに追加すれば済むのはわかっていたのですが、どうにも親テーマに書かれているCSSが邪魔をして、うまく表示されません。

今回のお題はリスト

ulsample
本文中にリスト表示させます。
こいつのデザインを変えたかったのです。


ul {
/*2px 灰色 破線を指定 記事リスト用*/
background: #ccc;
border: 2px #7f7f7f dashed;
}
view raw gistfile1.txt hosted with ❤ by GitHub



これを子テーマのstylesheet.cssに書き込むと、なんとヘッダーのメニューまで反応してしまいました。
つまり、ここもulで表記されているということですね。

要素にclassで名前をつけてあげる

子テーマのstylesheet.cssに[.list]でclassをつくったら、今度はトップページの記事のリストまで反応してしまったので、[.mulist]という名前を自分でつけてあげて以下を書き込みました。


.mulist {
/*2px 灰色 破線を指定 記事リスト用*/
background: #ccc;
border: 2px #7f7f7f dashed;
}
view raw gistfile1.txt hosted with ❤ by GitHub



あとは記事本文を書く際に、以下のようにclass名を加えてあげればOKです。
<ul class="mulist">
</ul>
view raw gistfile1.txt hosted with ❤ by GitHub



これで別の場所に干渉することなく、記事にだけデザイン変更ができるようになりました。
olでも同じことができますね。

コメント

タイトルとURLをコピーしました