SWELLでフルワイドにならない原因とすぐ試せる解決テクニック

SWELLでフルワイドにしたはずなのに、なぜか横幅いっぱいにならなくて「ん？おかしいぞ」と手が止まってしまうことはありませんか。

この記事では、そんな「フルワイドにしているつもりなのに、どう見てもフルワイドじゃない…」という状態を、落ち着いて解消していくためのチェックポイントと対処法をまとめました。

結論から言うと、いくつかの設定を順番に見直していけば、SWELLのフルワイドが思ったように効かない状態は、ほとんどの場合で解決できます。

SWELLでフルワイドにならないときの全体像をつかもう

SWELLのフルワイドが「ならない」ときのチェック項目一覧

よくある原因をざっと一覧にすると、こんな感じです。あとで一つずつ説明していくので、まずは全体像を眺めるイメージで見てください。

チェック項目	確認する場所・設定	ざっくりポイント
サイドバーが有効かどうか	カスタマイザー、固定ページや投稿の個別設定	サイドバーありレイアウトだと、フルワイドに見えづらい
「コンテンツの背景を白にする」の有無	「外観」からのカスタマイズ画面	白い箱の中にコンテンツが入っているように見えることがある
ブロックの種類と幅の指定	ブロックツールバー	フルワイドではなく「全幅」になっていないかを確認
親ブロックやテンプレートの幅	グループブロック・カラム・テンプレート編集	親の幅が狭いと、子は広がりきらない
ページテンプレートの種類	固定ページの「テンプレート」設定	1カラム系かどうかで見え方が変わる
プラグインやキャッシュの影響	プラグイン一覧・キャッシュ系の設定画面	編集画面と公開画面の見た目の差に関係することがある
画像サイズやスマホ表示の問題	アップロードした画像のサイズ、モバイルプレビュー	画像が小さすぎたり、縦横比が合っていない場合に違和感が出る

この一覧を「チェックリスト」として上から順に確認していけば、どこでフルワイドが止められているのか、だんだん見えてきます。

SWELL フルワイドにならないときに起こりがちな症状

同じ「フルワイドにならない」でも、人によって状態は少しずつ違います。よくあるパターンを整理すると、次のような症状が多いです。

• 左右に余白が残っていて、中央に細長い帯のように表示される
• 編集画面ではフルワイドっぽいのに、実際のページでは狭くなっている
• フルワイドにしたつもりが、コンテンツエリアの中に吸い込まれているように見える
• パソコンでは問題ないのに、スマホで見るとフルワイド感が薄れてしまう

自分の状況をこの中から当てはめておくと、どの原因から疑えばいいか判断しやすくなります。

SWELLのフルワイドブロックの基本をサクッとおさらい

コンテンツ幅・全幅・フルワイドの違い

まず混乱しやすいのが、「コンテンツ幅」「全幅」「フルワイド」という言葉の違いです。ざっくり分けると、次のようなイメージになります。

表示モード	主な特徴	よく使う場面
コンテンツ幅	本文エリアの標準的な幅の中に収まる	通常の本文テキストや段落、画像
全幅	コンテンツエリアの端から端まで広がる	少し大きく見せたい画像やカバーブロック
フルワイド	ブラウザ全体の横幅いっぱいまで広がる	トップのヒーローエリア、セクション区切り、CTAなど

フルワイドのつもりで配置しても、「実は全幅だった」「親ブロックがコンテンツ幅で止まっていた」という状態だと、イメージ通りには広がってくれません。

SWELLフルワイドブロックの基本的な使い方

SWELLには専用の「フルワイドブロック」が用意されています。基本的な使い方の流れは、次のようなイメージです。

• ブロック追加ボタンから、SWELL関連のブロックを開く
• その中からフルワイド系のブロックを選ぶ
• ブロック内に見出し・テキスト・ボタン・画像などを挿入する
• 背景色や背景画像、余白（パディング）を調整して雰囲気を整える

最初は欲張りすぎず、「背景色＋大きめの見出し＋1つのボタン」くらいのシンプルな構成から試していくと、ブロックのクセもつかみやすいです。

