Wordpress 追加CSSについて教えてください

Question

ＣＳＳの見出しについて教えてください

初心者ですが、少し勉強しました。
現在、市販のテーマを使用してサイトを作っています。

現在、wordpressの画面の見出しで（見出し1/見出し2/見出し3/見出し4/見出し5/見出し6/）が選択できますが、これ以外にCSSで、文字飾りを追加したいです。

さるワカさんのコピペで使用できるページの画像です

h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}

質問①　CSSを書く場所は　追加CSSで合っていますか？　

質問②　見出しは通常、<h1>****</h1>ですが、もともとのCSSに<h1>はすでにあるので、同じh1を追加CSSに書いても良いのでしょうか？ほかにも色々装飾があって、何個も追加する場合もh1のままでよいのか、それとも
h1 {
この部分を<h7>とか、<OR1>（オレンジ色なのでOR…？）とか、にしたらいいですか？
見出しは、<h●>にしないとだめですか？

質問③　そもそも見出しは1～6までしか設定できないのでしょうか？　どんどん追加して<h30>とか設定してても大丈夫なのか、wordpressの表示が遅くなるのか、教えてください。

コピペで使用できる、、、がどこに？どうやる？がわからず、説明が下手ですみません。

Answer 1

質問①　CSSを書く場所は　追加CSSで合っていますか？　

他にも方法はありますが、そこに記述するのが一般的です。

質問②　見出しは通常、<h1>****</h1>ですが、もともとのCSSに<h1>はすでにあるので、同じh1を追加CSSに書いても良いのでしょうか？

WordPressの場合、通常は h1 は記事のタイトルに使われますので、そこの修飾目的以外で、なにかの見出しなら h1以外の h2~h6がいいでしょう。

ただ、h*タグにクラスを追加して、それとセットで指定することで、他の部分と区別するようにできますので、何を使ってもいいです。h1 とか h2 単独で使うのは避けた方いいでしょう。

例えば、

<h3 class="side-title">サイドバータイトル</h3>

h3.side-title {
  サイドバーのタイトル用の修飾
}

質問③　そもそも見出しは1～6までしか設定できないのでしょうか？　どんどん追加して<h30>とか設定してても大丈夫なのか、

タグは明確に規定されていますので、勝手に「<h7>とか、<OR1>」のようなタグを作成してはいけません。
見出しタグは<h1>から<h6>までです。

<h1>–<h6>: HTML の見出し要素 - HTML: HyperText Markup Language | MDN

上で説明したようにクラス属性と組み合わせれば、同じタグでも別に指定することができますので、それをうまく使ってください。

また、CSSセレクタで親子関係を利用していろいろな指定法がありますので、それも利用できます。

【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編） : ビジネスとIT活用に役立つ情報

Comments

[amina]

ありがとうございます。無事にできました！　助かりました