【SWELL実録／フルワイドブロック】サイト型トップページに必須！背景固定と横幅設定が便利（リッチカラムとも相性良好）

今回は SWELL (WordPressテーマ)の便利な機能「フルワイドブロック」についてご紹介。

これ使うと、サイト全体を“ひとつの作品”のように見せる一体感を演出できます。
特に、サイト型トップページを作り込みたいときに重宝し、印象を大きく変えられるのが魅力です。

企業サイトや店舗サイトなど、デザイン性を重視した構成にも幅広く活用できます。

フルワイドブロックとは？

フルワイドブロックは、SWELLで 画面幅いっぱいにコンテンツを広げられるレイアウトブロック です。

私は主に以下の3つで利用しています。

これだけでも、かなり表現の幅が広がります 
実際に見た方がイメージがつかみやすいので、以下をご覧ください。

実例紹介：デモサイトでの活用

私の方で、飲食店を想定したデモサイトを作成しました 
（フルワイドブロックを多用）

＼デモサイトはこちら／

---

【よく使う１】背景画像を設置
（トップページのカスタマイズにオススメ）

背景の設定自体はPCビュー・スマホビューともに可能ですが、「背景固定」はスマホでは機能しません。
せっかくなので、PCビューでもご覧ください 

「背景固定」の実例

 上の「CONCEPT」の部分には店内の画像を背景に設定
そのうえで、「背景固定(オススメ）」に設定しています。

(PCビューで) スクロールした際、
背景だけが固定された状態となるため、サイトに動きを出せます。

「パララックス効果」の実例

 一方、「MENU」の部分は、
（ 背景固定 ではなく）「パララックス効果」を選んでいます。

フルワイドブロックを使うことで、単調なブログデザインから一歩抜け出し、迫力のある見栄えに仕上げられます。

---

【よく使う２】横幅を変更

フルワイドブロックはリッチカラムとも相性が良いです。
（参考：リッチカラムの過去記事）

この後、次の順番で
実際にフルワイドブロックを掲載

   

❶ 普通に
「リッチカラム」のみ＝記事幅

（特にPCで見た際に）左右の余白の違いがあるかと思います。

コンテンツの横幅を「フルワイド」にすれば、画面の横いっぱいにコンテンツを配置できます。

---

【よく使う3】境界線をつける

フルワイドブロックをいれると、境界線もデザインできるようになります。
複数 組み合わせることも可能です。

【画像でわかる】使い方

設定はとてもシンプル。
以下の手順で簡単に導入できます。

ブロックを追加

すべて表示

フルワイドを選択

右側で、細かな設定が可能です。

自動で見出し(H2)が挿入されますが、不要なら削除してください。
Enterを押すとフルワイドブロック内に段落ブロックが追加されます。

試しに
色を調整してみます

試しに
背景画像も設定

使って感じた変化

実際にフルワイドブロックを使うと、サイト全体のカスタマイズ性が大きく向上しました。

特にトップページでフルワイドを使うと、背景に広がりが出て“ちゃんとしたサイト感”が強まると思います。

また、境界線を波線にしたりや背景色を切り替えるだけでも、雰囲気を変えられます。

注意点とコツ

• テキストが読みづらいときはオーバーレイ（半透明黒）を重ねる
• 波線は1ページに多くても2～3箇所まで
• 背景と文字色のコントラストに注意

まとめ

フルワイドブロックは、「見せるサイト」を作るうえで欠かせない機能 です。
特にトップページや固定ページで“セクション構成”を作りたい方にとっては必須級。

背景・波線などを上手に組み合わせるだけで、ノーコードでもお洒落なデザインが完成します。

これからSWELLでサイト型デザインに挑戦する方は、まず「フルワイドブロック×背景画像」から試してみてください。

といったところで、今回はこの辺りで。