ブログをはじめて、こんなことを思ったことはありませんか？
他の方のサイトを見ると、デザインが様々で個性的だな。
自分のサイトも、背景色を変更したいな、、
今回はこのようなニーズを解決いたします。
【Cocoon】サイトの背景色を変更する方法｜超簡単
本記事では、Cocoonを使ったサイトの背景色を変更する方法をお伝えいたします。
CSSの変更などはなく、慣れたら１分でできます。
ブログを作り始めたばかりの方でも簡単に変更できる方法です。
背景色を変更するとサイトの印象が変わる
実際に背景色を変更すると、このように印象が変わります。
BEFORE
AFTER
だいぶ印象が変わると思います。
サイトの背景色を変更しよう
さっそく、サイトの背景色を変更しましょう。
ダッシュボードから、「Cocoon設定」をクリックします。
「全体」をクリックします。
サイトキーカラーの「色を選択」をクリックします。
お好みの色を選択します。
サイトカラーの選択に迷うときは
サイトカラーを選ぶのは迷っちゃうな
参考になるサイトはないかな
そんなときは、カラーサンプルサイトを参考にすることができます。
キーカラーの横にあるアイコンにカーソルをのせます。
お好みのサイトのリンクをクリックします。
例えば「配色の見本帳」をクリックすると、下記のような色見本が表示されます。
お好きな色をクリックします。
「HTML COLOR(HEX)」（#を含めた7桁）をコピーします。
HTML COLOR(HEX）って何ですか？
コンピュータが色を認識するためのコードだよ。
最初の2桁が赤、次が緑、最後の2桁が青をあらわしているんだ。
サイトキーカラーにコピーしたコード（HTML COLOR）を貼り付けます。
「変更をまとめて保存」をクリックします。
これで、サイトの背景色が変更できました。
背景色の変更を確認しよう
背景色の変更が完了したら、背景色が変更されていることを確認しましょう。
自分のサイトにアクセスします。
サイト上部
サイト下部
サイトキーカラーを変更すると
・サイトの背景色（ヘッダー・フッター）
・アイキャッチ画像のカテゴリ表示
・ブログ記事の見出しの色
など、サイトのポイントとなる部分の背景色が変わりました。
サイト全体から受けるイメージがだいぶ変わるね！
まとめ：背景色を変更すると、簡単にサイトの印象が変わる
背景色を変更してみると、受ける印象が変わると思います。
自分らしいサイトを作るため、サイトのブランドイメージを作るためにも、背景色の設定は重要ですね。
最後にこの記事のおさらいをします。
- 背景色を変更すると、サイト全体の印象が変わる
- サイトの背景色を変更は、「Cocoon設定」-「全体」-「サイトキーカラー」から設定する
- 自分らしいキーカラーを設定しよう
つぎは、サイトに表示されるフォントも変えてみたいね！
サイトのデザインはおもしろいね。
僕はデフォルトの色も好きだな、、
コメント