SWELLで背景をグラデーションにする3つの方法！失敗しないコツ

SWELLで背景をグラデーションにしたいのに、どこを触ればいいのか分からなくてモヤモヤしていませんか。

この記事では「SWELLの背景をグラデーションにしたい」と考えているあなたに向けて、サイト全体・特定セクション・ボタンなど、よく使う場所ごとのやり方をまとめていきます。

結論から先に言うと、SWELLはテーマの設定と少しのCSSを組み合わせるだけで、難しい知識がなくても背景をグラデーションにできます。

SWELLで背景グラデーションを使う前に知っておきたい基本

SWELLの背景設定でできること・できないことを整理しよう

最初に、SWELL本体の設定で調整できる背景や色をざっくり把握しておきます。細かい場所はテーマのバージョンや環境で多少違いがありますが、おおまかな役割は次のようなイメージです。

表1：SWELL標準の背景・色設定でできること一覧

設定箇所	主な役割	グラデーションの可否	備考
サイト全体の背景色	画面全体のベースカラー	管理画面では単色のみ	CSSで上書きすればグラデーションも可能
サイト全体の背景画像	背景に画像を敷く	画像次第でグラデーションも表現可	グラデーション画像を用意して設定する
お知らせバー	画面上部の細長いバー	テーマ設定で装飾可能	色や背景効果はバージョンや設定に依存
ボタンデザイン	SWELLボタンのスタイル	基本は単色	CSSを追加すればグラデーションも作れる
ブロックの背景色	各セクションの背景	標準は単色	クラスを付けてCSSでグラデーションを指定

ざっくりまとめると、「管理画面からの操作だけではほぼ単色」「本格的な背景グラデーションをやりたい場所はCSSで調整」というイメージです。

CSSと聞くと身構えてしまう方も多いと思いますが、やることは意外とシンプルです。

• グラデーションをかけたい場所にクラス名を付ける
• 追加CSSにlinear-gradientを使ったコードを書く
• 色や角度を少しずつ変えながらプレビューで確認する

この流れさえ覚えてしまえば、あとは応用でかなり自由にいじれるようになります。

SWELLの背景グラデーションをどこに使うか決めよう

よくあるSWELL背景グラデーションの利用シーン

実際にSWELLユーザーが背景のグラデーションを使うのは、次のような場面が多いです。

• トップページのメインビジュアル（ヒーローセクション）
• フルワイドブロックやカバーブロックの背景
• おすすめ記事・人気記事など、記事一覧セクションの背景
• お知らせバーやキャンペーン告知エリア
• お問い合わせや申込につなげたいCTAボックス
• プロフィールボックスや自己紹介エリア

それぞれ「何を目立たせたいか」が少しずつ違います。目的別に整理すると、こんな感じです。

表2：背景グラデーションを使う目的別のおすすめ場所

目的	おすすめの場所	ポイント
サイト全体の印象アップ	ヒーローセクション、ファーストビュー	ブランドカラーをメインにする
誘導したい場所を目立たせる	CTAボックス、重要なボタン周り	周りより少し強めのグラデーションにする
世界観や雰囲気を出したい	プロフィール、ストーリー紹介セクション	淡い色合いで柔らかいグラデーションにする
情報を区切りたい	セクションとセクションの区切り部分	明度差のある2色を使って切り替える

まずは自分のサイトで「ここだけは必ず見てほしい」という場所をひとつ決めて、そこからグラデーションを試していくのがおすすめです。

使いすぎ注意！SWELL背景グラデーションの適量

実際に私がカスタマイズを手伝うときは、次のようなルールで量をコントロールしています。

• ページ内で「はっきりしたグラデーション」は1〜2カ所までにする
• それ以外はごく薄いグラデーションか単色でまとめる
• 背景とボタンを同じようなグラデーションにしない（ボタンが埋もれないようにする）

SWELLはもともとシンプルで整ったデザインのテーマなので、背景を派手にしすぎるとテーマの良さが消えてしまうことがあります。迷ったときは「一番目立たせたい場所だけ強めのグラデーション」「あとは控えめ」が基本だと思ってもらえると安心です。

