SWELLで画像がフルワイドにならない原因と解決方法｜端まで表示されないとき

SWELLで画像を「画面の端から端まで（フルワイド）」に表示したいのに、なぜか左右に余白が残ってしまう…。
この現象は、テーマの設定やブロック構造が原因で起こることが多いです。

この記事では、フルワイドが効かないときに確認すべきポイントをまとめています。
自分用のメモとしても、困ったときにすぐ見返せるように整理しました。

SWELLで画像を画面の端から端まで（フルワイド）表示できないときに確認すること

SWELLで画像をフルワイド表示できない場合、以下の原因が考えられます。順番にチェックしてみてください。

主な原因と解決方法

「コンテンツの背景を白にする」がオンになっている

原因

外観のカスタマイズで背景を白にする設定が有効だと、フルワイドが端まで効きません。

対策

WordPress管理画面の [外観] ＞ [カスタマイズ] ＞ [サイト全体設定] ＞ [基本デザイン] を開き、「コンテンツの背景を白にする」をオフにします。

サイドバーが表示されている

原因

ページや記事にサイドバーがある場合、画面全体（フルワイド）がサイドバーに阻まれて端まで広がりません。

対策

編集画面の「SWELL設定（またはページ設定）」でサイドバーを非表示にします。トップページ等の固定ページの場合は、カスタマイザーの「サイドバー」設定を確認してください。

フルワイドブロックの幅設定を確認する

原因

フルワイドブロック内の設定で、幅が「記事幅」や「サイト幅」のままになっている可能性があります。

対策

ブロックを選択し、設定バー（またはブロック設定）から幅を「フルワイド」に切り替えます。

キャッシュの影響（更新が反映されない）

原因

ブラウザやSWELLの高速化機能（キャッシュ）が残っていると、設定変更が反映されません。

対策

• Windows：[Ctrl ＋ F5]
• Mac： [Cmd ＋ Shift ＋ R]）で強制的リロードを行うか、SWELL設定のキャッシュをクリアします。

それでも端まで広がらない場合の追加チェックポイント（固定ページ）

固定ページの場合、テンプレートやブロック構造が原因になっていることがあります。以下の3つを確認してください。

1. 固定ページの「ページ仕様」をフルワイドにする

固定ページの編集画面で、そのページ自体がフルワイドで表示できる設定になっているか確認します。

1. 固定ページの編集画面を開きます。
2. 画面右側の設定サイドパネルで「固定ページ」タブを選択します。
3. 下にスクロールし、「SWELL設定」（またはページ仕様）の項目を探します。
4. 「画面幅」の設定が「デフォルト」になっている場合、「フルワイド」に変更します。

2. 「グループブロック」の配置を確認する

画像やフルワイドブロックが、通常の「グループブロック」の中に閉じ込められていないか確認してください。もし「グループ」の枠（記事幅）の中に入っていると、その中でしか広がりません。

確認方法

編集画面の左上にある 「リストビュー（三本線のアイコン）」 をクリックします。

対策

端まで広げたい画像（またはフルワイドブロック）が、他のグループブロックの内側に入っていないか確認し、入っていたらドラッグで最上位（ルート）に移動します。

3. 通常の「画像ブロック」ではなく「フルワイドブロック」を使う

WordPress標準の画像ブロックは、テーマによっては完全に端まで広がらないことがあります。

SWELLで確実にフルワイドにしたい場合は、 「フルワイドブロック」＋背景画像 を使う方法が最も安定します。

1. ブロック追加で「フルワイド」ブロックを挿入する。
2. フルワイドブロックを選択した状態で、右側メニューの「背景画像」から画像を設定する。
3. フルワイドブロックの設定で、横幅を「フルワイド」、上下のパディング（余白）を「0」にする。

それでも解決しない場合の代替策（画像を削らずに端まで表示したいとき）

解決策1：フルワイドブロックの中に「画像ブロック」を入れる（おすすめ）

背景画像として設定するのではなく、フルワイドブロックの「中身」として通常の画像ブロックを入れます。

1. フルワイドブロックの「背景画像」を削除します（パディングは0のままでOKです）。
2. フルワイドブロックの内側にある「＋」ボタン（ブロックを追加）をクリックします。
3. 通常の「画像」ブロックを選択し、表示したい画像を設定します。
4. 画像ブロックの設定（または上部ツールバー）で、配置を「全幅」にします。

これで、画像の縦横比が維持されたまま、上下が削れずに端から端まで表示されます。

解決策2：「カバーブロック」を使う

WordPress標準の「カバーブロック」をフルワイド設定で使う方法です。

1. フルワイドブロックではなく、「カバー」ブロックを追加します。
2. 表示したい画像を設定します。
3. カバーブロックの上部ツールバーで配置を「全幅」にします。
4. 右側のブロック設定で、「背景を固定」や「繰り返す」のチェックを外します。
5. オーバーレイ（画像の上の黒いモヤ）の不透明度を「0」にします。
6. 「最小の高さを設定」の単位を px から vw に変更し、数値を 100 にします（これで画面幅いっぱいに連動します）。

まずは設定がシンプルな「解決策1（フルワイドブロックの中に画像を入れる）」から試してみてください！

まとめ

SWELLで画像をフルワイド表示できない原因は、設定の見落としやブロック構造によるものがほとんどです。

• コンテンツ背景の設定
• サイドバーの有無
• フルワイドブロックの幅設定
• キャッシュ
• 固定ページのページ仕様
• グループブロックの階層
• 画像ブロックの種類選び

これらを順番に確認すれば、ほぼ確実に「端から端まで」表示できます。 特に、フルワイドブロックの中に画像ブロックを入れる方法は、縦横比を保ったまま綺麗に表示できるのでおすすめです。

困ったときはこの記事をチェックして、スムーズに解決してくださいね。