質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

268閲覧

リストタグのCSSがamazonJSにも適用されてしまう

Shrimp

総合スコア8

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/11/05 07:04

###前提・実現したいこと
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はそれぞれ別のサイトからコピペしたので別々に記述しています。
上手くまとめることができなかったので、まとめることができるのであればご指導頂けるとありがたいです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CSS

1.entry-content .amazonjs_item ul { 2 border: 0 none; 3 border-radius: 0; 4}

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2017/11/05 07:13

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Shrimp

2017/11/05 07:26

ありがとうございました。 おかげさまで無事に解決することができました。 案内していただいたデベロッパーツールの紹介も読ませていただきます。 ご丁寧にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問