【Wordpress】見出し（h1～h6）のデザインの変更方法

【WordPress】見出し（h1～h6）のデザインの変更方法

Wordpress成長記録

2023.01.07

記事に見出しを追加する際、デフォルトではなく、自分の好きなデザインに変更する。
※今回はh1～h3を変更させましたが、h4～h6も同じ手順で対応できます。

※この章では見出し１～３をh1～3で記載しています。

１. 追加したいデザインを選ぶ

下記サイトから、自分の設定したい見出しのデザインを選び、CSSをコピーします。

２. CSSをスタイルシートに追加する

コピーしたCSSをWordpress管理画面のメニューから「外観」⇒「テーマファイルエディター」の順でクリックし、スタイルシートに貼り付けます。
※下図ではh3のみを記載しています。

３. CSSを一部編集する

CSSを追加した際に、そのままではデザインが完全に適用されない箇所があった為、一部編集します。

・h2とh3に「border:none;」を追加する
　h2とh3のデフォルトのデザインでは、左側に縦線が入ってしまっています。
　それを消すために「border:none;」を追加します。
　※上記図のコードではh1にもありますが、デフォルトで縦線がないため、不要でしたm(_ _)m

・h2に「background:white;」を追加する
　上図を見ると、h2のみデフォルトで赤色の背景が使用されています。
　それを白にするために、「background:white;」を追加します。

・h1~h3に「.article」を追加する
　「.article」を追加しないと、記事以外の所（下図：カテゴリー）にも変更が適用されてしまう為、
　どこにデザインの変更を適用するかを追加します。
　※記事以外を変更したい場合は「参考」の「ページを指定するCSS」リンクを参照ください。

以上で設定完了です。是非いろいろ設定して自分好みの表示にしてください！