またまたSANGOの修正メモです。
SANGO見出しブロックを、アイコン付き＆中央寄せにすると…
SANGOオリジナルの見出しブロック（sgb-heading）は、アイコン付きスタイルで使用できて、とっても便利ですよね。
ただ、とある条件でおかしな表示になります。
- アイコン付き
- 中央寄せ
の条件のときのみ、
要素全体が、右にずれてて、見た目にムズムズする。。。
原因は、SANGO見出しはアイコン付きにすると、「padding-leftがアイコン1つ分効くようになっているため」でした。
修正方法：中央寄せ見出し専用のクラスをつけて、padding-left調整
解決方法は、アイコン付き＋中央寄せにしたい見出しにのみ、「.sangohead-center」という専用のクラスをつけて、padding-leftを調整するだけ。
.sangohead-center .sgb-heading__inner.with-icon:not(.hh) {
padding-left: 0 !important;
}専用クラスをつけないと、アイコン付き＋左寄せにしている見出しにも適応され表示が崩れますので、あくまでアイコン付き＋中央寄せ見出しにだけ適応されるようにしてください。
.hh クラスはアイコンが実際にある状態のクラスなので、:not(.hh) でアイコンなしのケースだけを対象にしています。これで余計なズレが解消されます。
どちらもSANGO側の設計上の問題というよりは「組み合わせによって生じるクセ」なので、子テーマのCSSで吸収するのが現実的な対処方法となります。
テーマアップデートで変わる可能性もあるので一応メモでした！
この記事を書いた人
パリスタデザイン事務所のWebデザイナー。
得意分野は、使い勝手についてきめ細やかに考えられたCMS設計・構築。
3児の母でもあります。ゲーム・パソコンが趣味。
好きが高じてEC事業部でPCや自作PCパーツ・ゲーミング関連グッズの販売も行っています。
お仕事のご依頼はこちらまで
パリスタデザイン事務所は、WordPressの構築/カスタマイズを得意としています。
Web制作に関するお仕事は、パリスタデザイン事務所までお気軽にお問い合わせください。
