WordpressのCSSについて

Question

追加CSSにCSSを書き込めばCSSが適応されるというのを知ったので、試してみたとこ下記の画像のように表示されました。

CSSの知識がないのでサルワカさんのHPで公開されているコードを参考にして追加CSSに記述しました。

h3 {
background-color: white;
border-bottom: dashed 2px #000;
margin-bottom:10;
padding:0;
/*線の種類（点線）2px 線色*/
}

そのままでは背景も設定済みで色がついてしまっていたのでその部分は自分で白に設定することができたのですが、文字の下の線がどう消していいのかわかりませんでした。

CSSがほとのどわからない状態なので大元のテンプレートで設定されているCSSを一部だけ（hタグだけどとか）変更してしまいたいのですが、変更することは可能でしょうか？
また、どこで大元のCSSが定義してあるかも教えていただきたいです。

Answer 1

文字に下線が設定されていると思われます。

CSSの場所などはKazuhiroHatanoさんが解説されていますのでそちらを見ていただければと思います。

恐らくtext-decorationで下線が引かれているのでは？と思われますので

上のコードに

text-decoration:none;

を加えて

h3 {
text-decoration:none;
background-color: white;
border-bottom: dashed 2px #000;
margin-bottom:10;
padding:0;
/*線の種類（点線）2px 線色*/
}

とすれば下線は消えるかもしれません（詳しくは元のCSSに書かれているものを見ないと何とも言えません）。

もしも

text-decoration:none;

を追加してもだめなら、

text-decoration:none!important;

に記述を変えて優先的に適用されるようにすればうまくいくかもしれません。

Answer 2

CSSがどこで定義されているかはブラウザで
右クリック＞検証　で表示される要素の情報から
適用されているCSSとその定義ファイルを辿って調べます

Wordpressのテーマはwp-content/themes/の中にいて
およそテーマのフォルダ内のstyle.cssに多くのCSSは書かれてます

しかしテーマファイルの編集はお勧めしません

ブラウザで要素に適用されているCSSのセレクタをみて
追加CSSでそれより優先度の高いセレクタでCSSを書くとかした方がまだましです

Comments

[harumi]

なるほど...直接いじらないほうがいいんですね
text-decoration: none;
追加CSSこのタグを打っても消えてくれなかったのですがどうしたらいいのでしょうか

[KazuhiroHatano]

「ブラウザで要素に適用されているCSSのセレクタをみて
それより優先度の高いセレクタでCSSを書く」
下線はどこからきてるのか調べるところから
本当にtext-decoration:underline;でつけられてるかもわからないですからね

[harumi]

ありがとうございます。
position: static;
にしたら消えました

[KazuhiroHatano]

それで消えたとしたら、多分position:absoluteで線を配置してたって感じなんでしょうね
下線、ページの左上とかにすっ飛んでないですか？

[harumi]

画面上には見えていないと思うのですが、staticにしても消せていないんでしょうか？
僕のブログのリンクです
http://harumi.sakura.ne.jp/wordpress/2018/09/18/protocol/

[KazuhiroHatano]

うん、コメントフォームの左下にいますね

線はh3::afterでつけてたみたいですね

[harumi]

本当にいました...
ありがとうございます自分では全然気づけなかったです。

ググってみてこのように記述したら消すことができました。
h3::after{
content:none;
}

丁寧に答えてくださってありがとうございました、すごく助かりました、まだまだわからないことだらけですがコツコツ頑張ります！

Answer 3

テーマは前回の質問と同じLightningでしょうか？
h3そのものではなく:afterで色を付けているようなので、とりあえず以下で対応できるかと。

h3:after{
	display:none;
}

サイドバーの所も消したいなら

.subSection-title:after, h3:after {
  display:none;
}

Comments

[harumi]

テーマはLightningを使っています
ありがとうございます!!やってみます