SWELLの本文エリアの幅をメインコンテンツ幅に合わせるカスタマイズ

WordPressテーマSWELLの標準デザインでは、メインコンテンツ(l-mainContent__inner)の幅に対して本文エリア(post_content)¹の幅が左右16pxずつ小さく表示されます。

これはこれで綺麗だと思うのですが、冒頭から画像をただ並べただけのページだと、アイキャッチ画像と本文エリア画像の表示サイズが異なることで統一感が失われてしまいます。そこで本サイトでは、本文エリアの幅をメインコンテンツ幅に合わせるようにしています。

以下が使用しているCSSです。l-mainContent__inner直下の子要素post_contentのpaddingプロパティをinitialで初期化しています。

.l-mainContent__inner>.post_content {
    padding: initial;
}

これで本文エリアの幅はメインコンテンツ幅と同じになりますが、元々メインコンテンツ幅で作られているh2が余計に広がってしまうため、本サイトでは以下のCSSで初期化をしています。

.post_content>h2 {
    margin-left: initial; /* 左側マージンを初期値に戻す */
    margin-right: initial; /* 右側マージンを初期値に戻す */
}

これらのCSSを使用することで、本文エリアの幅をメインコンテンツ幅に合わせることができます。

私はシンプルな見た目が良かったので本文エリアも見出しも初期化しましたが、調整したい場合はinitialではなく数値指定すると良いかもしれません。

以上、SWELを少しだけ味変するtipsでした。

1. 簡易的に本文エリアと言っています。正式名称は知りません。post_contentだから投稿エリア？ ↩︎