
WordPressのテーマ「THE SONIC」のh2見出しをコンテンツ幅いっぱいまで広げたい!
個人的に「h2見出しは全幅がいい」というデザインのこだわりがあるのですが、残念なことにTHE SONICには「h2を幅いっぱいにする」というオプションがありません…。

ないなら、カスタマイズすればいいじゃない!
ということで、このブログでは見出しが全幅になるようにCSSのカスタマイズをしています。
今回は自分の備忘録も兼ねて、そんな「ちょっとしたカスタマイズ」をご紹介します!
目次
カスタマイズ後のイメージ

通常のh2だと上のように左右に余白ができるのですが、今回はCSSをいじって下のように左右の余白をなくします。
h2見出しを全幅にするCSS
下記のソースをstyle.cssの一番下に追記してください。
/* h2を全幅 */
.entry h2 {
width: calc(100% + 32px);
margin-left: -16px;
padding:8px 16px;
}
@media (min-width: 1030px){
.entry h2 {
width: calc(100% + 72px);
margin-left: -36px;
padding:8px 36px;
}
}
ざっくり説明
スマホ・タブレット時は左右の余白が16pxあったので、
- 左へ16px移動
- 見出しの幅を100%+左右の余白を足した分(16px × 2 = 32px)にする
ということをしています。

「@media (min-width: 1030px)~」はPC表示のぶんです。PCでは左右の余白が36pxになっています。
まとめ
THE SONICのテーマを使っていて、h2の見出しを全幅にしたい人はぜひ参考にしてみてくださいね。