SWELLでカラムに背景画像を設定する方法｜CSSとカバーブロックで解説

2026年8月14日

SWELLでWebサイトを作っていると、「カラムごとに背景画像を設定して、サービス紹介やCTAを少し印象的に見せたい」と感じることがあります。

ただ、通常のカラムブロックを選択しても、背景色は設定できるものの、背景画像を直接選択する項目が見当たらず困る方もいるのではないでしょうか。

SWELLのカラムブロックはWordPress標準のカラムブロックを拡張したもので、ボーダーや影、スマホ表示などの機能が追加されています。一方、背景画像を使いたい場合は「カバーブロックをカラム内に配置する方法」または「追加CSSを使う方法」が分かりやすいです。SWELL公式でもカラムブロックには背景色やスタイルなどの設定が案内されています。

ここでは、専門知識がない方でも実践しやすい方法から、デザインを細かく調整したい場合のCSSまで順番に解説します。

SWELLのカラムに背景画像を設定する方法は2つ

結論からいうと、SWELLでカラムに背景画像を表示する場合は、主に次の2つの方法があります。

カラムの中に「カバーブロック」を配置する
カラムにCSSクラスを付け、追加CSSで背景画像を指定する

初心者の方には、まずカバーブロックを使う方法がおすすめです。

カバーブロックはWordPress標準機能で、背景画像の上に文章やボタンを重ねて配置できます。画像の位置や高さ、オーバーレイなども管理画面から調整できます。WordPress公式ドキュメントでも、カバーブロックは背景色・画像・動画の上にテキストを重ねられるブロックとして案内されています。

一方、カラムそのものを背景画像付きのボックスとして使いたい場合や、余白・角丸・表示位置まで細かく調整したい場合には追加CSSが便利です。

方法1：カバーブロックを使って背景画像を設定する

最も簡単なのが、カラムの中にカバーブロックを配置する方法です。

CSSをほとんど触らずに設定できるため、WordPressを使い始めたばかりの方にも向いています。

1. カラムブロックを追加する

投稿または固定ページの編集画面を開き、「＋」から「カラム」を追加します。

たとえば、サービスを2つ横並びで表示したい場合は「50 / 50」の2カラムを選択します。

SWELLでは、通常のカラムブロックにボーダーや影などのスタイルが追加されており、スマートフォンで2列表示する設定も用意されています。

2. 各カラムの中にカバーブロックを追加する

次に、背景画像を表示したいカラム内で「＋」をクリックし、「カバー」と検索します。

カバーブロックを追加すると、次の方法で画像を設定できます。

パソコンから画像をアップロード
メディアライブラリから選択
すでに設定済みの画像を置き換える

カバーブロックには背景画像を設定できるほか、画像の焦点位置や最小の高さ、オーバーレイなども調整できます。

3. 背景画像の上にテキストを入力する

画像を設定すると、カバーの中に段落ブロックが表示されます。

ここに、たとえば次のような文章を入力します。

「コーポレートサイト制作」

さらに、その下に説明文やSWELLボタンを配置すれば、背景画像付きのサービスカードとして使用できます。

4. オーバーレイを調整する

背景画像の上に文字を載せる場合は、文字が読みやすいようにオーバーレイを設定しましょう。

オーバーレイとは、背景画像の上に半透明の色を重ねる処理です。

たとえば写真が明るく、白文字が読みにくい場合は、黒系のオーバーレイを薄く重ねることで視認性が高まります。

画像そのものを目立たせることよりも、見出しや説明文がきちんと読めることを優先するのがポイントです。

5. カバーの高さをそろえる

2カラムや3カラムでカードを並べるときは、高さがバラバラだと少し落ち着かない印象になります。

各カバーブロックの「最小の高さ」を同じ数値にすると、カードの高さをそろえやすくなります。

たとえば、

PC：320px
スマートフォン：240〜280px程度

などを目安に、実際のデザインを確認しながら調整するとよいでしょう。

方法2：追加CSSでカラム自体に背景画像を設定する

カバーブロックではなく、カラムそのものに背景画像を設定したい場合はCSSを使用します。

