SWELLのリッチカラムに背景色を付ける方法【簡単】

SWELLのリッチカラムに背景色を付けたいのに、思った場所に色が付かなくてモヤモヤしていませんか？

私も最初は「なんでここだけ背景が真っ白のままなんだろう…」とかなり悩みました。この記事では、その遠回りをしなくて済むように、実際にやっている手順をベースに分かりやすくお話ししていきます。

SWELLのリッチカラムと背景色の基本をざっくり整理

リッチカラムとは？カラムブロックとの違い

リッチカラムは、SWELLテーマに用意されている「横並びレイアウト用のブロック」です。見た目は標準のカラムブロックと似ていますが、できることや使い勝手が少し違います。

大まかな違いを、背景色の考え方も含めて表にまとめるとこんな感じです。

項目	SWELLリッチカラムブロック	標準カラムブロック（Gutenberg）
レイアウト自由度	横スクロールやカード風など、装飾前提のデザインが組みやすい	基本的なカラム分割が中心でシンプル
列数の調整	カード型のレイアウトなど、複数列を柔軟に並べやすい	2〜3列のシンプルな配置向き
背景の付け方	ブロック設定に「背景色」と明示された項目はなく、工夫して付ける	ブロックごとに分かりやすく色を変えやすい
向いている用途	サービス一覧、料金表、実績紹介、商品カードなど	テキストや画像をシンプルに横並びにしたいとき

ざっくり言うと、「見せ方を少し凝りたいときはリッチカラム」「シンプルでいいなら標準カラム」と覚えておくと迷いづらいです。

ただ、リッチカラム自体には「ここが背景色の設定です」とはっきり書かれた項目がありません。そのせいで、最初に触ったときに「え、ここに色ってどうやって付けるの？」となりやすいんですよね。

SWELLリッチカラムに背景色を付けたい場面あるある

実際にサイト制作やブログ運営をしていると、こんなシーンでリッチカラムの背景色を変えたくなることが多いです。

どれもリッチカラムで再現できますが、やり方を知らないと「色が付くところ」と「付かないところ」がごちゃごちゃになりがちです。なので次のパートで、目的別に3つのパターンに分けて解説していきます。

SWELLリッチカラムに背景色を付ける3つのパターン

パターン一覧：どの方法を選ぶべき？

まずは3つのパターンを一覧で整理しておきます。

パターン	難易度	色を付けられる場所	向いている人
①グループ化＋背景色	やさしい	リッチカラムをまとめて囲う外側	CSSが苦手で、まずは簡単に帯のように色を付けたい人
②追加CSSクラス＋CSS（全体）	ふつう	特定のリッチカラム全体	あるセクションをしっかりカード風に見せたい人
③追加CSSクラス＋CSS（各カラム）	ややむずかしい	各カラムごと（列ごと）	真ん中のプランだけ色を変えるなど、細かく差を付けたい人

私のおすすめは、「まず①で感覚をつかんで、物足りなくなってきたら②・③にステップアップする」流れです。最初からCSSをガッツリ触ろうとすると、そこで嫌になっちゃう人が多いので、少しずつ慣れていきましょう。

①グループブロックでリッチカラム全体に背景色を付ける

一番やさしいのが、リッチカラム全体をグループブロックで包んで、グループのほうに背景色を設定する方法です。

イメージとしては、リッチカラムを1枚の用紙にまとめて貼って、その用紙に色を塗る感じです。

手順はこんな流れになります。

• 背景色を付けたいリッチカラムブロックを選択する
• ブロックツールバーのメニューから「グループ化」を選ぶ
• 外側にできたグループブロックをクリックして選択する
• 右側のブロック設定から「背景色」を選択する
• 必要に応じて、内側の余白（パディング）も調整する

これだけで、リッチカラム全体を1つの帯のように見せることができます。LPの途中で雰囲気を変えたいときや、「ここから先はサービス一覧です」と区切りたいときにかなり使いやすいです。

メリットとデメリットも整理しておきます。

項目	内容
メリット	CSSを書かなくても、クリック操作だけで背景色を付けられる
デメリット	カード1枚ずつの背景色は変えられない、細かい装飾には限界がある

「まずはリッチカラムのまとまりとして色を付けたい」という段階なら、このやり方で十分なことも多いです。そこから先、カード単位でデザインを変えたくなってきたら、次の②・③に進むイメージです。

②追加CSSクラス＋CSSでリッチカラム全体をカード化する

次に、リッチカラムブロックそのものに追加CSSクラスを付けて、そのセクションだけカード風に見せる方法です。私がクライアント案件でよく使うのはこのパターンです。

流れをざっくり書くとこうなります。

細かい数値や色はサイトごとに変わりますが、よく使う組み合わせはこんなイメージです。

• background-color：薄いグレーや、ブランドカラーをかなり薄めた色
• padding：上下左右16〜24px程度
• border-radius：8〜16pxくらいの角丸
• box-shadow：ほんのり影を付けてふわっと浮かせる

こうしておけば、「サービス紹介のまとまり」や「料金表のブロック」など、特定のリッチカラム全体をカード風に見せられます。

