
SWELLのカラーを変更したいんだけど、カラー設定について教えて
今回はカラー設定について説明しています。画像付きで詳しく説明しています。
- サイト全体のカラー設定
- ブロックのカラー設定
- 装飾のカラー設定
カラー設定は、サイトの印象を大きく変える、意外に重要な設定です。
まずは自分のサイトでどんなカラーを使うのか決めておきましょう。
なお、配色で複数の色を使うと見にくいサイトになります。
基本カラーを決めてなるべく少ない種類の色で統合すると、シンプルで洗練されたイメージになります。
SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。
画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。

この機能を使って、変更を確認しながら基本設定を進めましょう。
「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。

サイト全体のカラー設定
「外観」>「カスタマイズ」>「サイト全体設定」>「カラー設定」に進みます。
メインカラー・テキストカラー・リンクの色・背景色を設定します。

メインカラーは以下のように見出しやリスト、ボタンなどサイト全体で使用される色です。

サイトの基本カラーになるので、この色は自分のブログにあった色を設定するようにしましょう。
ヘッダーのカラー設定
「外観」>「カスタマイズ」>「ヘッダー」に進みます。
ヘッダー背景色・ヘッダー文字色を設定します。

フッター・ウィジェットのカラー設定
「外観」>「カスタマイズ」>「フッター」に進みます。
フッター背景色・フッター文字色・ウィジェットエリアの背景色・ウィジェットエリアの文字色を設定します。

スマホメニューのカラー設定
スマホメニューは「ハンバーガーメニュー」と呼ばれる開閉式のメニューのことです。

「外観」>「カスタマイズ」>「サイト全体設定」>「スマホ開閉メニュー」に進みます。
文字色・背景色・背景の不透明度・メニュー展開時のオーバーレイカラー・メニュー展開時のオーバーレイカラーの不透明度を設定します。

メニュー展開時のオーバーレイカラーとはメニューと背景の間の色のことです。
下記写真で緑にしてある箇所です。

ブロックエディターの「カラーパレット」のカラー設定
カラーパレットは文字色・背景色を変更する時に使用します。

1列目の5色
- メインカラー
- 薄いメインカラー
- グレー
- 白
- 黒
は固定されているので、残りの8色を好きな色に変更できます。
「SWELL設定」>「エディター設定」内の「カラーセット」から設定できます。

装飾機能(ボタン・マーカー・吹き出しなど)のカラー設定
「SWELL設定」>「エディター設定」内のカラーを変更したいタブに進みます。
各種装飾のレビューを確認しながら変更できます。


以上で基本カラーの設定は終わりです。