サイトで使用する色を設定する

サイトで使用する色、具体的には文字色やボタンの色などを指します。
自由に決めることができますが、自社のコーポレートカラーを基本に考えると統一感が出て洗練されたイメージになります。
サイトの内容(コンテンツ)がある程度揃ってから、改めて調整しても良いでしょう。

色の解説

図1:デザインエディタで「色」設定の画面を開いた
図1:デザインエディタで「色」設定の画面を開いた

テーマカラー
サイト全体の印象を決める色です。具体的に使われる場所は、見出し、フッターの電話番号、各ページにおけるヘッダーなど多岐にわたります。

文字色
サイト上で使われるテキストの色です。

リンク文字色
地の文にリンクを設定した場合に使われる色です。
メニューやカテゴリーには該当しません。

フッター背景色
全ページで共通に表示されるページ下部の部分(フッター)の背景に使われる色です。

フッター文字色
フッター上の文字に使われる色です。

ボタン背景色
サイト内で使われるボタンの色として使われます。
例えば、サイトのトップページ右上にある「お問い合わせ」ボタンで使われています。

ボタン文字色
サイト内で使われるボタン上の文字に使われる色です。

設定手順

①管理画面の左側のメニュー「サイト設定」から設定していきます。

「サイト設定」にカーソルを合わせると、いくつかのメニューが表示されるので「デザインエディタ」をクリックします。

図2:「サイト設定」から「デザインエディタ」を開く

②デザインエディタの画面が新しく開きました。

左側のメニューから「」をクリックします。サイト上の色の設定はここから設定します。

図3:「色」をクリック
図3:「色」をクリック

③各色を決める画面が開きます。

設定したい色の「色を選択」ボタンをクリックします。

図4:各色の設定画面
図4:各色の設定画面

④カラーパレットが開くので、使用したい色を選びます。

左側のパレット:色調を設定
右側のバー:彩度を設定

コーポレートカラーでカラーコードが決まっている場合は「色を選択」ボタンの隣の入力欄を利用しましょう。

画面右側のプレビューでどの色が変わったかわからないときは、プレビューの中でメニューをいくつかクリックするなど別のページを見てみることをおすすめします。

図5:文字色を変更してみた
図5:文字色を変更してみた

⑤色が決まったら、再度「色を選択」ボタンをクリックします。これで色が仮決定されます。

実際のサイトに反映するには、画面上部の「公開」ボタンをクリックします。

図6:再度「色を選択」で仮決定
図6:再度「色を選択」で仮決定