同じクラス名を別のリッチカラムにも付ければ、同じ見た目のカードを簡単に再利用できるので、更新作業もかなりラクになります。

③追加CSSクラス＋CSSで各カラムごとに背景色を変える

3つ目のパターンは、リッチカラムの中にある「カラム一つひとつ」にクラスを付けて、列ごとに背景色を変える方法です。料金表で真ん中のプランだけ色を変えたい、といった場面でよく使います。

大まかな流れは次のとおりです。

• リッチカラムの中の1つのカラムをクリックして選択する
• 右側の「高度な設定」→「追加CSSクラス」に、例として plan-basic などの名前を入れる
• 2列目・3列目も同様に、plan-recommend、plan-premium など別のクラス名を付ける
• 追加CSSに、それぞれのクラスに対して背景色や枠線、文字色を指定する
• スマホで縦並びになったときに違和感がないか確認する

たとえば料金表なら、こんなイメージで色を分けると分かりやすいです。

列	背景色の方向性	特徴づけのイメージ
1列目（ベーシック）	白に近い薄いグレー	必要最低限の機能で「とりあえず」のポジション
2列目（おすすめ）	ブランドカラーをかなり薄めた色	バッジやボタンも組み合わせて一番目立たせる
3列目（上位プラン）	ベーシックよりわずかに濃いグレー	機能は多いけれど、価格も高めな印象

真ん中のカラムだけ背景色を少し濃くしたり、影を強めにしたりすると、「このプランがおすすめなんだな」と自然に伝わります。実務でも、私はこのパターンを料金表でよく使います。

デザインを整えるSWELLリッチカラム背景色のコツ

背景色と文字色の組み合わせルール

背景色を変えるときに一番大事なのは、「ちゃんと文字が読めるかどうか」です。デザインを頑張ったつもりでも、コントラストが弱いと一気に読みにくくなってしまいます。

ざっくりした目安をまとめると、次のような感じです。

背景色のタイプ	合わせる文字色	コメント
白に近い薄いグレー	濃いグレー（#333前後）	一番無難で読みやすい組み合わせ
パステル系のカラー	濃いグレーか黒	背景に色の個性が出るので、文字はシンプルに
濃いめのカラー（紺など）	白に近い文字色	見出しや強調エリア向き。本文には少し強すぎることも
ほぼ黒に近い背景	できれば避ける	文字がつぶれやすく、調整も難しいので初心者には不向き

迷ったら、「背景は薄く、文字は濃く」が基本です。私も実際には、背景はかなり淡い色にして、文字はほぼ黒に近いグレーを使うことがほとんどです。

余白・ボーダー・影のバランスを整える

リッチカラムの背景色を使うときは、余白（パディングとマージン）の取り方で印象がガラッと変わります。

「背景を付けたのに、なんだか窮屈だな…」と感じるときは、たいてい余白が足りていません。逆に余白をしっかり取るだけで、急にデザインが整って見えます。

最初の設定の目安はこのくらいをイメージしてみてください。

項目	おすすめの目安
カード内のパディング	上下16〜24px、左右16〜24px程度
カード同士の間隔（マージン）	上下16px前後
ボーダー	1pxの薄いグレーか、思い切ってなし
影（box-shadow）	ごく控えめに。まずは影なしから試すと安心

「淡い背景色＋角丸＋ほどよい余白」に少しだけ影を足してあげると、SWELLのリッチカラムでも簡単にカードらしい見た目になります。影はつい盛りたくなりますが、最初はほんのりくらいにしておくと上品に見えます。

スマホ表示で崩れないためのチェックリスト

SWELLのリッチカラムはスマホでは縦並びになってくれますが、背景色を足したことで「上下がくっついて見える」「文字が読みにくい」と感じることもあります。

作業がひと段落したら、スマホのプレビューや実機で必ず次のポイントをチェックしてみてください。

チェック項目	見るポイント
カード同士の間隔	縦に並んだとき、カードとカードがぴったりくっついていないか
文字サイズと行間	背景色との組み合わせで文字がつぶれていないか、行間が詰まりすぎていないか
画像サイズ	画像が大きすぎて、テキスト部分のスペースを圧迫していないか
余白のバランス	上下左右の余白のバランスが極端になっていないか

私も、PCでは良く見えていたのに、スマホで見たら「なんか詰まって見えるな…」と感じて微調整することが多いです。スマホ側だけパディングを少し増やしたり、文字サイズをほんの少し下げるだけでも、読みやすさはかなり変わります。

実例で学ぶSWELLリッチカラム背景色カスタマイズ

サービス一覧カードのデザイン例

まずは、定番の「サービス一覧カード」のパターンです。リッチカラムを3列にして、1つひとつのサービスをカード風に見せる配置を考えてみましょう。

構成としては、こんな並びをイメージすると分かりやすいです。

• カードの上部にアイコンや小さい画像
• 真ん中にサービス名の見出し
• 下に簡単な説明文と、詳しく見るボタン

このとき、リッチカラム全体に色を付けるというよりは、「カラム内のカード」にだけ背景色を付けてあげるほうがスッキリします。

