悩んでいる男性SWELLのカラーを変更したいんだけど、カラー設定について教えて
今回はカラー設定について説明しています。画像付きで詳しく説明しています。
- サイト全体のカラー設定
- ブロックのカラー設定
- 装飾のカラー設定
カラー設定は、サイトの印象を大きく変える、意外に重要な設定です。
まずは自分のサイトでどんなカラーを使うのか決めておきましょう。
なお、配色で複数の色を使うと見にくいサイトになります。
基本カラーを決めてなるべく少ない種類の色で統合すると、シンプルで洗練されたイメージになります。
SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。
画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。
この機能を使って、変更を確認しながら基本設定を進めましょう。
「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。
SWELLをまだ導入していない方は以下の記事が参考になります。
サイト全体のカラー設定
「外観」＞「カスタマイズ」＞「サイト全体設定」＞「カラー設定」に進みます。
メインカラー・テキストカラー・リンクの色・背景色を設定します。
メインカラーは以下のように見出しやリスト、ボタンなどサイト全体で使用される色です。
サイトの基本カラーになるので、この色は自分のブログにあった色を設定するようにしましょう。
ヘッダーのカラー設定
「外観」＞「カスタマイズ」＞「ヘッダー」に進みます。
ヘッダー背景色・ヘッダー文字色を設定します。
フッター・ウィジェットのカラー設定
「外観」＞「カスタマイズ」＞「フッター」に進みます。
フッター背景色・フッター文字色・ウィジェットエリアの背景色・ウィジェットエリアの文字色を設定します。
スマホメニューのカラー設定
スマホメニューは「ハンバーガーメニュー」と呼ばれる開閉式のメニューのことです。
「外観」＞「カスタマイズ」＞「サイト全体設定」＞「スマホ開閉メニュー」に進みます。
文字色・背景色・背景の不透明度・メニュー展開時のオーバーレイカラー・メニュー展開時のオーバーレイカラーの不透明度を設定します。
メニュー展開時のオーバーレイカラーとはメニューと背景の間の色のことです。
下記写真で緑にしてある箇所です。
ブロックエディターの「カラーパレット」のカラー設定
カラーパレットは文字色・背景色を変更する時に使用します。
1列目の5色
- メインカラー
- 薄いメインカラー
- グレー
- 白
- 黒
は固定されているので、残りの8色を好きな色に変更できます。
「SWELL設定」＞「エディター設定」内の「カラーセット」から設定できます。
装飾機能（ボタン・マーカー・吹き出しなど）のカラー設定
「SWELL設定」＞「エディター設定」内のカラーを変更したいタブに進みます。
各種装飾のレビューを確認しながら変更できます。
以上で基本カラーの設定は終わりです。