SWELL フルワイドブロックのメリットと活用シーン

フルワイドブロックをうまく使えるようになると、サイトの印象が一段階ぐっと引き締まります。特に、次のような場面と相性がいいです。

• トップページ最上部の「キャッチコピー＋ボタン」エリア
• サービスや商品の概要をざっくり見せたいセクション
• ブログ記事の途中に差し込む、お問い合わせや資料請求への誘導エリア
• キャンペーンやお知らせなど、目立たせたい情報をまとめるパート

「ここだけは読者の目にしっかり焼き付けたい」という場所にフルワイドを使うと、ページ全体にメリハリが生まれます。

SWELL フルワイドにならない主な原因と直し方

原因と対処法をまとめて見比べる

まずは代表的な原因と、それぞれのざっくりした対処法を一覧にしておきます。

主な原因	よくある症状	対処の方向性
サイドバーが有効	画面端にサイドバーが出ていて、中央だけ広がる	サイドバーなしレイアウトに変更する
「コンテンツの背景を白にする」がON	フルワイドにしても、白い箱の中にいるように見える	設定をOFFにして背景と自然になじませる
フルワイドではなく全幅設定	広がってはいるが、ブラウザ全体まではいかない	ブロックの幅指定を「フルワイド」に変更する
親ブロックの幅制限	中央の細い帯のように表示される	親ブロックから出す、または親の幅を見直す
ページテンプレートの選択ミス	固定ページだけ思うように広がらない	1カラム・サイドバーなしのテンプレートに変える
プラグインやキャッシュの影響	編集画面と公開画面の見た目が食い違う	一時的に無効化したり、キャッシュをクリアする

なんとなく雰囲気で触るのではなく、「自分は今どの原因を確認しているのか」を意識しながら作業すると、行ったり来たりせずに済みます。

原因1：サイドバーが有効になっている

サイドバーが表示されるレイアウトでは、フルワイドブロックを置いても「ページ全体のフルワイド」にはなりません。コンテンツエリアとサイドバーに画面が分割されている前提なので、どうしても横幅に制限がかかります。

チェックしたいポイントは次の通りです。

• 固定ページや投稿の編集画面で、サイドバーが「なし」になっているか
• カスタマイザーで、該当ページのレイアウト設定が1カラムになっているか
• ウィジェットに余計なサイドバー表示用コンテンツが入っていないか

フルワイドを使いたいページだけでも、思い切って1カラムに切り替えると、「あ、こういう見え方になるのか」とイメージがつかみやすくなります。

原因2：「コンテンツの背景を白にする」設定

SWELLの外観設定の中には、「コンテンツ部分の背景色を白に固定する」といった趣旨の項目があります。これが有効になっていると、フルワイドブロック自体は広がっていても、その後ろに「白い箱」が残っているように見えて、フルワイド感が薄く感じられることがあります。

例えば次のようなときは、この設定を疑ってみてもいいかもしれません。

• フルワイドなのに、上下に白い余白が妙に気になる
• 背景画像を敷いているのに、箱の中のデザインのように見える

サイト全体のトーンにもよりますが、フルワイドを多めに使うデザインでは、コンテンツ背景をベタ塗りにせず、背景と自然につながるようにした方がしっくりくるケースも多いです。

原因3：そもそもフルワイドブロックではない

意外と多いのが、「フルワイドにしたつもりで、実は全幅にしているだけ」というパターンです。エディター上の幅指定アイコンをよく見ると、「全幅」と「フルワイド」が別々に用意されています。

次の点を確認してみてください。

• 該当のブロックを選択して、上部のツールバーの幅指定を確認する
• 説明文に「フルワイド」と出ているか、「全幅」と出ているかをチェックする
• 必要に応じて、SWELLのフルワイド系ブロックに差し替える

標準ブロックの全幅でもそれなりに広がりますが、細かい調整や統一感を出しやすいのは、やはりSWELLの専用ブロックを使う方です。

原因4：親ブロックやテンプレートの幅制限

