Wordpressにおけるh2タグの装飾について

Question

###前提・実現したいこと
h2タグの装飾を変更したい

###発生している問題・エラーメッセージ

h2タグのCSSがheadタグ内に出力されているため、子テーマのstyle.cssで装飾コード追加しても優先度が低く、追加したコードが反映されない

###該当のソースコード

.content h2{
  display: block !important;
  margin: 0 0 1.5em !important;
    padding: 0.8em !important;
    border-left: 7px solid #B92A2C !important;
    border-bottom: 1px dashed #B92A2C !important;
    font-size: 1.143em !important;
    font-weight: bold !important;
}

###試したこと
子テーマのstyle.cssや、プラグイン「simple css」でh2タグに装飾をつけようとしましたが、反映されず元のh2タグの装飾でした。

###補足情報(言語/FW/ツール等のバージョンなど)
使用テーマは、マテリアル2です。
http://wp-material2.net/downloads/
申し訳ありません。こちらからテーマを取得しました。

Comments

[kei344]

WordPressテーマはテーマ名だけではなく取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）

[nikukyu]

ご指摘ありがとうございます！取得URLを追記しました。

Answer 1

.content_body h2 です。

---

【開発者ツールを使おう！ カスタマイズする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

Comments

[nikukyu]

ありがとうございます！
無事反映はされたんですが、元の装飾に重なって表示されてしまいます...
元の装飾を全く表示させないようにする方法があれば教えていただきたいですm(_ _)m
よろしくお願い致します。

[kei344]

デベロッパーツールで見ました？

[nikukyu]

html,body{height: 100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-style:normal; font-weight: normal; font-size: 100%; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
p, h1, h2, h3, h4, h5, h6{word-wrap:break-word; overflow-wrap:break-word;}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

body{
font-size: 18px;
line-height: 1.7;
font-family: "メイリオ", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
color: #333;
min-width: 1130px;
background: #fff;
}

見てみたんですが、どこをどうすればいいか分かりませんでした...
ここあたりですかね...？

[kei344]

要素（H2とか）を右クリック ⇒「検証」でその要素に当たっているスタイルがわかります。それを上書きするスタイルを書けばよいです。

【CSSを弄るなら、Chromeの「デベロッパーツール」は絶対使えたほうが良い】
http://cthuwebdice.session.jp/htmlcss/developertools/

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

[nikukyu]

見る場所が分かりました！！
あとは該当する場所のcssを消せばいいんですね！？
ありがとうございましたm(_ _)m

[nikukyu]

ありがとうございました。
勉強になりましたm(_ _)m

[kei344]

> cssを消せばいいんですね！？
消してもいいけど、子テーマでやるなら上書きするのが良いとは思います。（元テーマを編集してしまうのは子テーマの意味がなくなるので･･･）
例えば、もともと付いている背景色を消したかったら background-color: transparent; で消えます。

【background-color - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/background-color

[nikukyu]

教えてくださってありがとうございますm(_ _)m

.content_body h2 {
background: #2c68c1;
}

とあったのですが、

.content_body h2 {
background:　transparent ;
}
でいいのでしょうか？

.content_body h2 {
background-color:　transparent ;
}

も両方試してみたのですが、背景が透明になりませんでした...
どこか間違っていますでしょうか？？

[kei344]

background:　transparent ;の「:　t」の間の空白が全角です。

[nikukyu]

ありがとうございます！
無事希望通りにできました。
お世話になりました(*^^*)