ポイントを整理すると、だいたい次のような感じです。

• カードの背景色は白に近い薄いグレーにして、落ち着いた印象にする
• セクション全体の背景は真っ白か、カードよりさらに淡い色にしてメリハリを付ける
• 見出しの文字色を少しだけ濃くして、本文とのメリハリをつける
• ボタンはブランドカラーでしっかり目立たせる

パターン③のようにカラムごとにクラスを付けてもいいですし、カード部分をグループ化して、そのグループに共通のクラスを付ける方法もよく使います。どちらにしても、「背景色＋余白＋角丸」の3点セットを意識すると、それだけでサービス一覧がぐっと見やすくなります。

料金表風レイアウトで真ん中のプランを目立たせる

次は、リッチカラムを使った料金表レイアウトです。よくある「3プラン並べて、真ん中におすすめプラン」という構成をイメージしてみましょう。

役割ごとに背景色を分けるときの考え方は、こんなイメージです。

列	背景色の方向性	特徴づけ
左列（ベーシック）	白に近い薄いグレー	価格も機能も控えめで、「とりあえず試したい人向け」
中央列（おすすめ）	ブランドカラーを薄くした背景色	「おすすめ」「人気」と書いたバッジや、しっかりしたボタンで目立たせる
右列（上位プラン）	ベーシックより少し濃いグレーか、控えめなカラー	機能は多いけれど、価格も高めなポジション

それぞれのカラムに plan-basic、plan-recommend、plan-premium などのクラスを付けて、背景色やボーダー、影の強さを変えてあげると、視線が中央のプランに自然と集まるようになります。

中央のプランだけ少し高さを出したり、上部に「一番人気」といった小さなラベルを付けたりすると、クリックされやすい料金表に仕上がります。

注意したいNGパターン

最後に、リッチカラムの背景色カスタマイズでやってしまいがちなNGパターンもまとめておきます。ここを避けるだけでも、かなり見え方が良くなります。

特に「色の種類が多い」と、どうしてもチラチラして見えます。メインカラーとサブカラー、それにアクセントカラーを1つ足すくらいのバランスにしておくと、リッチカラムの背景色も含めて全体が整いやすいです。

SWELLリッチカラム背景色の設定でよくある質問

Q1. SWELLリッチカラムに背景色の項目が見つからないのはなぜですか？

A. リッチカラムブロックの設定パネルには、「背景色」と名前が付いた分かりやすい項目が用意されていないためです。

その代わり、次のようなやり方で背景を付けることが多いです。

• リッチカラムをグループブロックで包み、グループ側に背景色を設定する
• 追加CSSクラスを使って、CSSでリッチカラム全体や各カラムの背景色を指定する

どこに色を入れたいかによってベストな方法が変わるので、この記事で紹介した3つのパターンから一番近いものを選んでみてください。

Q2. 追加CSSクラスを付けたのに、リッチカラム背景色が反映されません

A. 多くの場合、次のどれかが原因になっていることが多いです。

• 追加CSSクラスのスペルミス（半角・全角、大文字・小文字の違いなど）
• 追加CSS側で、クラスの先頭に付ける「.（ドット）」を忘れている
• キャッシュプラグインやブラウザのキャッシュが効いていて、変更が反映されていない
• 別のCSSで背景色が上書きされており、そちらが優先されている

私も、クラス名を途中で変更したのに古いCSSを削除し忘れて、「どれが効いているんだろう…」と迷子になったことがあります。

うまく反映されないときは、クラス名とCSSの両方をもう一度見直して、ブラウザのシークレットウィンドウで再読み込みしてみると原因を切り分けやすくなります。

Q3. SWELLリッチカラムとカラムブロック、背景色を付けるならどちらを使うべきですか？

A. 背景色だけを見ればカラムブロックのほうが直感的な場面もありますが、「どんなレイアウトにしたいか」で選ぶのがおすすめです。

ざっくりした判断基準はこんなイメージです。

• テキストや画像をシンプルに横並びにしたい → 標準のカラムブロックで十分
• カード風のサービス一覧や料金表など、デザイン性も重視したい → SWELLのリッチカラムを使う

リッチカラムでも、この記事で紹介したようにグループブロックや追加CSSクラスを組み合わせれば、背景色を含めてかなり自由に調整できます。

私自身は、「デザインにこだわりたい固定ページやLPはリッチカラム」「ブログ本文の軽い2カラムはカラムブロック」と分けることが多いです。

まとめ：SWELLリッチカラム背景色は3パターンを押さえれば怖くない

ここまでの内容をまとめます

今日からできる最初の一歩としては、まず1つリッチカラムを選んで「グループブロックで包んで背景色を付けてみる」ところから始めてみてください。

そのうえで、「ここのセクションはもっとしっかりカード化したいな」と感じた場所にだけ、追加CSSクラスを使った装飾を一つずつ足していくと、ムリなくレベルアップしていけます。

SWELLのリッチカラムと背景色は、慣れてくるとかなり頼もしい組み合わせになります。少しずつ試しながら、あなたのサイトに合ったデザインを一緒に育てていきましょう。