SWELLのフルワイドで横幅が合わない｜背景と中身・内側ブロックの確認順

2026年9月29日

SWELLのフルワイドで横幅が合わないときに、背景・中身・内側ブロックを確認する図

SWELLのフルワイドを使ったのに背景が画面の端まで広がらない。反対に、背景は広がったものの、文章や画像の横幅が思ったとおりにならないこともあります。

このときは、背景・中身のコンテンツ・内側のブロックを分けて見ると、確認する設定を絞れます。「コンテンツ」は、文章や画像を置く範囲のことです。フルワイドの横幅を変えても、内側のブロックに指定した幅まで一緒に変わるわけではありません。

この記事は、SWELLで背景付きの区画を作り、横幅の調整で迷っている方に向けた確認手順です。投稿・固定ページを編集し、保存・プレビューできる状態で進めてください。背景から中身、内側の順に確認し、目的の幅に収まったところで調整を終えます。

操作画面はWordPress 7.1.2／SWELL 2.18.0で確認しています。バージョンや設定により、項目の表示が異なる場合があります。

横幅が違う場所の見分け方

まず、狭いのが背景なのか、文章を置く範囲なのか、特定の画像や列だけなのかを確認します。背景が広がっているなら、最初からページ全体の設定を変える必要はありません。

フルワイドの中には、文章などを入れるコンテンツの範囲があり、その内側へグループやカラムなどのブロックを置けます。次の図は、この位置関係を整理したものです。

症状	確認する場所	最初の確認
背景ごと狭い	ページ設定	サイドバー・白背景
文章全体の幅が違う	フルワイド	横幅の3択
一部の画像・列だけ狭い	内側ブロック	幅・左右余白

背景色とページの色が同じだと、境界が分かりにくい場合があります。作業用の下書きや複製したブロックで背景色を一時的に変えると確認しやすくなります。確認後は元の色へ戻してください。

HOAI Point

背景が画面の端まで広がり、文章が読みやすい幅に収まっていれば、左右の余白は意図した見せ方かもしれません。「背景も文章も端まで広げる必要があるか」を決めてから調整すると、変更箇所を減らせます。

背景の横幅とページ設定

背景そのものが広がらない場合は、フルワイド内の幅より先に、ページのサイドバーとコンテンツ背景を確認します。SWELLのフルワイドには、ページの構成による制約があります。

サイドバーの表示状態

ここでいうサイドバーは、公開ページの本文横にあるカテゴリー一覧などの欄です。編集画面右側の設定パネルとは別です。

SWELL公式では、フルワイドはサイドバーのないページを想定した機能です。サイドバーがあるページでは、フルワイドも記事幅の中に収まります。

対象の投稿・固定ページを編集し、右側の「投稿」または「固定ページ」タブにある「SWELL設定」から「サイドバー」を確認してください。「----」は個別に上書きしていない状態なので、実際に表示されるかはプレビューでも確認します。

背景を画面幅まで広げたいページでは、そのページだけサイドバーを「非表示」にする方法があります。サイドバーを残す必要があるなら、記事幅内で見せる構成を選びましょう。意図した構成に戻したいときは、変更前の値へ戻します。

タイトルやサイドバーなど、固定ページごとの表示設定をまとめて確認したい場合は、SWELLの固定ページ設定方法も参考にしてください。

コンテンツを白くする設定

サイドバーがなくても、カスタマイザーの「サイト全体設定」→「基本デザイン」にある「コンテンツの背景を白にする」が有効だと、フルワイドは記事幅内に収まります。

場所はWordPress管理画面の「外観」→「カスタマイズ」から確認できます。この設定を変えると、対象以外の投稿・固定ページにも影響します。変更する場合は、ほかのページの見た目もプレビューで確認してから反映してください。白いコンテンツ領域を残したい場合は、記事幅内で区画を作る方法を選べます。

