【THE SONIC】h2見出しを全幅(コンテンツ幅いっぱい)にするCSS

めいちのアイコン画像めいち

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

よかったらシェアしてね!

この記事を書いた人

汚部屋に住む、喘息持ちの在宅ワーママ。在宅で仕事をしながら、たまに汚部屋を掃除しています。フリーランス3年目になりました!

目次
閉じる