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

2019 6/07
サイト全体の基本カラーの設定方法
記事上のウィジェットエリア

SWELLでは、様々な部分で色を自由に設定することができます。

ここでは、その中でもサイトのベースとして重要になってくる各カラーの設定方法について説明していこうと思います。

目次前広告表示エリア
目次

カスタマイザーの起動

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

以下では、カスタマイザー上での操作について説明していきます。

基本的なカラーの設定は、カスタマイザー内の「カラー設定」というメニューから設定できます。

カラー設定

ベースカラーの設定

管理画面の「外観」>「カスタマイズ」>「カラー設定」と進むと、以下のような設定項目があります。

ベースカラー設定

メインカラー

見出しや各種ボタンなど、サイトで重要となる様々なポイントで利用される色です。

テキストカラー

本文中の文字など、サイト全体に適用されるテキストの色

リンクの色

記事本文中のリンクの文字色

背景色

サイト全体の背景色
コンテンツの独立設定がオンになっている場合、コンテンツ部の背景色は白色になります。)

ヘッダー周りの色

画像

「ヘッダー」および「ヘッダーバー」の背景色文字色をそれぞれ設定できます。

ヘッダーバーとは、サイトのキャッチフレーズやSNSアイコンが表示されている部分のことです。

グローバルメニューに背景色をつけたい場合は、「ヘッダー設定」から可能です。

スマホメニューの色

画像

スマホメニュー」とは、「 」をタップして展開される以下のような開閉メニューのことです。

スマホメニュー

スマホメニュー展開時に被せる色」とうのは、上記画像で暗くなっている部分のことです。

フッターの色

フッターカラー設定

フッターについても、背景色文字色を自由に設定できます。

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次