###前提・実現したいこと
wordpressでsimplicityというテーマを使いブログを運営しています。
CSSはネットで公開されている記述をコピペしているのですが、ネットの情報で解決できず、質問させていただきました。
該当する問題を改善するCSSの記述や、最適化をお願いしたいと思っています。
###発生している問題・エラーメッセージ
子テーマを使ってリストタグの番号あり&なしの装飾をCSSで行ったところ、プラグイン「AmazonJS」のデザインにも干渉してしまいました。
番号なしリストタグのデザインがこちらです。
amazonJSも枠で囲まれてしまいました。
最初は枠だけでなく、レ点のついた〇もamazonJSに表示されていましたが、ネットで見たCSSで〇は消すことができました。
###該当のソースコード
.amazonjs_item .amazonjs_image :after { content:none !important; } .amazonjs_item ul li:before { border:none !important; width:0 !important; }
###番号なしリストタグのCSS
/* 番号なしリストタグの枠装飾 */ .entry-content ul { border: solid 2px #cebff3; border-radius: 5px; padding: 0.5em 1em 0.5em 2.3em; position: relative; } /* 番号なしリストタグの装飾 */ .entry-content ul { list-style: none; margin-bottom: 1.5em; } .entry-content ul li { position: relative; padding-left: 0.9em; margin: 0.8em 0; } .entry-content ul > li:before { content: "\f00c"; font-family: FontAwesome; color: #ffffff; background: #ded4f7; border: 1px solid #cebff3; border-radius: 50%; text-align: center; margin-right: 0.4em; width: 1.3em; height: 1.3em; position: absolute; left: -15px; top: 3px; line-height: 1.4; } .entry-content ul li ul { margin: 0 0.4em 0 -1.2em; } /* toc */ #toc_container .toc_list li:before { content: none; }
番号ありリストタグの装飾
/* 番号ありリストタグの枠装飾 */ .post ol { border: solid 2px #cebff3; border-radius: 5px; padding: 0.5em 1em 0.5em 2.3em; position: relative; } /* 番号ありリストタグの装飾 */ .post ol { counter-reset: li; } .post ol > li { list-style: none; position: relative;/*リストの項目の位置を基準に*/ padding-left: 2.5em; /*li:before分左に余白を。調整可*/ /*margin-bottom: 0.8em;*//*リストの数字がくっついてしまう場合*/ } .post ol > li:before { counter-increment: li; content: counter(li); margin-right: 1em; background: #ded4f7; /*濃い紫*/ border: 1px solid #cebff3; /*薄い紫*/ color: #555555; /*グレー*/ border-radius: 50%; /*丸く*/ text-align: center; /*端に寄ってる数字を真ん中に*/ width: 1.3em; /*幅を決めるheightと同じ数値に*/ height: 1.3em; /*高さ。widthと同じ数値に。数値変更した場合はline-heightで調整を*/ position: absolute; /*リストの基準から移動させる*/ left: 0em; /*項目の基準、左にあわせる*/ top: 2px; /*基準の上から2pxの位置に表示。テーマによって位置がずれる場合は修正を*/ line-height: 1.4;/*数字の位置あわせで数値を指定*/ }
###補足情報
〇のデザインのCSSと、枠のCSSはそれぞれ別のサイトからコピペしたので別々に記述しています。
上手くまとめることができなかったので、まとめることができるのであればご指導頂けるとありがたいです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/05 07:26