【SWELL】サイト全体の基本カラーの設定方法

今回はカラー設定について説明しています。画像付きで詳しく説明しています。

カラー設定は、サイトの印象を大きく変える、意外に重要な設定です。

まずは自分のサイトでどんなカラーを使うのか決めておきましょう。

なお、配色で複数の色を使うと見にくいサイトになります。

基本カラーを決めてなるべく少ない種類の色で統合すると、シンプルで洗練されたイメージになります。

サイト全体のカラー設定

「外観」＞「カスタマイズ」＞「サイト全体設定」＞「カラー設定」に進みます。

メインカラー・テキストカラー・リンクの色・背景色を設定します。

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

サイトの基本カラーになるので、この色は自分のブログにあった色を設定するようにしましょう。

ヘッダーのカラー設定

「外観」＞「カスタマイズ」＞「ヘッダー」に進みます。

ヘッダー背景色・ヘッダー文字色を設定します。

フッター・ウィジェットのカラー設定

「外観」＞「カスタマイズ」＞「フッター」に進みます。

フッター背景色・フッター文字色・ウィジェットエリアの背景色・ウィジェットエリアの文字色を設定します。

スマホメニューのカラー設定

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

「外観」＞「カスタマイズ」＞「サイト全体設定」＞「スマホ開閉メニュー」に進みます。

文字色・背景色・背景の不透明度・メニュー展開時のオーバーレイカラー・メニュー展開時のオーバーレイカラーの不透明度を設定します。

メニュー展開時のオーバーレイカラーとはメニューと背景の間の色のことです。

下記写真で緑にしてある箇所です。

ブロックエディターの「カラーパレット」のカラー設定

カラーパレットは文字色・背景色を変更する時に使用します。

1列目の5色

は固定されているので、残りの8色を好きな色に変更できます。

「SWELL設定」＞「エディター設定」内の「カラーセット」から設定できます。

装飾機能（ボタン・マーカー・吹き出しなど）のカラー設定

「SWELL設定」＞「エディター設定」内のカラーを変更したいタブに進みます。

各種装飾のレビューを確認しながら変更できます。

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

その他、SWELLの初期設定は以下にまとめてありますので、あわせてどうぞ。