【SANGO カスタマイズ】標準見出しのデザインをCSSで変える方法

珊瑚くん

通常の見出しブロックのデザインを変えたいなあ

でもサイトのCSSを書いたら変なところまで装飾されちゃった…

この記事ではWordPressテーマSANGOで、標準の見出し(H2やH3)のデザインを変える方法を解説していきます。

SANGO見出しブロックを使えば数十類のデザインを使うことができますが、1つのデザインしか使わない場合や独自にカスタムして標準見出しブロックを使う場合に便利です。

デザイン付きの見出しはSANGO見出しブロックで十分

冒頭でも触れましたが、SANGO見出しブロックを使えばたくさんのデザインを簡単に呼び出すことができます。

以下のようにイメージをクリックするだけでデザインを選んだり、色を変えたりすることができます。

プリセット機能もあるため、通常はこちらのブロックを使えば十分です。

見出しのデザインを変更するCSSのベース

以下のように書いていくとうまく反映させることができます。

/* H2見出し */
.entry-content h2:not(.sgb-heading) {
}
/* H3見出し */
.entry-content h3:not(.sgb-heading) {
}

デザインはサルワカさんのサイトを見るととても分かりやすくコードが載っています。

参考

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

サルワカ | サルでも分かる図解説明マガジン

👆コピーしたコードは{}かっこで囲われている中身を上のベースコードに貼り付けるのがミソです。

一番上の例であれば、以下のように変更して追加CSSや子テーマのCSSに追記してみましょう。

/* H2見出し */
.entry-content h2:not(.sgb-heading) { /*線の種類（実線） 太さ 色*/ border-bottom: solid 3px black;
}