これらの条件と横幅の選択肢は、SWELL公式のフルワイドブロックの使い方でも確認できます。背景が期待どおりに広がったら、次は中身の幅を見ます。

中身の横幅をそろえる設定

背景は広がっているのに文章の幅が合わないときは、外側のフルワイドブロックで「コンテンツの横幅をどこに揃えるか」を確認します。段落やグループを選んでいると、フルワイドの設定は表示されません。

STEP

リストビューからフルワイドを選ぶ

編集画面上部の「ドキュメント概観」を開き、「リストビュー」を表示します。対象の文章を包んでいる「フルワイド」を選んでください。右側の「ブロック」タブの名前が「フルワイド」になれば、設定対象が合っています。

画像の例では、フルワイドの下に段落とグループがあります。横幅3択を変えるときは、内側のグループではなく、その上のフルワイドを選びます。

STEP

目的に合うコンテンツ幅を選ぶ

「コンテンツサイズ」内の「コンテンツの横幅をどこに揃えるか」で選びます。現在の値を控え、1回に一つの設定だけを変更しましょう。

画面例では「記事」を選択しています。背景は広く保ち、文章を通常の本文と同じ幅にそろえる例です。

記事：通常の本文幅にそろえる。文章を読みやすい幅に保ちたいときの候補。
サイト幅：サイト全体に設定した横幅の上限にそろえる。通常の本文より広い範囲に要素を並べたいときの候補。
フルワイド：ブラウザーの横幅に合わせて中身を広げる。画面端に近い配置が必要なときの候補。

次の図では、背景を同じ広さにして、中身の範囲だけを比べています。パソコン表示の模式図で、実際の幅や余白はサイト設定・画面幅によって変わります。

背景の幅をそろえ、記事・サイト幅・フルワイドで中身の範囲が変わることを示した模式図

たとえば「背景は広く、文章はほかの記事本文と同じ幅」にしたいなら、まず「記事」を選びます。幅の選択だけで、内側の画像やグループに個別指定した幅まで解除されるわけではありません。

STEP

プレビューと保存後の表示を確かめる

下書きの記事は「下書き保存」後、プレビューを開き直します。背景の端と文章の左端・右端を別々に見てください。

公開済みの記事は、まず本文の変更をプレビューで確認します。「保存」「更新」を行うと公開ページにも反映されるため、意図した内容になってから更新し、公開ページを開き直してください。サイドバーなどの表示設定を試すときは、検証用の下書きで保存して確認すると、公開ページを繰り返し変更せずに済みます。

「背景は画面端まで、文章は記事の幅」が目的なら、その二つを満たせばここで調整は完了です。一部の画像や列だけが狭いときは、次の内側ブロックを確認します。期待と違ったら、控えた変更前の値へ戻せます。

同じパネルにある「上下のPADDING量（PC／SP）」は、上下の内側余白です。PCはパソコン、SPはスマートフォンを指します。左右の横幅を直すための項目ではありません。横幅の確認中は、上下余白まで同時に変更しない方が違いを追いやすくなります。

内側ブロックの幅と左右余白

外側の幅が合っているのに一部分だけ狭い場合は、その内側のブロックが幅や余白を持っていないか確認します。フルワイドを広げても、子ブロックの設定によって内容が狭く残ることがあります。

グループ・カラム・画像の設定

リストビューでフルワイドを展開し、狭く見える部分を包むグループ、カラム、画像を順に選びます。表示される設定はブロックの種類によって異なりますが、次の点を確認してください。

グループ：独自の幅指定や左右の内側余白がないか。
カラム・リッチカラム：列幅、列と列の間隔、スマートフォン時の並び方が目的に合っているか。
画像：画像自体の表示幅を小さく指定していないか。左右の空きが画像ブロックの外側なのか、画像ファイル自体の余白なのか。

たとえば、広いフルワイドの内側に幅を限定したグループがあれば、その中の文章はグループの幅に収まります。外側を何度も切り替えるのではなく、狭さが始まっているブロックの設定を確認するのが近道です。

