ワードプレスオリジナルテーマの記事の装飾はどこで設定すればいいですか？

Question

ワードプレスのオリジナルテーマでブログサイトを構築中です。
自分で作った枠や見出しの装飾などを簡単につけられるようにしたいのですが、
どこで設定するのが良いのでしょうか？
ググっても既存のテンプレートに導入する方法(子テーマのcssにコードを書く)などしか見つかりませんでした。
よろしくお願いします。

例えば
外観→カスタマイズ→追加CSSに

h1 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #FFC778;
}

と入力すると、記事の中以外のh1タグにも装飾が付いてしまいます。
(cssファイルに書いてるのと同じなので当たり前ですよね^^;)
そうではなくて記事内の指定した部分のみに、装飾が施されるようにしたいのですが、
どうしたら良いでしょうか？
**→子孫タグを使うことで上手くいきました。
**
記事を包み込むクラスにデザインを入れて、普段使いのcssファイルに入れました。
.article-detail　{
h1 {
fontsize: 20px;
color: red;
}
}

さらに深堀の質問で申し訳ないのですが、
普通はサイトデザインでh1h3くらいまでしか指定しないで、
h4h6は記事用とかにするのでしょうか？

もしh6まで使ってしまっていた場合はどうしたらよいですか？
記事の編集エディターの見出しには
見出し6までしかないので手詰まりとなってしまいました。

よろしくお願いします。

Comments

[m.ts10806]

>.article-detail　{
h1 {
fontsize: 20px;
color: red;
}
}
このCSS動かないのでは。SCSSなら別かもしれませんが。

[takawork]

失礼しました。久しぶりの質問でscssで書いてしまいました。

Answer 1

要件と質問が複数ある気がしないでもないですが、把握できたものだけ答えます。

---

普段使っててh6まで全部使うということはないかと思います。
そんなに下層まで使うか？という点ですね。

h4くらいまでで済みますし、どう階層で別の装飾をしたいのなら
クラス使います。

h4.article_xx{}
h4.article_yy{}

共通の装飾があるならタグ自体にしておいて
個別の装飾だけ個別に作ったクラスにします。

h4{
  font-size:0.8rem;
}
h4.article_xx{
  color:blue;
}
h4.article_yy{
  color:red;
}

Comments

[takawork]

回答ありがとうございます。
h4.article_yy{
color:red;
}
などを使う場合は、記事編集画面のテキストエディターで直接クラス名を記述する感じでしょうか？

<h4 >おすすめ</h4>
↓
<h4 class="article_yy">おすすめ</h4>

[m.ts10806]

WordPress詳しいわけではないのですが、htmlとしてきちんと定義したclassが使われるように対応されるやり方でしたら手順は問いません。