11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

[Cocoon] 背景色の設定とカラーコードを選べるサイトリンク

キレイな色!
いくみ
いくみ

色だけ変える場合、「画像のサイズ」が関係ないのでホントに楽ちんです!

「背景色」の設定は、主に以下の3か所に対してできます。

  • ヘッダー部分
  • グローバルメニュー部分
  • サイト背景部分

図にするとこうなります。

色を設定するとき、まずは以下のようなサイトで自分が好きな色の「カラーコード」をコピペしておくのがおススメです。

色見本と配色サイト - color-sample.com
More than 16 million colors

こちらのサイトも使いやすいです。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

いずれにしても、好きな色を選んだら、「カラーコード」をコピーします。カラーコードは以下の赤枠の中にあるような文字列です。数字が入っていないときもあります。

以下は2つめのサイトにある、「和色大辞典」タブからの画像です。各色の名前の下にコードがありますね。(一段目にしか赤線ひいてないですけど、全色にカラーコードが示されています。)

いくみ
いくみ

キレイな色を見るだけでも癒されますが、「色の名前」にもうっとりです。
ポエム!

いくみ
いくみ

まずは、一番範囲が広い、「サイト背景色」の設定場所からご紹介します!

サイト背景色を設定する場所:

1.[Cocoon設定]をクリック。

2.[全体]タブをクリック。

3.少しスクロールすると、[サイト背景色]というセクションがあります。

  [色を選択]をクリック。

4.お好みの色を選びます。[色を選択]のとなりにあるボックスに「カラーコード」をコピーする方法が一番簡単だと思います。もちろん、1番下の色パレットから選んだり、グラデーションになっている画像をクリックして気に入る色を探すこともできます。やり直したいときは、[クリア]をクリックです。

変な色を選んでしまっても、[クリア]をクリックして、[変更を保存]ボタンを押せば、またデフォルトの色に戻れます。

5.[変更を保存]をクリック。

ヘッダー部分とグローバルメニューの背景色を設定する場所

1.[Cocoon設定]をクリック。

2.[ヘッダー]タブをクリック。

3.少しスクロールすると、背景色のオプションが3つあります。

[ヘッダー全体色] ヘッダーとグローバルメニューを同じ色にするときに、一気に設定できます

[ヘッダー色] ヘッダー部分の色を設定できます。

[グローバルメニュー色] グローバルメニューの色を設定できます。

各「文字色」も変えられますね!

[色を選択]をクリックした後の手順は、「サイト背景」で書いた部分と同じです。

いくみ
いくみ

カラーコードについてのアドバイスは、ビックリマークをクリックしてみたら出てきました。Cocoonの画面にあるビックリマークや注意書きは勉強になることが多いです!

いくみ
いくみ

「色」だけではなく、「画像」や「スキン」を使ってサイトの見た目を変える方法も記事にしています。

「ヘッダー」についてがこちら。

「サイト背景全体」についてがこちらです。

「スキン」を使う方法がこちら。

アイキャッチ画像は

Marty-artsによるPixabayからの画像

コメント

タイトルとURLをコピーしました