SWELL標準機能でできる背景グラデーションの活用

お知らせバーのグラデーション効果を使ってみる

SWELLには、サイト上部に表示できる「お知らせバー」があります。テーマの設定やスキンによっては、背景の装飾を変えられるので、ここで軽めのグラデーションを試すのは相性がいいです。

使いどころとしては、例えば次のようなシーンがあります。

• セールやキャンペーンを短い一文で告知したいとき
• ブログの更新情報をさりげなく目立たせたいとき
• 会員登録やメルマガへの導線を常に表示しておきたいとき

表3：お知らせバーに背景グラデーションを使うメリット

項目	内容
目立ちやすさ	ページ最上部に表示されるので視線が集まりやすい
作業の手軽さ	基本的には管理画面の設定で完結しやすい
デザインの自由度	文字色や背景色の組み合わせで印象を変えられる
デメリット	色を強くしすぎると本文より目立ちすぎてしまう

まずはここで軽く試してみて、色の強さや文字の読みやすさの感覚をつかんでおくと、そのあと別の場所でグラデーションを使うときにもバランスが取りやすくなります。

ボタンのグラデーションでクリック率アップを狙う

次に、ボタンです。SWELLにはボタンブロックや、ボタン付きボックスなど、CTAまわりに使いやすいブロックがそろっています。

ここでは、次のような考え方で背景やボタンにグラデーションを使うと分かりやすいです。

• お問い合わせや購入ボタンなど「絶対押してほしいボタン」だけ強めにする
• サブのボタンは単色にして、重要度の差を視覚的に伝える
• ブランドカラーをベースに、少し明るい色を混ぜたグラデーションにする

表4：ボタンまわりでのグラデーション活用パターン

パターン名	想定シーン	色の組み合わせ例
メインCTAグラデーション	申込・購入・登録ボタン	濃いブランドカラー＋少し明るめの同系色
サブCTAは単色	詳細を見る・他のプランを見るなど	グレーや淡いサブカラー
アイコン付きボックス＋ボタン	特集記事や重要なお知らせへの導線	背景は薄いグラデーション、ボタンは濃い単色

ボタン本体をグラデーションにするか、ボタンの後ろ側の背景をグラデーションにするかはデザイン次第ですが、どちらか一方に統一した方がごちゃごちゃしません。ボタンが主役になるように考えてみてください。

画像による背景グラデーションという選択肢

管理画面の背景画像機能を使って、「グラデーション画像」を背景として設定する方法もあります。これはCSSを書くのが苦手な方にとっては、かなり現実的な選択肢です。

手順としては、例えば次のような流れになります。

この方法の良いところは、波模様や丸いグラデーションなど、CSSでは少し面倒な表現も画像なら楽に作れる点です。一方で、画像のサイズが大きすぎるとサイトが重くなるので、アップロード前に圧縮しておくのがポイントです。

CSSでSWELL背景グラデーションを自由にカスタマイズする方法

基本のlinear-gradientの書き方をざっくり理解する

CSSで背景グラデーションを作るときは、基本的に「linear-gradient」という関数を使います。細かい書き方は調べればいつでも確認できるので、ここではよく使う形だけ覚えておけばOKです。

表5：よく使うlinear-gradientの基本パターン

パターン	イメージ	書き方の例
左から右	横方向に色が変わる	background: linear-gradient(to right, 色1, 色2);
上から下	縦方向に色が変わる	background: linear-gradient(to bottom, 色1, 色2);
斜め（左上→右下）	斜めに色が流れる	background: linear-gradient(135deg, 色1, 色2);
3色グラデーション	真ん中に別の色を挟む	background: linear-gradient(to right, 色1, 色2, 色3);
透明を混ぜる	上から半透明の色を重ねる	background: linear-gradient(to bottom, rgba(), rgba());

あとは「どの要素にこのbackgroundを当てるか」を決めるだけです。サイト全体にかけるのか、特定のセクションだけにかけるのかで、狙いも見え方も変わってきます。

