Blog開設以来、ページデザインの変更が思い通りにならないことにずっと悩んできました。
子テーマのstylesheet.cssに追加すれば済むのはわかっていたのですが、どうにも親テーマに書かれているCSSが邪魔をして、うまく表示されません。
今回のお題はリスト
本文中にリスト表示させます。
こいつのデザインを変えたかったのです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ul { | |
/*2px 灰色 破線を指定 記事リスト用*/ | |
background: #ccc; | |
border: 2px #7f7f7f dashed; | |
} |
これを子テーマのstylesheet.cssに書き込むと、なんとヘッダーのメニューまで反応してしまいました。
つまり、ここもulで表記されているということですね。
要素にclassで名前をつけてあげる
子テーマのstylesheet.cssに[.list]でclassをつくったら、今度はトップページの記事のリストまで反応してしまったので、[.mulist]という名前を自分でつけてあげて以下を書き込みました。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.mulist { | |
/*2px 灰色 破線を指定 記事リスト用*/ | |
background: #ccc; | |
border: 2px #7f7f7f dashed; | |
} |
あとは記事本文を書く際に、以下のようにclass名を加えてあげればOKです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ul class="mulist"> | |
</ul> |
これで別の場所に干渉することなく、記事にだけデザイン変更ができるようになりました。
olでも同じことができますね。
コメント