【WordPress】既存テーマの見出しをリセットし、自由に変更する方法

WordPressでブログページを作成する際、見出しのデザインは非常に重要な要素である。

しかし、WordPress初心者にとって、見出しのデザインを自由に設定することは難しいと思う。

この記事では、見出しを自由に変更するための手順を説明したい。

なお、大きな流れとしては「既存見出しのリセット」⇒「見出しのデザインを設定」の順で進めていく。

1.既存テーマの見出しをリセットする
2.オリジナルの見出しデザインを設定する
- 2-① 見出しのデザインを探す
- 2-② 追加CSSの欄にコードを書き込む
【まとめ】見出しのデザインを変えれば、サイトの印象は大きく変わる

1.既存テーマの見出しをリセットする

まずは、既存のテーマに設定されている見出しをリセットする。

これを行わないと、「既存のテーマで設定されている見出し」と「新しく追加する見出しのデザイン」がバッティングしてしまう。

既存の見出しをリセットするには、CSSへの記載が必要になる。

参考：CSSとは

CSSとは、ウェブページにデザインを指定するためのプログラミング言語である。CSSを使うことで色や大きさの指定が可能になり、ブログの見栄えが良くなる。

1-① 外観から「CSS編集」を選択する

1-② 追加CSSを選択する

1-③ 追加CSSにコードをコピペする

なお、既存テーマの見出し設定をリセットするためのCSSは下記の通りである。

こちらをコピペして、貼り付けるだけで見出しのデザインをリセットできる。

/* ----------------------------------------------------
h2 見出しのリセット
----------------------------------------------------*/
h2:before {
    border-top: 0px solid transparent;
}
h2:after {
    border-top: 0px solid transparent;
}
h2 {
    position: initial;
    background: initial;
    color: initial;
    font-size: initial;
　　font-weight:initial;
    line-height: initial;
 
    margin: initial;
    padding: initial;
    box-sizing: border-box;
 
    border:initial; 
    border-radius: initial;
    box-shadow: initial;
    text-shadow: initial;
}

なお、上記例はh2タグをリセットする例である。適宜、h3やh4など書き換えていただきたい。

参考：hタグとは

hタグとは、見出しを設定するタグである。数字が小さいほど重要性が高く、h1タグは記事のタイトルを表す。最適な見出しを設定することは、読みやすさを向上させる上、Googleからの記事の評価を高める効果がある。