こちらの方法では、背景画像・余白・角丸・高さなどをまとめて指定できます。

1. 背景画像に使う画像URLを確認する

まず「メディア」→「ライブラリ」を開き、背景に使いたい画像を選択します。

画像の詳細画面に表示される「ファイルのURL」をコピーしておきます。

例：

https://example.com/wp-content/uploads/2026/08/service-bg.webp

画像URLはサイトごとに異なるため、ご自身のメディアライブラリに表示されているURLを使用してください。

2. 背景画像を付けたいカラムを選択する

編集画面で、背景画像を付けたい「カラム」をクリックします。

ここで注意したいのは、外側の「カラム」ブロックではなく、背景画像を設定したい1つの「カラム」を選択することです。

右側のブロック設定から「高度な設定」を開き、「追加CSSクラス」に次のクラス名を入力します。

column-bg-image

先頭の「.」は付けません。

3. 追加CSSを設定する

WordPress管理画面の追加CSS、またはCSSを管理している場所に次のコードを追加します。

.column-bg-image {
  background-image: url("ここに画像URLを入力");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px;
  min-height: 320px;
  border-radius: 12px;
}

url()の中を先ほどコピーした画像URLに変更します。

たとえば次のようになります。

.column-bg-image {
  background-image: url("https://example.com/wp-content/uploads/2026/08/service-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px;
  min-height: 320px;
  border-radius: 12px;
}

これで、指定したカラムに背景画像が表示されます。

CSSの各項目が何を意味しているか

CSSに慣れていない方のために、それぞれの役割を簡単に説明します。

background-image

背景として表示する画像を指定します。

background-image: url("画像URL");

background-size: cover

カラム全体を覆うように画像を拡大・縮小します。

background-size: cover;

背景画像として写真を使う場合は、基本的にcoverが使いやすい設定です。

background-position: center

画像の中央を基準に表示します。

background-position: center;

人物や商品など、画像内で見せたい位置がずれる場合は、center topやleft centerなどに変更して調整できます。

padding

カラムの内側に余白を作ります。

padding: 40px;

背景画像の上に文章やボタンを置く場合、余白がないと窮屈に見えやすいため、30〜50px程度から調整すると扱いやすいでしょう。

border-radius

カラムの角を丸くします。

border-radius: 12px;

カード型デザインにしたいときに便利です。

背景画像の上の文字を読みやすくする方法

背景画像を設定したものの、「文字が画像に埋もれて読みにくい」というケースはよくあります。

その場合は、画像に半透明の黒を重ねる方法があります。

.column-bg-image {
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.4),
      rgba(0, 0, 0, 0.4)
    ),
    url("ここに画像URLを入力");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40px;
  min-height: 320px;
  border-radius: 12px;
  color: #fff;
}

rgba(0, 0, 0, 0.4)の最後の「0.4」が透明度です。

数値を大きくすると暗くなり、小さくすると背景画像が明るく見えます。

デザインだけでなく、文章が読みやすいかどうかを確認しながら調整してください。

スマートフォン表示も必ず確認する

PCで背景画像がきれいに表示されていても、スマートフォンでは見え方が大きく変わることがあります。

SWELLのカラムはスマートフォンで縦並びになることがあるため、背景画像を使用する場合は公開前に実機またはブラウザのレスポンシブ表示で確認しておきましょう。SWELL公式でも、カラムのスマートフォン表示に関する独自設定が案内されています。

必要であれば、スマートフォンだけ余白や高さを小さくします。

@media (max-width: 781px) {
  .column-bg-image {
    padding: 28px 20px;
    min-height: 240px;
  }
}

特に確認したいのは次の点です。

重要な被写体が切れていないか
見出しや文章が読みやすいか
カラムの高さが大きすぎないか
ボタンが押しにくくなっていないか
文字と背景画像のコントラストが十分か

セクション全体に背景画像を設定したい場合はフルワイドブロックが便利

カラム単体ではなく、ページの横幅いっぱいに背景画像を表示したい場合は、SWELLの「フルワイド」ブロックを使う方法もあります。

SWELLのフルワイドブロックには背景画像を設定する機能が標準で用意されており、背景色のオーバーレイ、不透明度、背景画像の位置なども調整できます。