フルワイドブロックを「グループ」「カラム」「再利用ブロック」などの中に入れてしまうと、その親ブロックの幅の中でしか広がりません。構造としては、「狭い箱の中にフルワイドを押し込んでいる」ような状態です。

次のようなケースに心当たりがある場合は、ブロックの入れ子構造を見直してみましょう。

• グループブロックの中に、さらにフルワイドを入れている
• 再利用ブロックの中にフルワイドを仕込んで、あちこちで使い回している
• カスタムテンプレートの中にフルワイドを置いているが、テンプレート側で幅制限がかかっている

フルワイドにしたいブロックは、できるだけテンプレート直下やページの外側の階層に置くイメージで配置すると、狙った通りに広がりやすくなります。

原因5：ページテンプレートの種類が合っていない

固定ページの場合、「デフォルト・1カラム・LP用」など、いくつかテンプレートの種類が選べます。ここでサイドバー付きのテンプレートを選んでいると、どうやってもフルワイドがきれいに決まりません。

ページごとの違いを簡単に整理しておきます。

ページの種類	フルワイドの使いどころ	注意しておきたいポイント
固定ページ	トップページ、サービスページ、LPなど	1カラムやLP向けテンプレートを選んでおく
投稿ページ	記事途中のCTAや区切りセクション	サイドバー付きレイアウトだと横幅に制限が出やすい
アーカイブ	基本的にはフルワイド多用は控えめに	テンプレートを編集する場合は全体のデザインとの兼ね合いを見る

SWELLでフルワイドを思い通りに使いたいときは、「どのページで、どのテンプレートを使っているか」をセットで意識しておくとスムーズです。

原因6：プラグインやキャッシュの影響

編集画面ではちゃんとフルワイドになっているのに、公開ページではなぜか反映されていない…。そんなときは、キャッシュやプラグインの影響を疑ってみると原因が見つかることがあります。

試してみたいことは次の通りです。

• キャッシュ系プラグイン（ページキャッシュ・ミニファイなど）を一時的に停止して確認する
• サーバー側のキャッシュ削除機能があれば、一度クリアしてから再読み込みする
• 見た目を大きくいじるプラグイン（ページビルダー系など）を一旦OFFにしてみる

一度、SWELL本体と必要最低限のプラグインだけにして動かしてみると、「どこまでがテーマの素の状態なのか」がわかって、切り分けがしやすくなります。

ページタイプ別に見るSWELLフルワイド活用パターン

トップページでのフルワイド構成例

トップページでよくある構成を、ざっくりパーツごとに並べるとこんな感じになります。

セクションの順番	主なブロック例	役割
1	フルワイドブロック（背景画像＋キャッチコピー＋ボタン）	第一印象づくり、サイトのコンセプト提示
2	サービス紹介（アイコン付きのカラムなど）	何をしているサイトなのか、ざっくり伝える
3	実績・お客様の声	安心感や信頼感を高める
4	フルワイドのCTA（背景色＋目立つボタン）	お問い合わせや申し込みへの導線を用意する
5	ブログ記事一覧やお知らせ	詳しい情報や最新のトピックへの入り口

このように、ページの出だしと途中の大事なタイミングでフルワイドを使うと、「単調な1カラムの文章」から一歩抜け出したトップページになります。

ランディングページでのフルワイド

LPでは、つい楽しくなってフルワイドを連発してしまいがちですが、やりすぎるとどこを読めばいいのか分かりにくくなります。次のような場所に絞って使うと、読みやすさとインパクトのバランスを取りやすくなります。

• 最初のヒーローエリア（キャッチコピー・一番伝えたいベネフィット）
• 途中の「メリット一覧」や「よくあるお悩み」をまとめるセクション
• 最後のクロージング部分のCTA（「今すぐ申し込む」など）

フルワイドは「ここぞ」という場面に集中して使った方が、読者の記憶にも残りやすいです。

デザインと画像サイズのコツでフルワイドをきれいに見せる

フルワイド用の画像サイズ目安

サイトによって最適値は変わりますが、目安を知っておくと、画像を準備するときに迷いにくくなります。