画像の幅を変更する例

ここでは、フルワイド内の画像だけを広げたい場合を例にします。1200×630pxの画像に幅300pxを指定した検証用の下書きで確認しました。

リストビューで対象の「画像」を選び、右側の「ブロック」タブから「スタイル」を開きます。「サイズ」にある「幅」の現在値を控えてください。

画面例では「幅」が300pxになっています。画像をもう少し大きく見せたい場合は、たとえば600pxへ変更します。「高さ」は自動のままにして、縦横比を保ちます。600pxはこの例の値で、すべての画像へ一律に設定する値ではありません。

下書き保存後にプレビューを開き直すと、この例では画像だけが幅600pxで表示されました。外側のフルワイドは「記事」のままです。背景や文章全体の幅を変えず、画像自身の幅だけを調整できた状態です。

同じ操作で広がらない場合は、画像を包むグループの幅や左右余白も確認します。スマートフォンでは画面内に収まることを確認し、意図と違えば控えた幅へ戻してください。

普通の段落と比べる切り分け

どのブロックが原因か分からないときは、作業用の下書きで、フルワイドの直下へ短い段落を一つ置いて比べます。「直下」とは、グループやカラムの中を経由せず、フルワイドのすぐ内側へ置くことです。

段落を追加したら、リストビューで位置を確認します。STEP 1の画面例と同じように、比較用の「段落」と「グループ」が同じ字下げなら、どちらもフルワイドの直下にあります。段落がグループやカラムの下に一段深く入っている場合は、その外側へ移してから比べてください。

直下の段落は広がり、既存の画像や列だけ狭ければ、内側ブロックを確認します。段落も狭いままなら、フルワイド本体の設定やページの表示条件へ戻ってください。比較用の段落は、確認が終わったら削除します。

標準設定で説明できない場合は、追加CSSや独自クラスで幅を指定していないかも確認します。原因を確かめる前に大きな固定幅を加えると、スマートフォンで横にはみ出すことがあるため、変更前の状態を控えてから調べましょう。

保存後とスマートフォンの確認

最終確認は、編集画面の見え方だけで終えず、下書きは保存後のプレビュー、公開済み記事は更新後の公開ページでも行います。パソコンとスマートフォンでは使える横幅が違うため、同じ設定でも左右の余白や改行位置は変わります。

背景が狙った範囲まで届いているか。
文章が端に寄りすぎず、読みやすい余白を保っているか。
画像や列が途中で切れず、意図した順番に並んでいるか。
ページ全体を横へスクロールしないと読めない状態になっていないか。

スマートフォンでは、記事幅とサイト幅がどちらも画面内に収まるため、選択を変えても見た目の差が小さいことがあります。差が小さいだけで、設定が反映されていないと判断しないでください。

変更前の表示が残る場合は、まず保存の完了とプレビューの開き直しを確認します。それでも古い表示のままなら、ブラウザーやサイト側のキャッシュを調べます。幅の指定、余白、キャッシュを同時に変更せず、一つずつ結果を見ると原因を追いやすくなります。

よくある質問

「コンテンツの横幅」を変えれば、背景も画面いっぱいになりますか？: 背景と中身は別に確認します。背景が記事幅内に収まっている場合は、先にサイドバーや「コンテンツの背景を白にする」の状態を確認してください。
スマートフォンで「記事」と「サイト幅」の違いが分からなくても問題ありませんか？: 両方が画面の横幅に収まる場合、違いが小さくなることがあります。背景の広がり、文章の余白、画像の切れ、横へのはみ出しが目的どおりかで判断します。
横幅は合っていますが、背景画像の端が切れる場合も同じ原因ですか？: 背景の領域と、画像がその領域へどう収まるかは別の問題です。背景の横幅が合っているなら、背景画像の比率や表示位置などを確認します。画像の切れを直すために、文章のコンテンツ幅を変更する必要はありません。