SWELLのサイトカラー変更方法｜おしゃれな配色のコツ

2026年10月26日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

ブログの色を、自分らしい雰囲気に変えたいと思っていませんか。私は開設当初、好きな色をあれこれ使ってしまい、見出しもボタンも色がばらばらの落ち着かないブログになってしまった経験があります。

この記事では、SWELLのサイトカラーを変更する方法を、設定画面の名前や配色ツールまで具体的に解説します。実際の失敗談も交えるので、読みながら進めれば、統一感のあるおしゃれなブログに仕上げられます。

※ブログの作業環境を見直したい方へ：筆者が記事作成に使っているMacBook Air M5は、軽くて持ち運びやすく、デザインの調整や記事作りを快適にこなせるノートPCです。

➡️ AmazonでMacBook Air M5の最新価格を見る

価格は変動するため、最新の情報はAmazonの商品ページでご確認ください。

ニャフィ

ブログの色を、自分好みに変えたいのにゃ！

たいがブログ

色が整うと、ブログの印象がぐっと良くなりますよね。

ニャフィ

でも色選びのセンスに自信がないにゃ…

たいがブログ

配色ツールを使った手順を、5つのステップで解説しますね。

▼あわせて読みたい：デザインを整えたブログを快適に表示できるサーバー選びについては、こちらの記事で詳しく紹介しています。

SWELLのサイトカラーで変えられる部分

SWELLでは、カスタマイザーからサイト全体の色をまとめて変更できます。とくにメインカラーは多くの部分に反映されるので、ここを決めるだけでブログの印象が大きく変わります。

筆者はAFFINGER6を使っていたころ、色の設定項目が細かく分かれていて、そろえるのに時間がかかりました。SWELLはメインカラーを変えるだけで見出しやボタンにも反映されるので、統一感を出しやすいです。

メインカラーはサイト全体に反映される

メインカラーは、見出しやボタン、ステップブロックの番号など、サイトのさまざまな部分に使われます。ブログの顔となる色なので、いちばん慎重に選びたいところです。

ヘッダーやフッターの色は別に設定する

ヘッダーとフッターの色は、カスタマイザーの「ヘッダー」「フッター」でそれぞれ設定します。メインカラーと組み合わせて色を決めると、全体がまとまって見えます。

SWELLのサイトカラーを変更する方法

サイトカラーは、カスタマイザーの「サイト全体設定」→「基本カラー」から変更します。いきなり設定する前に、使う色をあらかじめ決めておくと迷わずに済みます。

筆者が色選びで失敗したのは、その場の気分で色を足していったからでした。配色を最初に決めてから設定するだけで、ブログの統一感は見違えるほど良くなります。

使う色は3色以内にまとめる

色はベースカラー・メインカラー・アクセントカラーの3色以内にまとめるのが基本です。背景などのベースを多めに使い、アクセントはボタンなど目立たせたい部分だけにしましょう。

ブログのテーマに合った色を選ぶ

色にはそれぞれ与える印象があります。たとえば青は信頼感、緑は安心感を伝えやすい色です。ブログのジャンルや読者に合った色を選ぶと、内容とデザインがなじみます。

STEP

配色ツールで使う色を決める

無料の配色ツール「Adobe Color」で、メインにしたい色を選ぶと相性のよい色の組み合わせを提案してくれます。決めた色のカラーコードを控えておきましょう。

STEP

基本カラーの設定画面を開く

「外観」→「カスタマイズ」→「サイト全体設定」→「基本カラー」を開きます。ここでメインカラーやテキストカラーなどをまとめて設定できます。

STEP

メインカラーを設定する

メインカラーの欄に、控えておいたカラーコードを入力します。プレビューで見出しやボタンの色が変わるので、全体の印象を確認しましょう。

STEP

文字・リンク・背景の色を整える

テキストカラー・リンクカラー・背景色も調整します。文字は真っ黒より少しやわらかい濃いグレーにすると、長い文章でも目が疲れにくくなります。

STEP

いろいろな画面で確認して公開する

「公開」を押したら、パソコンとスマホの両方で色を確認します。筆者はノートPCと外部モニターで同じ色でも見え方が違ったので、複数の画面で確かめるのがおすすめです。

サイトカラーをもっとおしゃれに見せるコツ

サイトカラーを設定したら、細かい部分の色まで整えると、ブログの完成度がさらに上がります。ここでは、実際に運営しながら効果を感じたコツを紹介します。

筆者は画面によって色の見え方が違うことに悩み、外部モニターを基準の画面にして色を決めるようにしました。そのうえでスマホでも最終確認することで、どの端末でも違和感のない配色に落ち着いています。

装飾の色もサイトカラーに合わせる

ボタンやマーカー、キャプションボックスの色は、「SWELL設定」→「エディター設定」で変更できます。メインカラーと同じ系統の色にそろえると、記事全体にまとまりが出ます。

文字と背景の色の差を確認する

色の組み合わせによっては、文字が背景に溶け込んで読みにくくなります。無料ツールの「WebAIM Contrast Checker」で、文字と背景の色の差が十分か確かめておくと安心です。

配色のチェックポイント

使う色が3色以内にまとまっている
ボタンや装飾の色がメインカラーとなじんでいる
文字と背景の色の差が十分ある
パソコンとスマホの両方で確認している

▼あわせて読みたい：色の見え方を確かめる基準の画面として使っている、筆者愛用の作業用モニターはこちらで紹介しています。

よくある質問

メインカラーを変えると過去の記事も変わりますか？: 変わります。見出しやボタンなどメインカラーを使っている部分は自動で反映されます。ただし、ブロックごとに個別で色を指定した部分はそのまま残ります。
元の色に戻したいときはどうすればいいですか？: カスタマイザーの色の設定欄にある「デフォルト」ボタンを押すと、初期の色に戻せます。変更前の色コードをメモしておくと、さらに安心です。
ボタンの色だけを変えたいときは？: 「SWELL設定」→「エディター設定」で、ボタンの色を個別に設定できます。目立たせたいボタンには、アクセントカラーを使うのがおすすめです。
ブログにおすすめの色はありますか？: ジャンルによって変わりますが、信頼感を出すなら青、安心感なら緑が使いやすい色です。迷ったら、Adobe Colorで相性のよい組み合わせを探してみましょう。