MENU

SWELLで使えるCSS変数一覧！カラー変更がもっと簡単になる方法

当ページのリンクには広告が含まれています。
悩みさん

CSSで色を変更したいけれど、毎回カラーコードを入力するのは面倒…

そんなときに便利なのが、SWELLにあらかじめ用意されているCSS変数です。

CSS変数を使えば、サイトで設定しているメインカラーやテキストカラーを簡単に呼び出せるため、統一感のあるデザインを効率よく作れます。

この記事では、SWELLでよく使うCSS変数の一覧と、実際の使い方をわかりやすく解説します。

Inedex

SWELLのCSS変数とは？

SWELLには、テーマカラーや文字色などの設定を簡単に呼び出せる「CSS変数」が用意されています。

CSSで色を指定するとき、通常はカラーコード（#から始まる英数字）を入力しますが、SWELLのCSS変数を使えば、毎回カラーコードを入力しなくてもサイト設定の色をそのまま利用できます◎

例えば、SWELLで設定しているメインカラーは、次のように呼び出せます。

var(--color_main)

CSS変数を使わない場合

CSS変数を使わずに色を指定する場合は、以下のようにカラーコードを直接入力します。

background-color: #1e73be;

この方法だと、後からサイトカラーを変更したくなったときに、CSS内のカラーコードも修正しなければなりません。

CSS変数を使う場合

一方、CSS変数を使うと次のように記述できます。

.sample-btn{
  background-color: var(--color_main);
}

テーマ設定でメインカラーを変更した場合も、自動で反映されるため修正の手間を減らせます。

CSS変数を使うメリット

SWELLでCSSをカスタマイズするときは、カラーコードを直接指定するよりもCSS変数を活用するのがおすすめです。

CSS変数を使うことで、デザインの統一感を保ちながら効率よくカスタマイズできるようになります。

ここでは、CSS変数を使う主なメリットを紹介します。

カラーコードを毎回入力する必要がない

CSS変数を使えば、あらかじめ設定されている色を呼び出せるため、カラーコードを毎回入力する手間がありません。

例えば、メインカラーを使いたい場合は、カラーコードではなく次のように記述するだけです。

color: var(--color_main);

カラーコードを調べたり入力したりする手間が省けるので、作業効率アップにもつながります。

サイト全体のデザインに統一感が出る

複数の箇所で同じCSS変数を使うことで、サイト全体の色味を統一しやすくなります。

カラーコードを個別に指定していると、微妙に違う色を使ってしまうことがありますが、CSS変数ならその心配もありません。

デザインにまとまりが生まれ、見やすく整ったサイト作りに役立ちます。

テーマカラーを変更しても修正がラク

CSS変数の大きなメリットは、テーマ設定の色を変更したときに自動で反映されることです。

例えば、メインカラーを変更した場合でも、var(--color_main) を使っている箇所は一括で新しい色に切り替わります。

CSSをひとつずつ修正する必要がないため、後からデザインを見直したくなったときも安心です。

CSSの管理がしやすくなる

カラーコードを直接記述するよりも、CSS変数を使った方がコードが見やすくなります。

例えば、後からCSSを見返したときも、

background-color: var(--color_main);

と書かれていれば、「メインカラーを使っているんだな」とすぐに分かります。

カスタマイズが増えても管理しやすくなるため、長くブログを運営していく方にもおすすめですよ◎

SWELLでよく使う色系CSS変数一覧

SWELLには、色のカスタマイズに便利なCSS変数がたくさん用意されています。

私もCSSを書くときは、カラーコードを直接入力するのではなく、できるだけCSS変数を使うようにしています。

りな

その方が後から色を変更したくなったときもラクなんですよね◎

次に、SWELLでよく使う色系のCSS変数を一覧でまとめましたので、ぜひカスタマイズの参考にしてみてください。

CSS変数一覧

CSS変数用途
var(--color_main)メインカラー
var(--color_text)テキストカラー
var(--color_link)リンクカラー
var(--color_bg)背景カラー
var(--color_gradient1)グラデーションカラー（薄い方）
var(--color_gradient2)グラデーションカラー（濃い方）
var(--color_main_thin)メインカラーの薄い色
var(--color_main_dark)メインカラーの濃い色
var(--color_header_bg)ヘッダー背景色
var(--color_header_text)ヘッダー文字色
var(--color_footer_bg)フッター背景色
var(--color_footer_text)フッター文字色
補足

SWELLで設定したカラーと連動するため、テーマカラーを変更した場合でも自動で反映されます。

カスタマイズ時はカラーコードを直接指定するよりも、まずはCSS変数が使えないか確認してみるのがおすすめですよ◎

実際にSWELL変数を使ってみよう

ここまで、SWELLで使える色系のCSS変数について紹介してきました。

とはいえ、「CSS変数が便利なのは分かったけれど、実際にはどう使えばいいの？」と感じる方もいるかもしれません。

CSS変数は、文字色や背景色、ボーダーなど、さまざまなデザインのカスタマイズに活用できます。

ここでは、よく使う例をいくつか紹介します。実際にCSSを書きながら試してみてくださいね♪

文字色を変更する

文字色にメインカラーを適用したい場合は、次のように記述します。

.sample-text{
  color: var(--color_main);
}

背景色を変更する

ボックスやボタンなどの背景色にCSS変数を使うこともできます。

.sample-box{
  background-color: var(--color_main);
}

ボーダーの色を変更する

枠線の色を変更したいときにもCSS変数が便利です。

.sample-border{
  border: 2px solid var(--color_main);
}

SWELL変数を使ってみて感じたこと

私は以前、CSSをカスタマイズするときにカラーコードを直接入力していました。

後からサイトカラーを変更したくなったときに、「どこで使ったっけ？」と探し回ることが多く、そのたびに修正するのが少し面倒に感じていたんです。

そこでSWELLのCSS変数を活用するようになってからは、色の管理がとてもラクになりました。

例えば、メインカラーを使用する箇所を var(--color_main) に統一しておけば、SWELLの設定画面でカラーを変更するだけで自動的に反映されます。

また、カラーコードを直接指定する機会が減ったことで、サイト全体の色味にも統一感が出るようになりました。

特にブログ運営を続けていると、「もう少し柔らかい色にしたい」「サイトの雰囲気を変えたい」と思うことがありますよね。

そんなときでも大掛かりな修正が不要なので、CSS変数はカスタマイズの効率化に欠かせない存在だと感じています。

CSSを使ったカスタマイズに慣れていない方こそ、まずはSWELLのCSS変数を活用してみるのがおすすめですよ。

まとめ

今回は、SWELLで使える色系のCSS変数について紹介しました。

CSS変数を活用すると、カラーコードを毎回入力する手間が省けるだけでなく、サイト全体のデザインに統一感を持たせやすくなります。

また、テーマカラーを変更した際も自動で反映されるため、後からデザインを見直したくなったときの修正もラクになります。

私自身、SWELLのCSS変数を使うようになってからは、カスタマイズの効率が上がり、色の管理もしやすくなりました。

SWELLでCSSカスタマイズを行う際は、ぜひCSS変数を活用して効率よくデザインを整えてみてくださいね♪

SWELLカスタマイズ
CSS
この記事をシェアする
  • URLをコピーしました！
  • URLをコピーしました！
Inedex