質問: 環境 WordPress プラグインにTheTHORを使用しています 以下のソースでTheThorの追加のCSSからCSSを更新すると ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/fe7f1ab6612425b5845c0d935380d28f.jpeg) このように画像が重なってしまっているのと リストの点が残ってしまっています ・重なっているのは padding-left: 205px; ・リストの点は list-style-type: none; で治ると思っていましたがうまくいかないです TheThorが原因な気がしますが・・・ わかる方アドバイスをお願いします! ``` section ul{ margin: 0; padding: 0; font-size: 86%; list-style-type: none; } section ul li{ padding-left: 205px; line-height: 2.5em; background: left top no-repeat; background-size: 30px auto; } section ul li:nth-child(1) { background-image: url("Rank_1.png"); } section ul li:nth-child(2) { background-image: url("Rank_2.png"); } section ul li:nth-child(3) { background-image: url("Rank_3.png"); } section ul li:nth-child(4) { background: url("Rank_1.png") no-repeat; background-size: 30px auto; } section ul li:nth-child(5) { background: url("Rank_1.png") no-repeat; background-size: 30px auto; } ``` ``` ランキング リストのテスト1 リストのテスト2 リストのテスト3 リストのテスト4 リストのテスト5 ```
回答: 上のコード類で画像の状態まで表示されるのなら・・・の話ですが、 ``` list-style-type: none; padding-left: 205px; ``` それぞれに「!important」を付加して強制すればいいのでは? ``` list-style-type: none!important; padding-left: 205px!important; ``` CSSは基本的に後から読み込まれるものが優先されますので、テーマによってどこに書いたものが後から適用されるのかは異なりますから、kei344さんの回答も正しいと思います(つまりは実際にどうなっているのかを確認する必要があるということです)。!importantはその順を無視して最優先にして!という記述ですので闇雲にこれを使うと「どれが最優先?」となってさらにおかしなことになる場合もありますから限定的に使用するようにしてください。 ----------------------- ただ1つ思うのは質問の場合だと、サイトにあるすべてのリスト要素(ul)に適用されてしまって具合が悪いと思うのですがそちらはチェックされていますか? 通常はその部分だけをクラス指定してその部分に対するCSSを記述してというのが正しいかと思います。 例えばリスト要素に「testlist」というクラスを設けた場合は以下のようになります。 ``` リストのテスト1 リストのテスト2 リストのテスト3 リストのテスト4 リストのテスト5 ``` ``` ul.testlist{ margin: 0; padding: 0; font-size: 86%; list-style-type: none; } ul.testlist li{ padding-left: 205px; line-height: 2.5em; background: left top no-repeat; background-size: 30px auto; } ul.testlist li:nth-child(1) { background-image: url("Rank_1.png"); } ul.testlist li:nth-child(2) { background-image: url("Rank_2.png"); } ul.testlist li:nth-child(3) { background-image: url("Rank_3.png"); } ul.testlist li:nth-child(4) { background: url("Rank_1.png") no-repeat; background-size: 30px auto; } ul.testlist li:nth-child(5) { background: url("Rank_1.png") no-repeat; background-size: 30px auto; } ``` sectionタグは「ページ内の部品の塊ですよ!」とhtml上で明示するためのものですので、必要ならば塊の前後に ``` 塊の内容 ``` を入れればいいでしょう。 冒頭にも書いた通り「TheTHOR」テーマは有料テーマですので、同じテーマを使用している方しか正確な回答ができませんから、TheTHORの公式ページで質問(あるのかな?)するのが一番かと思います。