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

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

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

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

カラーコードをチェックするのに便利なサイトのリンクと、それぞれの色設定手順をまとめています。

カラーコードの参照リンク

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

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

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

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

色の組み合わせ

以下２つのサイトもおススメです。色の組み合わせが見られて便利です。

サイトから好きな色を選ぶ

私は最近、画像編集サイトのCanvaで好きな色を見つけて、グーグルのカラーピックアイドロッパーでそのカラーコードを取得する、という方法も好きです。

このツールは、Canvaでなくとも、Chromeで表示させているサイトで使われている色のカラーコードを取得できる優れものでおススメです！使い方は以下でまとめています。

サイト背景色の設定

１．[Cocoon設定]をクリック。

２．[全体]タブをクリック。

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

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

４．お好みの色を選びます。[色を選択]のとなりにあるボックスに「カラーコード」をコピーする方法が一番簡単だと思います。

もちろん、1番下の色パレットから選んだり、グラデーションになっている画像をクリックして気に入る色を探すこともできます。やり直したいときは、[クリア]をクリックです。

５．[変更を保存]をクリック。

ヘッダーとグローバルメニュー

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

１．[Cocoon設定]をクリック。

２．[ヘッダー]タブをクリック。

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

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

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

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

各「文字色」も変更できるようになっていますね！

[色を選択]した後の動作・手順は、「サイト背景色」で書いた要領と同じです。

４．[変更を保存]をクリック。

サンプル画像

サイト背景色やメニュー色を変更して毎月違う見た目を楽しんでおります。今までの当ブログの見た目画像を以下のページに残しています。（該当セクションにジャンプします。）

他、以下のような記事にもチョコチョコサンプル画像があります。

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

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

サイト背景を水玉（ドット柄）にする方法もまとめております。

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