サイト全体の背景をグラデーションにするCSS例

まずは、サイト全体の背景をグラデーションにするパターンです。やることはシンプルで、ラッパー要素にlinear-gradientを指定するイメージになります。

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

• WordPress管理画面から「外観」→「カスタマイズ」→「追加CSS」を開く
• サイト全体を包んでいる要素（bodyや#body_wrapなど）にbackgroundを指定する
• 自分のブランドカラーに合わせて色を調整する

例として、淡い青〜白に近い青へのグラデーションを使うとします。背景全体をそのグラデーションで塗りつつ、記事本文のボックスは真っ白にしておけば、読みやすさは確保しながら外側だけ雰囲気を変えることができます。

「サイト全体の背景はグラデーション」「記事本文の背景は白」という組み合わせは、実際の現場でもよく使われる構成です。

特定のブロックだけ背景をグラデーションにする方法

次は、フルワイドブロックや特定のセクションだけ背景を変えたい場合です。SWELLでも、ブロックごとにクラス名を付けてCSSで装飾を上書きできます。

流れは次のとおりです。

• グラデーションをかけたいブロックを選択する
• ブロック設定の「高度な設定」で追加CSSクラスを入力する（例：grad-section）
• 「外観」→「カスタマイズ」→「追加CSS」で「.grad-section { background: linear-gradient(…); }」のように指定する
• プレビューを見ながら色や角度を微調整する

表6：ブロック単位で背景グラデーションをかけるときの手順

手順	やること	補足ポイント
1	対象ブロックを選択	フルワイド、カバー、カラムレイアウトなど
2	「高度な設定」を開く	「追加CSSクラス」の入力欄を探す
3	クラス名を入力（例：grad-section）	半角英数字とハイフンでシンプルな名前にする
4	追加CSSにクラス指定を書き込む	「.grad-section { background: linear-gradient(…); }」のように書く
5	プレビューでPCとスマホを確認	文字の読みやすさも必ずチェックする

この方法を覚えておくと、「ここだけ背景を変えたい」という要望に柔軟に対応できます。私もLP風のページを作るときは、このやり方で重要なセクションだけ雰囲気を変えることが多いです。

CTAやボックスの背景グラデーションで差別化する

SWELLでは「ボックス」や「ボタン付きボックス」を使って、CTA（お問い合わせや申込への誘導部分）を作りやすくなっています。このエリアを背景グラデーションにすると、パッと見の印象が大きく変わります。

おすすめの組み合わせは、次のようなイメージです。

• 背景：ブランドカラーを少し薄くしたグラデーション
• ボタン：背景よりも濃いブランドカラーの単色、もしくは控えめなグラデーション
• テキスト：濃いグレーでコントラストをはっきりさせる

表7：CTAボックスの背景グラデーション例

目的	背景グラデーションの例	ボタンの色の例
信頼感を出したい	淡い青〜白に近い青の横グラデーション	濃いネイビーやダークブルー
あたたかい印象にしたい	ベージュ〜薄いオレンジの縦グラデーション	濃いオレンジやブラウン寄りの色
ポップに見せたい	明るいピンク〜紫の斜めグラデーション	ピンクより少し暗めの色

どの場合も、「文字がしっかり読めるかどうか」を一番大事にしてください。見た目が良くても、内容が入ってこないと意味がないので、背景と文字色の組み合わせは慎重に選びましょう。

SWELL背景グラデーションに合う配色とデザインの考え方

ブランドカラーからグラデーションを作ると失敗しない

背景のグラデーションを考えるとき、いきなりいろいろな色を組み合わせると、ほぼ間違いなく迷子になります。まずは「自分のサイトのメインカラー」からスタートするのがおすすめです。

考え方としては、次の3色をベースにすると分かりやすいです。

• ブランドカラーそのもの
• ブランドカラーを少し明るくした色（彩度を落とす・明度を上げるなど）
• 白に近いごく薄い同系色

例えば、濃い青がブランドカラーなら、少し薄い青と、ほぼ白に見える薄い青を組み合わせると自然なグラデーションになります。オレンジ系でも考え方は同じです。

