SWELLの記事コンテンツ幅の設定

SWELLの記事コンテンツ幅の設定についてまとめています。

記事コンテンツ幅に影響する設定

記事コンテンツ幅に影響を及ぼす設定は2つあります。

コンテンツ幅の設定

記事コンテンツ幅は、カスタマイザーの「コンテンツ幅の設定」から変更できます。

カスタマイザー ▶ サイト全体設定 ▶ 基本デザイン ▶ コンテンツ幅の設定

コンテンツ幅の設定	初期値
サイト幅	1200px
1カラム時の記事コンテンツ幅	900px

サイドバーありの時は「サイト幅」、サイドバーなしの時は「1カラム時の記事コンテンツ幅」の数値で記事コンテンツ幅が増減します。

コンテンツの背景を白にする

余白の影響で、「コンテンツの背景を白にする」の設定をオンすると、記事コンテンツ幅が減少します。

初期設定はオフですが、「背景を白にする」をオンに変更した時は、余白分だけ記事コンテンツ幅が小さくなるので注意して下さい。

記事コンテンツ幅の計算方法

ここでは、タイトル、アイキャッチ画像、H2見出しタグ等、左右に余白が設定されていないエリアの横幅を「コンテンツエリア」、段落ブロック、画像ブロック等、左右に余白が設定されているエリアの横幅を「記事コンテンツ幅」で統一表記しています。

設定したい「コンテンツエリア」及び「記事コンテンツ幅」の横幅を決めて逆算して下さい。

サイドバーあり

コンテンツの背景を白にする	コンテンツエリア	記事コンテンツ幅
オフ	サイト幅 – 356px	サイト幅 – 388px
オン	サイト幅 – 416px	サイト幅 – 448px
オン（メインエリアのみ）	サイト幅 – 404px	サイト幅 – 436px

例えば、「コンテンツの背景を白にする」オフで、「記事コンテンツ幅」を1000pxにしたい時は、サイト幅を1388pxに設定します。

サイドバーなし

コンテンツの背景を白にする	コンテンツエリア	記事コンテンツ幅
オフ	1カラム時の記事コンテンツ幅	1カラム時の記事コンテンツ幅 – 32px
オン	1カラム時の記事コンテンツ幅 – 64px	1カラム時の記事コンテンツ幅 – 96px
オン（メインエリアのみ）	1カラム時の記事コンテンツ幅 – 64px	1カラム時の記事コンテンツ幅 – 96px

例えば、「コンテンツの背景を白にする」オフで、「記事コンテンツ幅」を1000pxにしたい時は、サイト幅を1032pxに設定します。

最後に

SWELLに変更する前に使っていたテーマと同じ記事コンテンツ幅にしたい等、記事コンテンツ幅を変更したい時は、カスタマイザーの「コンテンツ幅の設定」と「コンテンツの背景を白にする」から設定を変更して下さい。

但し、記事コンテンツ幅を変更すれば、無駄な改行が増えたり、最適な画像の大きさも変わるので、無暗に変更するのはおすすめしません。できるだけ初期の段階で設定しておくことをおすすめします。