SANGOの修正備忘録です。同じ現象に遭遇した方の参考になれば幸いです。
症状：アイコン付き＋中央寄せの見出しが右にズレる
SANGOオリジナルの見出しブロック（sgb-heading）は、アイコン付きスタイルで使えてデザインの幅が広がる便利な機能です。
ただし、以下の条件が重なったときだけ表示がズレる問題があります。
- アイコン付き
- 中央寄せ
この組み合わせのときのみ、見出し全体が右方向にズレて中央に見えなくなります。
SANGOの見出しブロックはアイコン付きにすると、アイコン1つ分の padding-left が自動で効く仕様になっています。中央寄せにしてもこの padding-left が残るため、見た目上は右にずれた状態になります。
修正方法：中央寄せ見出し専用のクラスを追加してpadding-leftを調整
アイコン付き＋中央寄せにしたい見出しブロックにのみ、専用のカスタムクラスを追加することで解決できます。
手順1： 該当の見出しブロックにクラスを追加する
ズレを修正したい見出しブロックを選択し、「追加CSSクラス」欄に以下を入力します。
sangohead-center手順2： CSSを追加する
.sangohead-center .sgb-heading__inner.with-icon:not(.hh) {
padding-left: 0 !important;
}このCSSを専用クラスなしで全体に当ててしまうと、アイコン付き＋左寄せにしている見出しにも適用されて表示が崩れます。必ず sangohead-center クラスを追加した見出しにだけ効くようにしてください。
また、セレクタ内の :not(.hh) は「アイコンが実際に表示されていない状態」を除外するための指定です。これにより、アイコンなしの見出しに余計な影響を与えずに済みます。
まとめ
SANGOの見出しブロックでアイコン付き＋中央寄せを使うと右にズレる問題は、CSSの padding-left が原因です。
| 状況 | 対処 |
|---|---|
| アイコン付き＋左寄せ | そのままでOK |
| アイコン付き＋中央寄せ | カスタムクラス追加＋CSS記述で修正 |
これはSANGOの設計上の問題というより、「組み合わせによって生じる挙動のクセ」です。子テーマのCSSで吸収するのが現実的な対処方法です。テーマのアップデートによって挙動が変わる可能性もあるため、更新時は表示を確認しておくことをおすすめします。
この記事を書いた人
パリスタデザイン事務所のWebデザイナー。
得意分野は、使い勝手についてきめ細やかに考えられたCMS設計・構築。
3児の母でもあります。ゲーム・パソコンが趣味。
好きが高じてEC事業部でPCや自作PCパーツ・ゲーミング関連グッズの販売も行っています。
お仕事のご依頼はこちらまで
パリスタデザイン事務所は、WordPressの構築/カスタマイズを得意としています。
Web制作に関するお仕事は、パリスタデザイン事務所までお気軽にお問い合わせください。
