【SWELL】コンテンツ幅の設定

SWELLコンテンツ幅の設定

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

目次

コンテンツ幅の変更

コンテンツ幅は、サイト全体のレイアウトにも影響するので、できるだけ初期の段階で設定して下さい。

コンテンツ幅

コンテンツ幅を変更したい時は、カスタマイザーの「コンテンツ幅の設定」から変更することができます。

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

コンテンツ幅の設定

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

サイドバーを表示させている時は、サイト幅を変更した分だけ、記事コンテンツ幅も増減します。

また、フッター、スライダー、ピックアップバナー、アイキャッチ画像の大きさも変動します。

サイト幅と記事コンテンツ幅

サイドバー非表示の時は、「1カラム時の記事コンテンツ幅」がそのまま記事コンテンツ幅になります。

サイトのベースとなるデザイン・レイアウトの設定方法 | WordPressテーマ SWELL

記事コンテンツ幅

サイドバーを表示させている時は、サイト幅からサイドバーの横幅304pxと余白の52pxを差し引いた値が記事コンテンツ幅になります(サイドバーの横幅と余白は固定されているため)。

例えば、初期設定のサイト幅1200pxの場合、記事コンテンツ幅は844pxになります。

記事コンテンツ幅 = サイト幅 – 356px(サイドバー+余白)

記事コンテンツ幅の計算

また、実際のコンテンツエリアには、左右にそれぞれ16pxの余白が入るので、記事コンテンツ幅よりも32px横幅が小さくなります(アイキャッチ画像やH2見出しタグ等のフルワイドで表示されるブロックを除く)。

例えば、初期設定のサイト幅1200pxの場合、コンテンツエリアの幅は812pxになります。

コンテンツエリアの幅 = 記事コンテンツ幅 – 32px(左右の余白)

実際のコンテンツエリアの横幅

コンテンツ幅を変更する時は、どこの横幅を基準にしたいのかを決めてからサイト幅を設定して下さい。

但し、サイト全体の見た目で「コンテンツの背景を白にする」をオンに設定している場合は、余白が増える分だけ、記事コンテンツ幅&コンテンツエリアの幅も小さくなります。

カスタマイザー ▶ サイト全体設定 ▶ 基本デザイン ▶ サイト全体の見た目

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

スクロールできます
コンテンツの背景を白にする 記事コンテンツ幅 コンテンツエリアの幅
オフ サイト幅 – 356px サイト幅 – 388px
オン サイト幅 – 416px サイト幅 – 448px
オン(メインエリアのみ) サイト幅 – 404px サイト幅 – 436px

※デフォルトは「オフ」に設定されています

サイドバー非表示の時は、コンテンツエリアの余白分(左右にそれぞれ16px)だけ考慮して下さい。

最後に

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

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

コメント

コメントする

目次