ブランドカラーを軸にグラデーションを作ると、バナーやアイコンなど他のパーツとも世界観が揃いやすく、全体として「なんとなく整っている」印象になりやすいです。

背景グラデーションと文字色のコントラストを意識する

背景グラデーションで一番やりがちな失敗が、「おしゃれだけど読みにくい」という状態です。とくにスマホで読むと、細かい色の違いは分かりづらく、文字が沈んで見えてしまうことがあります。

避けたい組み合わせの例は次のような感じです。

• 背景：鮮やかなピンク〜紫のグラデーション／文字：黒
• 背景：濃い青〜濃い緑のグラデーション／文字：濃いグレー

逆に、読みやすい組み合わせの例はこちらです。

• 暗めの背景グラデーションには白文字を合わせる
• かなり淡いグラデーションには濃いグレーの文字を合わせる
• カラフルな背景の上に載せる文字色はできるだけ1色に絞る

背景を決めたら、必ずスマホで自分の目で読んでみてください。もし途中で読むのがしんどくなったら、その部分だけ背景を単色にするのも立派な選択です。

サイト全体で使うグラデーションは2パターンまでに抑える

いろいろなグラデーションを試していると、ついつい「あれもこれも」と増やしてしまいがちです。でも、サイト全体のまとまりを考えると、メインとサブの2パターンくらいに抑えた方が、結果としておしゃれに見えます。

例えば、次のようなイメージです。

• パターンA：ヒーローセクションや大きな見出し背景用のメイングラデーション
• パターンB：CTAやプロフィールなど、補助的なセクションで使うサブグラデーション

あとは、どうしても必要なところだけ単色でアクセントを入れる、というくらいにとどめておくと、読み手にとっても情報が整理されて見えます。

SWELL背景グラデーションでよくある失敗と対処法

追加CSSを書いたのにSWELL背景グラデーションが反映されない

「追加CSSにグラデーションを指定したのに、なぜか見た目が変わらない」という相談はかなり多いです。よくある原因は次のようなものです。

まずは簡単な切り分けとして、同じセレクタで背景色を真っ赤にしてみる、など極端な変更をしてみると分かりやすいです。それでも変わらない場合は、セレクタが合っていない可能性が高いので、対象の要素を再確認してみてください。

背景グラデーションを入れたら境界線や装飾が消えた

SWELLには、セクションの上下に波型や斜めのラインを入れられる「境界線」のような装飾機能があります。ここに背景画像やグラデーションを組み合わせると、「あれ、境界線が効かなくなった？」という状態になることがあります。

これは、背景の指定方法や要素の重なり方など、テーマ側の仕様とCSSの書き方がぶつかっていることが多いです。同じ見た目を保ちつつ両方を成立させるのは、場合によってはかなり手間になります。

そういうときは、次のように優先順位を決めてしまうのも一つの考え方です。

• 境界線の装飾を優先して、そのセクションの背景は単色にする
• どうしてもグラデーションを使いたい部分は、境界線をシンプルな設定にする
• 波形などを背景画像側に含めてしまい、境界線機能に頼らない

無理に全部乗せにするよりも、「このページで一番見せたいものは何か」を基準にして取捨選択していくと、結果的にデザインの質は上がります。

スマホで見るとSWELL背景グラデーションが変に見える

PCでプレビューしたときはきれいだったのに、スマホで見ると違和感が出ることもよくあります。

• グラデーションの境目が、思ったよりも目立ってしまう
• 重要な文章が明るい部分に重なって読みにくい
• 背景の見える範囲が変わって、印象が変わってしまう

こういったときは、スマホ表示だけ背景を少し薄くしたり、いっそ単色に切り替えるのもアリです。CSSでは、画面幅に応じてスタイルを変えられるので、慣れてきたらスマホ用の設定も分けて書いてみてください。

ただ、最初のうちは「スマホで読んだときにストレスなく読めるか」を基準に、あまり凝りすぎない方が結果的にうまくいきます。

