SWELLの文字色を変更する方法【初心者向け】

SWELLで文字色を変えたいのに、どこを触ればいいか分からなくてモヤモヤしていませんか。

この記事では、SWELLで文字色を変更するときに大事な「カスタマイザー」「カラーパレット」「必要なところだけCSS」の3つに整理して、順番に分かりやすく解説していきます。

SWELLで文字色を変更する前に知っておきたい全体像

SWELLで変更できる文字色の種類と主な場所

まずは、SWELLで「文字色を変えられる場所」をマップにしておきます。ここが見えていると、自分が今どの設定を触っているのか、かなり分かりやすくなります。

設定場所	主に変わる文字色の例	想定シーン
外観 ＞ カスタマイズ ＞ サイト全体設定 ＞ 基本カラー	本文の文字色、リンク色、見出しやボタンのベースカラー	サイト全体のトーンをまとめたいとき
SWELL設定 ＞ エディター設定 ＞ カラーセット（カラーパレット）	ブロックエディターで選べる文字色・背景色	記事内でよく使う色を登録しておきたいとき
外観 ＞ カスタマイズ ＞ 投稿・固定ページ ＞ コンテンツのデザイン	見出し（H2〜H4）やセクション見出しの色・背景	見出しのデザインや色を調整したいとき
ブロックエディターの「色」設定	記事本文の一部の文字色、ブロック単位の文字色・背景	強調したい一文やボックスの色を変えたいとき
追加CSS	投稿リストの文字色、特定パーツの文字色	細かい部分をピンポイントでカスタマイズしたいとき

大まかにまとめると、次のようなイメージです。

• 「基本カラー」でサイト全体の方向性を決める
• 「カラーパレット」で記事内のよく使う色を登録する
• 「コンテンツのデザイン」と「追加CSS」でパーツ別に仕上げる

この3階建て構造を頭に入れたうえで、細かい設定を見ていくと混乱しにくくなります。

まず押さえるべき3つの設定エリア

SWELLで文字色を触るとき、特に重要になるのが次の3つです。

• サイト全体設定の「基本カラー」
• SWELL設定の「カラーパレット（カラーセット）」
• 投稿・固定ページの「コンテンツのデザイン（見出しなど）」

この3カ所だけでも、かなり広い範囲をカバーできます。

ここがバラバラな配色になっていると、例えば次のような違和感が出やすいです。

• 本文は黒っぽいのに見出しだけやたら明るい
• リンクの文字色だけ浮いていて目が疲れる
• 投稿リストだけ読みにくく、クリックされにくい

まずはこの3つを整えることを優先して、そのうえで細かいパーツを調整していく、くらいがちょうどいいと思います。

SWELLの文字色変更でよくあるつまずき

よく相談されるつまずきポイントも、先に共有しておきます。

この記事ではこういった悩みを避けるために、「どこを変えるとどこが変わるのか」の目安と、読みやすい配色の考え方もセットで押さえていきます。

サイト全体の文字色を変更する基本ステップ

カスタマイザーでテキストカラーとリンク色を変更する手順

まずは、いちばん基本となる「基本カラー」の設定です。やること自体はシンプルで、流れとしてはこんな感じです。

ステップ	操作内容のイメージ	ポイント
1	管理画面から「外観 ＞ カスタマイズ」を開く	カスタマイザーはデザインまわりの大元の入口です
2	「サイト全体設定」＞「基本カラー」を選ぶ	文字色だけでなく、メインカラーや背景色もここで設定します
3	「テキストカラー」を好みの色に変更する	本文だけでなく、細かいパーツにも影響することがあります
4	「リンクカラー」「リンクホバーカラー」を設定する	クリックできる場所がひと目で分かる色にするのが大事です
5	プレビューでPC・スマホ表示を確認してから公開する	読みにくくないか、スマホでも必ずチェックしましょう

私のおすすめは、いきなり派手な色にせず、まずは次のような落ち着いた組み合わせから始めることです。

• 本文の文字色：真っ黒ではなく、ほんの少しだけ薄いダークグレー
• リンク色：メインカラーか、その少し明るめ・暗めの色

ここから少しずつ調整していくだけでも、読みやすさはかなり変わります。

フッターなどエリア別の文字色も合わせて整える

カスタマイザーの中には、フッターやヘッダー用の設定も用意されています。

• 外観 ＞ カスタマイズ ＞ フッター
• 外観 ＞ カスタマイズ ＞ ヘッダー

