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

URLをコピーする
URLをコピーしました!
悩んでいる男性

SWELLのカラーを変更したいんだけど、カラー設定について教えて

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

この記事の内容
  • サイト全体のカラー設定
  • ブロックのカラー設定
  • 装飾のカラー設定

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

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

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

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

SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。

画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。

この機能を使って、変更を確認しながら基本設定を進めましょう。

テーマカスタマイザー
テーマカスタマイザー

「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。

テーマカスタマイザーのコントロール

SWELLをまだ導入していない方は以下の記事が参考になります。

目次

サイト全体のカラー設定

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

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

4つの基本カラー設定
4つの基本カラー設定

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

メインカラーの例

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

ヘッダーのカラー設定

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

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

ヘッダーカラー設定
ヘッダーカラー設定

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

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

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

カラー設定

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

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

スマホメニュー

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

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

スマホ開閉メニュー
スマホ開閉メニュー

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

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

オーバーレイカラーの例

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

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

カラーパレット

1列目の5色

  • メインカラー
  • 薄いメインカラー
  • グレー

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

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

カラーパレット設定
カラーセット

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

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

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

エディター設定内の各種カラー設定
マーカーのカラー設定
アイコンボックスのカラー設定
アイコンボックスのカラー設定

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる