【Cocoon】サイトの背景色を変更する方法|簡単キーカラーを変更

Cocoon

ブログをはじめて、こんなことを思ったことはありませんか?

ニック
ニック

他の方のサイトを見ると、デザインが様々で個性的だな。

自分のサイトも、背景色を変更したいな、、

今回はこのようなニーズを解決いたします。

スポンサーリンク

【Cocoon】サイトの背景色を変更する方法|超簡単

【Cocoon】サイトの背景色を変更する方法|超簡単

本記事では、Cocoonを使ったサイトの背景色を変更する方法をお伝えいたします。

CSSの変更などはなく、慣れたら1分でできます。

ブログを作り始めたばかりの方でも簡単に変更できる方法です。

背景色を変更するとサイトの印象が変わる

背景色を変更するとサイトの印象が変わる

実際に背景色を変更すると、このように印象が変わります。

BEFORE

AFTER

だいぶ印象が変わると思います。

サイトの背景色を変更しよう

さっそく、サイトの背景色を変更しましょう。

ダッシュボードから、「Cocoon設定」をクリックします。

「全体」をクリックします。

サイトキーカラー「色を選択」をクリックします。

お好みの色を選択します。

サイトカラーの選択に迷うときは

エヌさん
エヌさん

サイトカラーを選ぶのは迷っちゃうな

参考になるサイトはないかな

そんなときは、カラーサンプルサイトを参考にすることができます。

キーカラーの横にあるアイコンにカーソルをのせます。

お好みのサイトのリンクをクリックします。

例えば「配色の見本帳」をクリックすると、下記のような色見本が表示されます。

お好きな色をクリックします。

「HTML COLOR(HEX)」(#を含めた7桁)をコピーします。

エヌさん
エヌさん

HTML COLOR(HEX)って何ですか?

ニック
ニック

コンピュータが色を認識するためのコードだよ。

最初の2桁が赤、次が緑、最後の2桁が青をあらわしているんだ。

サイトキーカラーコピーしたコード(HTML COLOR)を貼り付けます。

「変更をまとめて保存」をクリックします。

これで、サイトの背景色が変更できました。

背景色の変更を確認しよう

背景色の変更が完了したら、背景色が変更されていることを確認しましょう。

自分のサイトにアクセスします。

サイト上部

サイト下部

サイトキーカラーを変更すると

・サイトの背景色(ヘッダー・フッター)

・アイキャッチ画像のカテゴリ表示

・ブログ記事の見出しの色

など、サイトのポイントとなる部分の背景色が変わりました。

エヌさん
エヌさん

サイト全体から受けるイメージがだいぶ変わるね!

まとめ:背景色を変更すると、簡単にサイトの印象が変わる

背景色を変更してみると、受ける印象が変わると思います。

自分らしいサイトを作るため、サイトのブランドイメージを作るためにも、背景色の設定は重要ですね。

最後にこの記事のおさらいをします。

  • 背景色を変更すると、サイト全体の印象が変わる
  • サイトの背景色を変更は、「Cocoon設定」-「全体」-「サイトキーカラー」から設定する
  • 自分らしいキーカラーを設定しよう
エヌさん
エヌさん

つぎは、サイトに表示されるフォントも変えてみたいね!

ニック
ニック

サイトのデザインはおもしろいね。

僕はデフォルトの色も好きだな、、

コメント

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