このあたりを開くと、背景色と文字色をセットで変えられる項目があるはずです。

ここで意識しておきたいのは、次のようなシンプルなルールです。

• 背景が濃い色なら、文字色は白に近い明るい色
• 背景が白や淡い色なら、文字色はダークグレーなど濃いめの色

たとえば、かっこよく見せたいからといって、濃い紺色の背景に黒っぽい文字を乗せてしまうと、一気に読みにくくなります。デザインより先に、「ぱっと見で読めるかどうか」を優先して調整してみてください。

文字色を変更するときの配色の考え方

SWELLで文字色を変えるときに意外と悩むのが、「そもそもどの色を選べばいいのか」という点です。色の正解はサイトの雰囲気によって変わりますが、最低限次の3つを押さえておくと、大きな失敗は避けやすくなります。

• 本文の文字色は「黒に近いダークグレー」が基本
• リンクの色は、背景と本文の文字色からしっかり目立つ色
• 見出しやボタンは、メインカラーか、メインカラーを少し暗くした色

もし色決めで迷ったら、まずは次のセットからスタートしてみてください。

• 本文の文字色：ダークグレー
• リンク色：メインカラーと同系統の色
• 見出し・ボタン：メインカラーをそのまま使う

そこから少しずつ明るさや彩度を調整していくと、自分のサイトらしい配色が見えてきます。

記事本文と見出しの文字色を変更する方法

ブロックエディターのカラーパレットで文字色を変える

ブロックエディターには、「色」というパネルがあり、そこで文字色や背景色を変えられます。このパネルに、SWELLで設定したカラーパレットが表示されるので、あらかじめ登録した色をクリックするだけで、配色をそろえやすくなります。

やりたいこと	操作の流れ（イメージ）	コツ
文章の一部だけ文字色を変えたい	文字を選択 → 右側の「色」パネル → テキスト色を選ぶ	強調に使う色は2〜3種類に絞るとスッキリ見えます
段落ブロック全体の文字色を変えたい	ブロックを選択 → 「色」パネル → テキスト色を選ぶ	見出しと同じ色にしすぎないほうが読みやすくなります
背景色付きのボックスを作りたい	ブロックを選択 → 「色」パネル → 背景色を選ぶ	濃い背景色には白に近い文字色を合わせるのがおすすめです

ポイントは、できるだけカラーパレットに登録した色から選ぶことです。毎回カラーピッカーで適当に選んでしまうと、記事ごとに雰囲気がバラバラになりやすいので、基本は「パレットから選ぶ」を意識してみてください。

見出し（H2〜H4）のデザインと文字色を変える

見出しのデザインや色は、SWELLのカスタマイザーからまとめて変更できます。

• 外観 ＞ カスタマイズ ＞ 投稿・固定ページ ＞ コンテンツのデザイン

このあたりを開くと、次のような項目が見つかるはずです。

• H2〜H4の見出しデザイン
• 見出しの背景色やライン色

よくあるパターンとしては、次のような構成です。

• H2：塗りつぶしの背景＋白文字でしっかり目立たせる
• H3：下線や左ラインなど、少し控えめなデザイン
• H4：細いラインだけでシンプルに見せる

文字色そのものは、基本カラーのテキストカラーや、見出し設定のカラー指定に左右されます。全体の配色と見比べながら、「本文より見出しのほうが少しだけ強い色になっているか」を意識して調整してみてください。

CSSで見出し文字だけ色を変更するサンプル

「見出しの背景色はそのままで、文字色だけ変えたい」「H2だけアクセントカラーにしたい」といった場合は、追加CSSを使ったほうが手早く済むこともあります。

管理画面の「外観 ＞ カスタマイズ ＞ 追加CSS」を開いて、例えば次のようなコードを書きます。

例としては、次のようなイメージです。

h2 {
  color: #333333;
}
h3 {
  color: #555555;
}
h4 {
  color: #777777;
}

カラーコードの部分を自分の好みの色に変えれば、見出しごとに文字色を変えられます。実際に使うときは、テーマや子テーマで使われているクラス名や優先順位によって、少し書き方が変わる場合もあります。うまく反映されないときは、ブラウザの検証ツールで、見出しにどんなクラスやスタイルが当たっているか確認しながら調整すると安心です。

