SWELLのコンテンツ幅の設定についてまとめておきます。
コンテンツ幅の変更
コンテンツ幅は、サイト全体のレイアウトにも影響するので、できるだけ初期の段階で設定して下さい。
コンテンツ幅
コンテンツ幅を変更したい時は、カスタマイザーの「コンテンツ幅の設定」から変更することができます。
| 初期値 | |
|---|---|
| サイト幅 | 1200px |
| 1カラム時の記事コンテンツ幅 | 900px |
サイドバーを表示させている時は、サイト幅を変更した分だけ、記事コンテンツ幅も増減します。また、フッター、スライダー、ピックアップバナー、アイキャッチ画像の大きさも変動します。
逆に、サイドバー非表示の時は、「1カラム時の記事コンテンツ幅」がそのまま記事コンテンツ幅になります。
サイトのベースとなるデザイン・レイアウトの設定方法 | WordPressテーマ SWELL
記事コンテンツ幅
サイドバーを表示させている時は、サイト幅からサイドバーの横幅304pxと余白の52pxを差し引いた値が記事コンテンツ幅になります（サイドバーの横幅と余白は固定されているため）。
例えば、初期設定のサイト幅1200pxの場合、記事コンテンツ幅は844pxになります。
また、実際のコンテンツエリアには、左右にそれぞれ16pxの余白が入るので、記事コンテンツ幅よりも32px横幅が小さくなります（アイキャッチ画像やH2見出しタグ等のフルワイドで表示されるブロックを除く）。
例えば、初期設定のサイト幅1200pxの場合、コンテンツエリアの幅は812pxになります。
コンテンツ幅を変更する時は、どこの横幅を基準にしたいのかを決めてからサイト幅を設定して下さい。
但し、サイト全体の見た目で「コンテンツの背景を白にする」をオンに設定している場合は、余白が増える分だけ、記事コンテンツ幅＆コンテンツエリアの幅も小さくなります。
| コンテンツの背景を白にする | 記事コンテンツ幅 | コンテンツエリアの幅 |
|---|---|---|
| オフ | サイト幅 – 356px | サイト幅 – 388px |
| オン | サイト幅 – 416px | サイト幅 – 448px |
| オン（メインエリアのみ） | サイト幅 – 404px | サイト幅 – 436px |
※デフォルトは「オフ」に設定されています
サイドバー非表示の時は、コンテンツエリアの余白分（左右にそれぞれ16px）だけ考慮して下さい。
最後に
SWELLに変更する前に使っていたテーマと同じコンテンツ幅にしたい等、コンテンツの横幅を変更したい時は、カスタマイザーの「コンテンツ幅の設定」から変更して下さい。
但し、コンテンツ幅を変更すれば、無駄な改行が増えたり、最適な画像の大きさも変わってしまうので、無暗に変更するのはおすすめしません。できるだけ初期の段階で設定しておくべきだと思います。
コメント