【SWELLデザイン設定編】フルワイドブロックで背景をおしゃれに切り替える方法

WordPressテーマ「SWELL」でサイト型トップページを作ったものの、
「なんだかのっぺりして見える」「セクションごとのメリハリがない」と感じたことはないでしょうか。

その原因として、コンテンツの区切りが視覚的に伝わっていない可能性が考えられます。
テキストや画像を並べるだけでは、どこからどこまでが一つのまとまりなのか、閲覧者には判断しにくいものです。
そこで活躍するのがSWELL独自の「フルワイドブロック」です。
背景色や背景画像を切り替えることで、セクション単位のメリハリが生まれ、ページ全体の印象が大きく変わります。

本記事では、フルワイドブロックの基本操作からデザイン設定、実務で役立つセクション設計のコツまで解説します。

フルワイドブロックとは？役割と基本の考え方

フルワイドブロックは、画面の横幅いっぱいに広がるセクションの「箱」として機能するSWELL専用のブロックです。

「見た目を整える装飾」というより、「ページの情報構造を視覚化するレイアウト機能」として捉えると、使いどころが明確になるでしょう。

フルワイドブロックの挿入と基本設定

挿入方法

ブロック追加ボタン（＋）からブロック一覧を開き、「フルワイド」を選択します。

挿入すると、薄いグレーの背景にセクション用のH2見出しが配置された状態で表示されます。

この中に段落・画像・ボタンなど任意のブロックを追加して、一つのセクションとして仕上げていく流れです。

コンテンツ幅の選択

フルワイドブロック内のコンテンツ（テキストや画像）の横幅は、右サイドバーの設定から3種類を選べます。

用途に応じて使い分けることで、セクションごとの情報密度をコントロールできます。

コンテンツ幅による見え方の違い

---

---

上下の余白（padding）の調整

フルワイドブロックの上下の余白量も設定可能です。

padding量による見え方の違い

背景色でセクションを切り替える

フルワイドブロックの背景色は、右サイドバーの「背景色の設定」から変更できます。
カラーピッカーで自由に選べるほか、カラーコードを直接入力することも可能です。

配色の基本パターン

実務で使いやすい背景色の切り替えパターンを紹介します。

背景画像で印象的なセクションを作る

設定手順と推奨サイズ

右サイドバーの「背景画像の設定」から画像をアップロードまたはメディアライブラリから選択します。

推奨画像サイズは幅1920pxです。
日本国内で使用されているPCモニターの画面幅として最もシェアが高いサイズに合わせることで、多くの閲覧環境で画像が途切れずに表示されます。

オーバーレイカラーで視認性を確保する

背景画像の上にテキストを配置する場合、画像の色味によっては文字が読みにくくなります。
「オーバーレイカラー」を設定して半透明の色を重ねることで、テキストの視認性を確保しましょう。

• 暗めのオーバーレイ（黒・濃紺など）＋白文字：写真の色味を活かしつつ文字を際立たせる
• 不透明度の目安：30〜50%程度が画像と文字のバランスが取りやすい範囲

背景効果の選択

背景画像には2つの表示効果を設定できます。

• パララックス効果：スクロールに応じて背景画像がゆっくり動き、奥行きを演出する
• 固定背景：スクロールしても背景画像が動かず、コンテンツだけが流れていく表現

ただし、固定背景はPCサイズのみ対応です。

境界線の形状でセクションのつなぎ目をデザインする

フルワイドブロックの上下の端に、装飾的な境界線を付けられます。
背景色を設定している場合のみ利用可能な機能です。

4種類の境界線

形状	印象	適したサイトの雰囲気
斜線	シャープ、スタイリッシュ	コーポレートサイト、ポートフォリオ
円	やわらかい、ナチュラル	カフェ、サロン、女性向け
波	流れるような動き、親しみやすさ	ブログ、観光・旅行系
ジグザグ	ポップ、カジュアル	エンタメ系、趣味ブログ

「上下の境界線の高さレベル」で効果の強弱を調整でき、数値が大きいほど形状がはっきりと現れます。
やりすぎると画面がうるさくなるため、控えめなレベル（2〜3程度）から試すのがおすすめです。

背景画像に境界線を付けるテクニック

背景画像を設定したフルワイドブロックでは、境界線の形状を直接変更できません。
しかし、ちょっとした工夫で同じ効果を再現できます。

方法はシンプルで、背景画像を設定したフルワイドブロックの上下に「背景色だけのフルワイドブロック」を配置し、そちら側の境界線形状を変更するだけです。

上下のフルワイドブロックの背景色をページ背景色と同じにすれば、あたかも画像の端が波打っているかのような表現になります。

セクション設計の実務テクニック

フルワイドブロックを連続配置するときの注意

フルワイドブロックを続けて配置する場合、隣接するブロック同士で境界線の形状をそれぞれ設定すると、形状が重なって崩れることがあります。

対処法は、隣り合うブロックのうち片方だけに境界線を設定することです。
たとえば上のブロックの「下の境界線」を波にしたら、下のブロックの「上の境界線」は直線のままにしておきます。

構成を先に決めてからデザインを割り当てる

フルワイドブロックを効果的に使うには、「何をどの順番で見せるか」をまず決めてから、各セクションの背景色や画像を割り当てていくのが効率的です。

このように全体の流れを俯瞰してから着手すると、配色の偏りや情報の抜け漏れを防げます。

まとめ

フルワイドブロックは、SWELLでサイトを構築するうえで最も使用頻度の高いブロックの一つです。
背景色・背景画像・境界線の3つの要素を組み合わせることで、ページにメリハリと統一感が生まれます。

押さえておきたいポイントは以下の通りです。

操作自体はシンプルなので、まずはフルワイドブロックを2〜3個並べて背景色を交互に変えるところから始めてみてください。
それだけでもページの印象は大きく変わるはずです。