CSSに慣れていない場合は、まずはH2だけ1行だけ試して、問題なければH3・H4を追加していくように、少しずつ進めてみてください。

投稿リストやリンクなどパーツ別の文字色変更テクニック

投稿リストのタイトル文字色を変更する

SWELLの投稿リストは、背景画像を使ったり、オーバーレイを重ねたりできるので、タイトルの文字色を変えたくなる場面がよくあります。

基本的な流れは次のとおりです。

• 投稿リストブロックに追加CSSクラスを付ける
• 追加CSSで、そのクラスが付いた投稿リストの文字色を指定する

例えば、投稿リストブロックに「pl-white」というクラス名を付けたとします。追加CSS側では、イメージとしては次のような感じです。

.pl-white .p-postList__title {
  color: #ffffff;
}

クラス名は自分で自由に決めてOKです。背景色との組み合わせを整理しておくと、あとで管理しやすくなります。

クラス名の例	タイトル文字色	合わせたい背景のイメージ
pl-white	白	黒や紺などの濃い背景
pl-black	黒	白や淡いグレーの背景
pl-main	メインカラー	やや薄めの背景色

「クラス名 ＝ 配色ルール」を自分なりに決めておくと、あとから記事を増やすときも迷いにくくなります。

リンク文字色とホバー色を変更する考え方

リンクの文字色は、ユーザーの行動に直結する、とても重要な部分です。基本カラーでリンク色を設定しつつ、必要であればCSSで細かく調整していくやり方が、バランスが取りやすいと感じています。

例えば、本文部分のリンクだけ色を変えたい場合は、環境に合わせたセレクタを使って、次のようなイメージで書くこともできます。

.post_content a {
  color: #0077cc;
}
.post_content a:hover {
  color: #0055aa;
  text-decoration: underline;
}

実際には、使っているテーマや子テーマによって、本文部分のクラス名は「.p-postContent」など、少し違う場合があります。自分の環境で本文に付いているクラス名を確認して、そこを書き換えて使うのがおすすめです。

リンク色で大事なのは、次の2点です。

• リンクだと一目で分かる色（青系やメインカラーなど）にする
• ホバー時には「色」か「下線」に変化を付ける

リンクが地味すぎるとクリックされませんし、逆に派手すぎると本文が頭に入ってきません。サイト全体の雰囲気を崩さない範囲で、「少し目立つ」くらいを意識してみてください。

ボタンやマーカーの文字色・背景色も合わせて調整

SWELLには、ボタンやマーカー線、ボックスなど、装飾系のブロックもたくさん用意されています。

• ボタンの背景色と文字色
• マーカー線の色
• ボックス系ブロックの背景色と文字色

これらも、カラーパレットや基本カラーの設定に影響を受けます。

定番の組み合わせとしては、次のようなものがあります。

• ボタン：背景色をメインカラー、文字色を白にする
• 注意書きボックス：背景を淡い黄色やオレンジ、文字色をダークグレーにする
• 強調ボックス：背景を淡いメインカラー、文字色をメインカラーか黒にする

確認したいのは、次の2点です。

• ボタンの文字が一瞬で読めるだけの明るさ・暗さの差があるか
• 本文の文字色とケンカせず、全体として読みやすいか

プレビューでPCとスマホの両方を見ながら、「読んでいて疲れないかどうか」をチェックしてあげると、ユーザーにとって親切な配色になります。

SWELLで文字色変更をラクにするカラーパレット活用術

カラーパレットで色を登録するときのコツ

SWELLでは、ブロックエディターで使うカラーセットを、自分好みに登録できます。メインカラーやその変化版、グレー系など、よく使う色をまとめておくイメージです。

私がよくやっているパターンを、ざっくり表にしてみました。

用途	色のイメージ	備考
本文用テキスト	ほぼ黒のダークグレー	長文でも目が疲れにくく、無難に使えます
見出し・ボタン用	サイトのメインカラー	ブランドカラーに合わせると統一感が出ます
強調テキスト	メインカラーを少し暗くした色	重要な一文だけ色を変えたいときに便利です
注意書き	赤〜オレンジ系	使いすぎると目が疲れるのでほどほどに
ボックス背景（淡色）	メインカラーをかなり薄くした色	文字色はダークグレーか黒にすると読みやすいです
ボックス背景（濃色）	メインカラーを濃くした色	文字色を白にして、コントラストをはっきりさせます

ポイントは次の2つです。

