MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

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

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

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

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

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

カスタマイザーの起動

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

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

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

基本的なカラーの設定は、「外観」>「カスタマイズ」>「サイト全体設定」>「カラー設定」から設定できます。

「サイト全体設定」メニュー
「サイト全体設定」
カラー設定
「サイト全体設定」>「基本カラー」

ベースカラーの設定

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

ベースカラー設定
メインカラー

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

テキストカラー

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

リンクの色

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

背景色

サイト全体に渡ってのページ背景色です。
※ ただし、コンテンツの独立設定がオンになっている場合、コンテンツ部の背景色は白色になります。

その他の場所で設定できるカラー設定

ヘッダー周りの色

ヘッダーの背景色文字色などについては「外観」>「カスタマイズ」>「ヘッダー」から設定できます。

ヘッダーのカラー設定項目
ヘッダーのカラー設定

詳しくは「ヘッダー設定の解説記事」をご覧ください。

フッター周りの色

フッターの背景色文字色などについては「外観」>「カスタマイズ」>「フッター」から設定できます。

フッターカラー設定
フッターカラー設定

こちらでフッターの背景色と文字色を設定してください。

詳しくは「フッター設定の解説記事」をご覧ください。

スマホメニューの色

スマホメニューとは、ボタンで開閉される以下のようなメニューのことです。

スマホメニュー

このスマホメニューに関する色については、「外観」>「カスタマイズ」>「サイト全体設定」>「スマホ開閉メニュー」から設定できます。

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

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

目次
閉じる