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

珊瑚くん
珊瑚くん

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

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

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

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

SANGO 3.0

対応しています

プラグインは不要

標準機能でサポートされています

SANGO 2.0

対応しています

SANGO見出しブロックを使う場合は

プラグインが必要です

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

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

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

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

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

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

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

}


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

}
.entry-content や :not(.sgb-heading)を指定する理由

上のコードでは記事内のSANGO見出しブロックを除く標準の見出しにCSSが当たるよう記述しています。

h2{}のように始めてしまうとトップページの記事カードやサイドバーなどにも見出しのデザインが適用されてしまいます。

entry-contentと書くことで記事内のエリアのみに、sgb-headingを除外することでSANGO見出しブロックに悪影響がでないようにしています。

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

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

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

CSS
/* H2見出し */
.entry-content h2:not(.sgb-heading) {
    /*線の種類(実線) 太さ 色*/
    border-bottom: solid 3px black;
}
まとめ
  • SANGO見出しブロックを使えばCSSカスタマイズはいらない!
  • 見出しのCSSには必ず.entry-contentを付けて記事内のみにデザインを適用しよう
  • 見出しデザインはサルワカくんのデザイン例をチェックしよう

コメントを残す

コメント欄は記事内容の質問などにご活用ください。すべての質問にはお答えできませんので予めご了承ください。
テーマのリクエストや機能の質問はSANGOフォーラムに直接ご質問ください。