• 「テキスト用」「強調用」「背景用」など役割ごとに色を決めて登録する
• 似たような色をたくさん作りすぎないようにする

あとは、実際に記事を書きながら、「この用途にはこの色」と少しずつ慣れていくと、自然と迷わなくなります。

ブログ向き・ビジネス向きの配色テンプレ

ざっくりにはなりますが、用途別の配色テンプレも用意しておきます。ここからスタートして、自分のサイトに合わせて微調整してみてください。

【ブログ向き（親しみやすい雰囲気）】

• メインカラー：明るめのブルーやオレンジ
• 本文の文字色：ダークグレー
• リンク色：メインカラーと同系統の色
• 見出しの背景：メインカラー＋白文字でメリハリを付ける

【ビジネス向き（落ち着いた雰囲気）】

• メインカラー：濃いネイビーや深めのグリーン
• 本文の文字色：やや暗めのグレー
• リンク色：メインカラーか、それより少し明るい色
• 見出しの背景：淡いグレー＋文字はメインカラー

このあたりをベースに、「ちょっと明るすぎるかな」「もう少し落ち着かせたいな」と感じる部分だけ、色味や明るさを調整していくと、自分のサイトらしい雰囲気に近づいていきます。

文字色が見づらくならないチェックポイント

最後に、文字色を変えたあとに必ずチェックしてほしいポイントをまとめます。

• 背景と文字の明るさに、十分な差があるか
• リンクの色が、本文の文字色ときちんと見分けられるか
• 見出しが本文よりもしっかり目立っているか
• スマホの小さい画面でも読みにくくなっていないか

特に気を付けたいのは、次の2パターンです。

• 背景が淡い色なのに、文字も淡い色にしてしまうケース
• 背景が濃い色なのに、文字も濃い色にしてしまうケース

この組み合わせは、本当に読みにくくなりやすいので、違和感を覚えたらすぐに色の明るさを調整してみてください。

よくある質問（FAQ）｜SWELLの文字色変更まわり

Q. SWELLで文字色を変更したのに、反映されない場所があります。どうすればいいですか？

A. まず、「どの設定が優先されているか」を確認するのがおすすめです。基本カラー、ブロックエディターの色設定、追加CSSなどが重なっていると、後から指定したものが上書きしていることが多いです。特定のパーツだけ色が変わらない場合は、該当部分に追加CSSで別の色が指定されていないか、ブラウザの検証ツールなどでチェックしてみてください。キャッシュ系のプラグインを使っている場合は、変更後にキャッシュを削除してから表示を確認すると、反映されやすくなります。

Q. SWELLで文字色を自由に変えていたら、記事ごとに配色がバラバラになってしまいました。どう整えればいいですか？

A. いったん「カラーパレット」と「基本カラー」を見直すのがおすすめです。SWELLのカラーパレットに、本文用・強調用・背景用など、役割ごとに色を登録しておき、今後はそのパレットの色だけを使うようにすると、自然と統一感が出てきます。すでに書いた記事も、時間のあるときに少しずつパレットの色に置き換えていくと、サイト全体の印象がそろってきます。

Q. CSSを使わずに、SWELLで見出しの文字色だけ変えることはできますか？

A. 文字色だけを細かく分けるにはCSSのほうが自由度が高いですが、「見出しの背景と文字色の組み合わせ」を変えるだけなら、カスタマイザーの「コンテンツのデザイン」からある程度調整できます。CSSにあまり自信がないうちは、まずカスタマイザーとカラーパレットでできる範囲の変更にとどめておき、「どうしてもここだけ変えたい」という部分だけ、サンプルを参考にしながら追加CSSを使うのが安心です。

まとめ｜SWELLの文字色変更は「色を決めて仕組み化」すれば楽になる

この記事のポイントを整理します

今日からできる最初の一歩としては、次の流れがおすすめです。

• 自分のサイトの「メインカラー」と「本文の文字色」を決める
• カスタマイザーの基本カラーで、テキストカラーとリンクカラーを見直す
• SWELL設定のカラーパレットに、本文用・強調用・背景用の色を登録する

ここまでできれば、あとは記事を書きながら、必要なパーツだけ少しずつ整えていけば大丈夫です。SWELLの文字色変更は、難しいテクニックよりも、「使う色を決めて、仕組みとして固定してしまうこと」がいちばんの近道なので、この機会に、あなたのサイトの基本の色を決めてみてください。