めいち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の見出しを全幅にしたい人はぜひ参考にしてみてくださいね。
