SWELLでは、様々な部分で色を自由に設定することができます。
このページでは、その中でもサイトのベースとして重要になってくる基本的なカラーの設定方法について説明していこうと思います。
目次
カスタマイザーの起動
SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。
カスタマイザーの起動方法については以下の記事を参考にして下さい。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://swell-theme.com/wp-content/uploads/2019/01/thumb_customizer-300x169.png)
【SWELLの設定】「テーマカスタマイザー」の使用方法
SWELLでは、カスタマイズ項目の多くが「テーマカスタマイザー」機能で行うことができるようになっています。 この「テーマカスタマイザー」機能はリアルタイムで設定が…
以下では、カスタマイザー上での操作について説明していきます。
![「サイト全体設定」メニュー](https://swell-theme.com/wp-content/uploads/2019/04/customizer_base_menu.png)
![カラー設定](https://swell-theme.com/wp-content/uploads/2019/04/customizer_color_menu.png)
ベースカラーの設定
管理画面から「外観」>「カスタマイズ」>「サイト全体設定」>「基本カラー」へ進むと、以下のような設定項目があります。
![ベースカラー設定](https://swell-theme.com/wp-content/uploads/2021/07/a096ac035b92a8a3c9c5b37ad48a6c73-2.png)
- メインカラー
-
見出しや各種ボタンなど、サイトで重要となる様々なポイントで利用される色です。
- テキストカラー
-
本文中の文字など、サイト全体に適用されるテキストの色
- リンクカラー
-
記事本文中のリンクの文字色
- 背景色
-
サイト全体に渡ってのページ背景色です。
※ ただし、コンテンツの独立設定がオンになっている場合、コンテンツ部の背景色は白色になります。
その他の場所で設定できるカラー設定
ヘッダー周りの色
ヘッダーの背景色・文字色などについては「外観」>「カスタマイズ」>「ヘッダー」から設定できます。
![ヘッダーのカラー設定項目](https://swell-theme.com/wp-content/uploads/2019/01/setting_header_colors.png)
フッター周りの色
フッターの背景色・文字色などについては「外観」>「カスタマイズ」>「フッター」から設定できます。
![フッターカラー設定](https://swell-theme.com/wp-content/uploads/2019/04/setting_footer_color.png)
こちらでフッターの背景色と文字色を設定してください。
スマホメニューの色
スマホメニューとは、ボタンで開閉される以下のようなメニューのことです。
![スマホメニュー](https://swell-theme.com/wp-content/uploads/2019/04/spmenu_sc.png)
このスマホメニューに関する色については、「外観」>「カスタマイズ」>「サイト全体設定」>「スマホ開閉メニュー」から設定できます。
![](https://swell-theme.com/wp-content/uploads/2019/04/setting_spmenu_color.png)