使いどころ	横幅の目安	縦横比のイメージ
トップのヒーロー画像	おおよそ横1600px以上	横長（16:9〜21:9あたり）
セクションの区切り用背景	おおよそ横1400px以上	やや横長（3:1前後）
スマホ優先で考える背景	おおよそ横1000px前後	多少縦長でもOK

あまり小さい画像をフルワイドに引き伸ばすと、ぼやけたりザラついて見えやすくなります。容量とのバランスを見つつ、横幅だけはある程度余裕を持たせておくと安心です。

テキストとのバランスを意識する

フルワイドブロックの中にテキストを載せる場合は、「どこまでを背景に任せて、どこからを文字で伝えるか」のバランスを意識するとグッと見やすくなります。

フルワイドはどうしても目立つパーツなので、「伝えたいメッセージは何か」を決めてから要素を足していくと、スッキリまとまりやすいです。

やりがちなNGとトラブル防止チェック

フルワイドまわりのNG集

フルワイドを使うときに、できれば避けたいパターンを表にすると次のようになります。

NGパターン	何が問題か
とにかく何でもフルワイドにする	視線の動きが忙しくなり、読者が疲れてしまう
カラムの中にフルワイドを入れる	幅が制限されて、結局フルワイドにならない
うるさい背景に文字をベタベタ乗せる	文字が読みづらく、スマホでは特に潰れやすい
似たデザインのフルワイドを連続させる	どの情報も同じように見えて、メリハリがなくなる
画像サイズを考えずバラバラに使う	読み込みが重くなったり、レイアウトが崩れたりする

特に「カラムの中にフルワイドを入れる」と「サイドバー付きレイアウトで無理にフルワイドを使う」は、表示崩れや違和感の原因になりやすいので注意したいところです。

公開前にチェックしたいフルワイド確認リスト

公開ボタンを押す前に、最低限ここだけは見直しておきたいポイントをまとめました。

チェック項目	OKの目安
PCとスマホの両方で見たか	文字が切れていない、画像が極端に潰れていない
サイドバーとの相性はどうか	フルワイドを使うページは1カラムにできている
色のコントラストは十分か	背景と文字がはっきり見分けられる
クリック導線は整理されているか	ボタンやリンクの数が絞られていて、迷わない

これらを押さえておけば、「フルワイドの設定は合っているけれど、なんだか読みにくい」という状態もだいぶ避けられます。

よくある質問（SWELL フルワイドにならない編）

Q1：編集画面ではフルワイドなのに、公開するとフルワイドにならないのはなぜですか？

A：一番多いのは、サイドバーが有効になっているか、ページテンプレートが1カラムになっていないパターンです。まずは投稿や固定ページの編集画面でサイドバー設定を「なし」にし、テンプレートも1カラム系に変えたうえで、改めてフルワイドブロックの表示を確かめてみてください。

Q2：SWELLのフルワイドブロックと「全幅」の違いがよくわかりません

A：全幅は「本文エリアの中で最大限広く表示する」イメージで、フルワイドは「ブラウザ全体に広げる」イメージです。SWELLでフルワイドがうまく効かないときは、ブロックの幅指定が全幅になっていることもあるので、ツールバーでどちらが選ばれているのかをチェックしてみてください。

Q3：スマホで見ると、PCではきれいなフルワイドが崩れて見えます

A：スマホでは画面が縦長になるぶん、横長の背景画像の上下が大きくカットされることがあります。大事な文字や人物を画像の中央付近に配置し、上下左右が少し切れても成立する構図にしておくと、どの画面幅でも見え方の差が小さくなります。スマホプレビューで確認しながら調整してみてください。

まとめ：SWELL フルワイドにならないときは「順番にチェック」すれば怖くない

この記事のポイントを整理します

今日できる最初の一歩は、「フルワイドを使っているページを一つだけ選び、この記事のチェックリストどおりに設定を見直してみること」です。

1ページでも思い通りのフルワイド表示ができれば、その感覚をほかのページにも横展開できるようになり、SWELLのフルワイドを自信を持って使いこなせるようになります。