WordPress CSSで見出しを作りたい

Question

h4のみが有効になっており、h2、h3が効いていない状態です。
何か原因があるのでしょうか。

■設定までの経緯
こちらのページを参照????https://saruwakakun.com/html-css/reference/h-design

①AddQuicktagのインストール
②Simple Custom CSSのインストール
③AddQuicktagの設定

④「外観」→「カスタムCSS」→「Simple Custom CSS」に以下を挿入

  h2#danraku2 {
   padding: 0.4em 0.5em;
   color: #494949;
   background: #f4f4f4;
   border-left: solid 5px #7db4e6;
   border-bottom: solid 3px #d7d7d7;
  }
  
  h3#danraku3 {
   padding: 0.25em 0.5em;
   color: #494949;
   background: transparent;
   border-left: solid 5px #7db4e6;
  }
  
  h4#danraku4 {
   font-family: "Font Awesome 5 Free";
   position: relative;
   padding: 0.25em 0;
  }
  h4:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
    background: linear-gradient(to right, rgb(230, 90, 90), transparent);
  }

⑤新規投稿

⑥プレビュー
h4のみが有効になっており、h2、h3が効いていない状態。

今回目指したいゴール
上からh2、h3、h4で設定したいです。

もとの設定があるのかと思い、!importantを入れることも試みましたがダメでした。
何か他に原因があるのでしょうか。

Comments

[Daregada]

二重引用符のフォントが左右で違っていますよね。半角の " になっているか確認してください。

[pedro]

ご回答頂きありがとうございます。
すみません。知らなかったです。この場合ページ内にidが3つあることが原因でしょうか。

[Daregada]

いえ、idは同じランク(数字)のものを2つ以上使うときだけ問題になります。

[pedro]

ありがとうございます。無事に解決いたしました！

Answer 1

画像から、IDを囲む二重引用符の形が左右で異なるように見えたので確認してもらったところ、解決した。おそらく、danraku2～danraku4のID指定は(二重引用符の片側が"ではなかったために)有効になっておらず、h4:afterのスタイルだけが使われている状態だった。