WordPressテーマSANGOの質問

「SANGO見出し」ブロックで見出しを使うときのデフォルト見出しCSSの打ち消し

アバター
haru

いつもありがとうございます。
SANGO Gutenbergについて要望です。
「SANGO見出し」ブロックを使わせていただいているのですが、h2・h3・h4を選択すると追加CSSに記述したデフォルト見出しのCSSが読み込まれてしまいます。
SANGO Gutenbergの機能でp以外の見出しを選択するときCSSを読み込まない設定を追加できないかと思いました。
現在は毎回classなどで指定するのも後で管理が難しくなりそうかなと思い、pタグのみで使っています。
自分でCSSを設定したほうがよい場合はそのようにしたいと思います。
よろしくお願いいたします。

SANGO Gutenbergプラグイン問題の報告や要望
コメントへの回答
サルワカくん
サルワカくん
2019/12/05

CSSの仕様において、たとえば
.entry-content h2 { ~ }とすれば、.entry-content内のh2すべてにスタイルが適用されるようになります。
これを防ぐためには否定セレクタを使うしかありません。
GutenbergのSANGO見出しは.sgb-headingというクラスを持つので、カスタマイズで追加しているCSSを以下のように変更するのがベストな方法だと思います。

.entry-content h2:not(.sgb-heading) { ~ }

:notは「除く」を意味する「否定セレクタ」と呼ばれるものです。詳しい使い方は調べてみてください。
よろしくお願いします。

アバター
haru
2019/12/05

お教えていただいたとおりやってみた結果無事思うどおりに表示させることができました。
先ほどお送りしたコメントではCSSの使い方を理解しきれておらず、勘違いした結果を送ってしまい申し訳ありません。
従来使用していたh2のCSSのセレクタ部分を変えるのではなく、新たにタグを入れて使うと勘違いしていました。
教えてくださりありがとうございます。

メモ
従来のCSS
.entry-content h2 {
タグの内容


変更後
.entry-content h2:not(.sgb-heading) {
タグの内容

これによってclass=”sgb-heading”がついているh2見出しは、書かれているタグの内容が適応されなくなりました。
結果としてGutenbergのSANGO見出しブロックでアイコンなどを使って見出しをつくっても、デフォルトで設定している見出しのCSSデザインが重ならないようにすることができました。

アバター
haru
2019/12/05

返信くださりありがとうございます。
教えていただいたとおりやってみたのですが、うまくできませんでした。

元々設定していたCSSは下の通りです。
.sgb-heading–type1.with-icon {
background: #fff !important;
}

notCSSについて調べ、このCSSの代わりに以下のCSSを設定しキャッシュの削除をしたのですが検証の画面にもCSSが出てこない状況になっています。
.entry-content h2:not(.sgb-heading) {
background: #fff !important;
}
この他にもタグの中身をtext-decoration: noneやbackground-color: transparentなどにも変えてみたのですが変わりません。
CSSをの記述場所は一番下にしてあります。

上の2つのCSSを追加CSSに記載してSANGO見出しブロックを使っている記事が以下のページです。
https://www.quest-mile.com/entry/alu-komatoko/

本来の要望内容とは異なってしまうのですが原因の心当たりなどがありましたら、教えていただけますと幸いです。 何卒よろしくお願いいたします。

サルワカくん
サルワカくん
2019/12/05

うまくいったようで良かったです!ご報告ありがとうございました。