たとえば、

「フルワイドブロック」
↓
「カラムブロック」
↓
「見出し・文章・ボタン」

という構成にすると、セクション全体に写真を敷き、その上に2カラムや3カラムのコンテンツを配置できます。

サービス紹介、会社紹介、問い合わせCTAなどでは使いやすい構成です。

カバーブロックとCSSはどちらがおすすめ？

初心者の方や、なるべくコードを書かずに管理したい場合はカバーブロックがおすすめです。

一方、カラムそのものをカードとして使いたい場合や、複数のカラムに同じデザインを適用したい場合はCSSが便利です。

使い分けの目安は次のとおりです。

簡単に設定したい：カバーブロック
背景画像の上に文字を載せたい：カバーブロック
カラム全体を背景画像付きカードにしたい：追加CSS
複数箇所で同じデザインを再利用したい：追加CSS
セクション全体に背景画像を使いたい：SWELLのフルワイドブロック

無理にCSSを使う必要はありません。

更新を担当する方のスキルや、今後の運用方法も考えて選ぶと管理しやすくなります。

SWELLでカラムに背景画像を設定するときの注意点

画像容量を大きくしすぎない

背景画像に高解像度の写真をそのまま使用すると、ページの読み込みが遅くなる場合があります。

必要以上に大きな画像を使わず、表示サイズに合わせて圧縮した画像を利用しましょう。

WebPやAVIFなど、Web向けに軽量化しやすい画像形式を利用する方法もあります。

文字を画像に直接入れすぎない

背景画像自体に見出しや説明文を書き込んでしまうと、スマートフォンで文字が小さくなる可能性があります。

基本的には、

「背景画像」
＋
「WordPress上のテキスト」

という構成がおすすめです。

文章を後から修正しやすく、レスポンシブ対応もしやすくなります。

同じ画像を使いすぎない

複数のカラムすべてに派手な背景画像を使うと、ページ全体が落ち着かない印象になりやすくなります。

重要なサービスやCTAなど、背景画像を使う場所を絞ることでメリハリを付けやすくなります。

よくある質問

SWELLのカラム設定だけで背景画像を選べますか？

通常のカラムブロックでは、背景色などは設定できますが、背景画像を直接指定したい場合はカバーブロックやCSSを利用する方法が分かりやすいです。SWELL独自のカラム設定としては、スタイルやスマホ表示などが用意されています。

CSSを使わずにカラムへ背景画像を入れられますか？

できます。

カラムの中にカバーブロックを配置し、そのカバーに背景画像を設定する方法なら、基本的にCSSなしで作成できます。

背景画像の上にボタンも置けますか？

可能です。

カバーブロックの中には段落だけでなく、見出しやボタンなど複数のブロックを配置できます。

サービス詳細ページへのリンクや、お問い合わせボタンを配置する使い方もできます。

背景画像の位置がスマホでずれる場合はどうすればよいですか？

カバーブロックの場合は焦点位置を調整します。

CSSの場合はbackground-positionを変更して、PCとスマートフォンで表示位置を分ける方法があります。

画像を選ぶ段階で、左右が多少トリミングされても内容が伝わる写真を選んでおくことも大切です。

まとめ

SWELLでカラムに背景画像を設定したい場合は、「カバーブロックをカラム内に配置する方法」と「追加CSSでカラム自体に背景画像を設定する方法」の2つが使いやすい方法です。

WordPressに慣れていない方は、まずカバーブロックから試すとよいでしょう。管理画面だけで背景画像や高さ、位置などを調整しやすく、後から修正する際も分かりやすいためです。

一方、背景画像付きのカードを複数作成したい場合や、余白・角丸・高さまで統一したい場合はCSSが便利です。

背景画像はうまく使うと、サービス紹介や問い合わせエリアの印象を大きく変えられます。ただし、画像を目立たせることだけでなく、「文章が読みやすいか」「スマートフォンでも見やすいか」「ページが重くなっていないか」まで確認することが大切です。

少しずつ調整しながら、サイト全体のデザインに合った使い方を試してみてください。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

sakou