WordPressの見出し(段落)のデザイン変更の為CSS配置について

ワードプレス記事内の各コンテンツ毎の見出しをインパクトのあるものに変更したくて、下記コード(h3{ から }まで)を「カスタムCSS」に貼り付けても反映しません。「AddQuicktag」の開始タグは<h3 id="danraku3">　となっており、終了タグは</h3> となっています。これだけでは反映しないのでしょうか。ちなみに、「追加CSS」に貼り付けても反映しません。
アドバイスを宜しくお願い致します

コード

h3{
    position: relative;
    margin: 0 0 1.5em;
    padding: 0.8em 0 0.8em 1.5em;
    border: 2px solid #B92A2C;
    font-size: 1.143em;
    font-weight: bold;
}
 
h3:before{
    content: "";
    position: absolute;
    background: #B92A2C;
    top: 50%;
    left: 0.5em;
    margin-top :-15px;
    height: 30px;
    width: 8px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
```。

azuapricot

2019/12/19 04:30

ワードプレスで関係あるかはわかりませんがキャッシュクリアなどは試してみましたか？

miyabi_pudding

2019/12/19 04:36

WordPressを使っているなら、質問タグにWordPressを追加しましょう。また、コードはコードブロックを使ってください。 <code>ボタンで入力できる ```言語名ここにソースコード ``` という形式です。上記二点の修正は、質問文は、編集が可能なので、本質問にて、行ってください。

maueda

2019/12/19 04:53

azuapricot様：　はい、いろいろ調べキャッシュクリアで履歴等削除も試したのですが、、、

maueda

2019/12/19 04:55

miyabi_takatsuk様： Wordpressです、申し訳ありません。

miyabi_pudding

2019/12/19 04:56

> 上記二点の修正は、質問文は、編集が可能なので、本質問にて、行ってください。 2回目です。

miyabi_pudding

2019/12/19 05:02

私のコメントよくみてください　汗 > WordPressを使っているなら、質問タグにWordPressを追加しましょう。 > また、コードはコードブロックを使ってください。 > <code>ボタンで入力できる > ```言語名 > ここにソースコード > ``` 質問タグとは、上に水色の枠でCSSとなっているやつです。これも追加したり変更したりできます。コードブロックは、今、質問本文に垂れ流してるソースコードを、 ```CSS ここにCSSをいれる ``` って形式でいれれば、コードが見やすい形で整形されるので、そうしてください、ってことです。

dit.

2019/12/19 05:05

テーマは前回までの質問と同じfBloggingですか？また、miyabi_takatsukさんが指摘していますが「質問タグ」の方にもWordPressを追加しておいてください。 teratailではコードをコードを見やすくするための仕組みがあります。 miyabi_takatsukさんの指摘を参考に、===ではなく ```css ここにコード ``` の形で記載してください。パソコンからの編集であればプレビューが表示されているはずなので確認しながら編集してください。ディベロッパーツールを使い、今どんなスタイルが効いているかも確認してください。

azuapricot

2019/12/19 05:05

F12を押して更新ボタン右クリック→キャッシュの消去とハードの再読み込みを押しても改善しませんでした？

azuapricot

2019/12/19 05:09

https://nakaeshogo.com/wp-htag-design/ このサイト見ながらやってみてる感じでしょうか。ちなみにCSS事態には問題がないようなので、wordpressへの設定の仕方に問題がありそうですね h3#danraku3 { } ↑のようにid名を記載しても変わりませんか？

maueda

2019/12/19 05:12

dit.様はい、同様にfBloggingを使用しています。

maueda

2019/12/19 05:22

azuapricot様ありがとございます。自分が使用している h2は希望通りに表示してくれているので、それと同じように h3もと思い貼り付けたのですが、、、。アドバイスを頂いたようにid名を変更してみても文字が大きくなるだけでした。

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえずテーマがfBloggingだと仮定して、質問に提示されているコードを追加CSSに記載したところh3部分の外周に赤いラインと左側に赤い縦ラインが入りました。
（固定ページ内に<h3 id="danraku3">ここが見出し</h3>このように書いた部分です）

ただこの場合サイト内すべてのh3に適用されてしまうので、サイドバー内の見出し等にもスタイルが効いています。

css
1h3#danraku3{
2    position: relative;
3    margin: 0 0 1.5em;
4    padding: 0.8em 0 0.8em 1.5em;
5    border: 2px solid #B92A2C;
6    font-size: 1.143em;
7    font-weight: bold;
8}
9
10h3#danraku3:before{
11    content: "";
12    position: absolute;
13    background: #B92A2C;
14    top: 50%;
15    left: 0.5em;
16    margin-top :-15px;
17    height: 30px;
18    width: 8px;
19    border-radius: 2px;
20    -webkit-border-radius: 2px;
21    -moz-border-radius: 2px;
22}

にするとか

css
1#main-content h3{
2    position: relative;
3    margin: 0 0 1.5em;
4    padding: 0.8em 0 0.8em 1.5em;
5    border: 2px solid #B92A2C;
6    font-size: 1.143em;
7    font-weight: bold;
8}
9
10#main-content h3:before{
11    content: "";
12    position: absolute;
13    background: #B92A2C;
14    top: 50%;
15    left: 0.5em;
16    margin-top :-15px;
17    height: 30px;
18    width: 8px;
19    border-radius: 2px;
20    -webkit-border-radius: 2px;
21    -moz-border-radius: 2px;
22}

にすることで対処できると思います。

投稿2019/12/19 05:16

dit.

総合スコア3235

maueda

2019/12/19 05:34

テーマはfBloggingです。いただきました画像のような見出しにしたいのですが。教えて頂いたコードを配置しても、そのようには反映せず、色が少し変わり文字が大きくなるだけでした。この文字の色はh2ですでに使ってる見出しのものなのですが、その辺りに原因があるのでしょうか。

dit.

2019/12/19 05:47

こちらの検証はAddQuicktagを使わずコードエディタに切り替えて見出しを直接記述しているので、質問者さんとの環境に何かしらの違いはあるかもしれません。 h2ではできているということなので、記事上の見出しがh3になっているか、 cssやhtmlの記述で全角を使っていないか cssの記述がきちんと閉じられているか（；や}の記述漏れがないか）等確認してみてください。 h2で使っていても問題はないはずです。（h2とh3で全く同じデザインにすることも可能ですので）実際に表示させた時のhtmlの記述も確認してください。

maueda

2019/12/19 05:58

アドバイスをもとに何となくテキストエディタで見返してみたら、"”danraku3″" というふうに両内側に余計なものが入り込んでいました。それらを削除すると反映する事が出来ました！説明が下手な中、いつも本当にありがとうございます。

dit.

2019/12/19 07:34

解決したようでなによりです。

行動規範の内容に同意します