SWELLの背景グラデーション実例イメージとアイデア集

ブログ型サイト向けの背景グラデーションアイデア

個人ブログや情報発信メディアでは、主役はあくまで「記事の内容」です。背景が主張しすぎると本文が頭に入りにくくなるので、控えめなグラデーションが向いています。

例えば、次のような構成が無難で使いやすいです。

• サイト全体の背景：ごく薄いグレー〜白のさりげないグラデーション
• ヘッダー直下のヒーローエリア：ブランドカラーを使った横方向のグラデーション
• 記事本文：背景は完全な白、周りに軽く影を付ける程度

このくらいのバランスだと、読みにくくなる心配が少なく、「なんとなく今っぽい雰囲気」が出せます。

サービスサイト・LP向けの背景グラデーションアイデア

サービス紹介サイトやLPは、問い合わせや申込といったアクションを起こしてもらうことが目的です。そのため、背景グラデーションを「流れを作るための演出」として考えると、構成を組み立てやすくなります。

一例としては、次のような流れです。

• ファーストビュー：斜め方向のグラデーションで少し動きを出す
• 特徴やメリットのセクション：単色またはごく薄いグラデーションで落ち着かせる
• お客様の声：柔らかい色のグラデーションで安心感を出す
• 最後のCTA：はっきりしたコントラストのグラデーションで締める

このように、ページの中で「テンションの波」を作るイメージで背景を設計すると、スクロールしていても飽きずに読み進めてもらいやすくなります。

ポートフォリオサイト・クリエイターサイト向けアイデア

デザイナーやクリエイターのポートフォリオであれば、もう少し攻めたグラデーションも似合います。自分の作風を背景で軽く表現しておくと、「この人らしさ」が伝わりやすくなります。

例えば、次のような使い方です。

ただし、どれだけ攻めたデザインにしても、「テキストは読みやすいこと」が大前提です。長文を載せる部分は白背景のカードに載せるなど、情報の読みやすさをキープする一手間を忘れないようにしましょう。

よくある質問（FAQ）

Q1. SWELLで背景をグラデーションにするにはCSSが必須ですか？

A. 管理画面の設定だけでも、お知らせバーやボタン周りなど一部のエリアは装飾を変えられますが、サイト全体の背景や特定セクションを自由にグラデーションにしたい場合は、CSSを使った方が圧倒的に柔軟です。追加CSSにlinear-gradientを指定するだけでもだいぶ表現の幅が広がるので、少しずつ慣れていくのがおすすめです。

Q2. SWELLで背景をグラデーションにしたいけれど、色選びで迷ったときはどうすればいいですか？

A. 迷ったら、「ブランドカラーを基準にした2〜3色」で考えるのが一番簡単です。ブランドカラーそのものと、その少し明るい色、白に近い薄い色の組み合わせなら、ほとんどの場合大きく外しません。配色ツールやグラデーションジェネレーターを使うのも便利ですが、最初は自分のサイトのメインカラーから広げていくと、全体の雰囲気がちぐはぐになりにくいです。

Q3. 背景をグラデーションにするとSWELLのサイトが重くなりませんか？

A. CSSのlinear-gradientだけで背景を作る場合は、基本的に画像を読み込まないので、表示速度への影響はほとんど気にしなくても大丈夫です。一方、グラデーション画像を背景として何枚も使う場合は、画像のサイズや枚数によっては読み込みが遅くなる可能性があります。その場合は、画像の圧縮やサイズ見直しを行い、必要な箇所だけに絞って使うのが良いです。

まとめ：SWELLの背景をグラデーションにして「世界観」と「読みやすさ」を両立させよう

ここまでの内容を整理しておきます

今日からできる最初の一歩としては、「トップページのいちばん見てほしいセクション」を一つだけ決めて、そこにブランドカラーを使った控えめなグラデーションを試してみてください。実際に自分のサイトで色を変えながら調整していくうちに、SWELLでの背景グラデーションの扱いにも自然と慣れていきます。

肩の力を抜いて、まずは一カ所から。少しずつ自分らしいデザインに育てていきましょう。