【選ぶだけ!】Cocoonスキンでオシャレにサイトカスタマイズ スキン配色☆初級編

Cocoonスキン配色
この記事は約5分で読めます。

ワードプレスの無料テーマで検索すると、必ずと言っていいほどオススメされる高性能&カスタマイズ性の高い優良テーマの “Cocoon”。

その Cocoon なら、初心者さんでも簡単に、自分のサイトを自分好みのカラーで、オシャレにサイトカスタマイズ出来ちゃいます!

今回は、スキン配色☆初級編。

サイトデザインのベースとなるスキンを選んだら、それぞれのパーツに好みの色を選んでいきましょう。

だけど「好きな色を選んで」と言われても、無数にある “ 色 ” の中から選んでいくのは、なかなか難しいもの。

でも今回は、オシャレにサイトカスタマイズ スキン配色☆初級編。

選ぶ色は1色だけ。

それだけでも充分に、オリジナルのサイトに仕上がります。

それでは、初心者さんでも簡単! 選ぶだけで自分好みのオリジナルサイトに仕上げる「スキン配色☆初級編 スキン+1カラー」を紹介していきます。

 

 

 

1.選んだスキンの特性を知ろう

まずは、選んだスキンの特性を知ることが大事。

ここで言う特性とは、“ どのパーツの色が変えられるのか ” ということ。

スキンによって、色が変えられないパーツが異なります。

それを知るために、確認のための色を変更してみましょう。

 

➊.「全体」のカラーを変更

今から行う色変更は、確認作業のための色変更なので、色は何色でも大丈夫です。

今回は、分かりやすいように下記のパーツを 黄色と赤 に変更します。

Cocoon設定」の「全体」の中
(1)サイトキーカラー → 黄色
(2)サイトキーテキストカラー → 赤
(3)文字色 → 赤
(4)背景色 → 黄色

番号順にクリックして、色を変更していきましょう。

「クリック④」以降も、下にスクロールして「背景色」まで変更してください。

 

➋.「ヘッダー」のカラーを変更

「全体」の変更が終わったら「ヘッダー」の項目をクリックして、「全体」と同様の手順で下記のように変更しましょう。

Cocoon設定」の「ヘッダー」の中
(5)ヘッダー全体背景色 → 黄色
(6)ヘッダー全体文字色 → 赤
(7)グローバルナビ色 → 赤
(8)グローバルナビ文字色 → 黄色

変更し終わったら「変更をまとめて保存」をクリックします。

 

➌.変更後のプレビューの確認

スキン」または「全体」の項目をクリックして、変更後のプレビューを確認します。

今回のスキンは「Simple Blue」を使用しました。

選んだ通りに反映されていれば、黄色と赤の配色になるはずですが、ヘッダー全体背景色が青のままです。

ということは、このスキンの場合はヘッダー全体背景色は変えられないということです。

「CSSにコードを追加貼り付け」などの変更を加えればカラー変更も可能です。
でも、この「選ぶだけ!」シリーズでは、そのような難しいことはやりません。

このようにスキンの設定が優先されるパーツがあるので、まずはそのパーツを確認しましょう。

 

 

2.スキンに1つカラーを加えよう

スキンの設定が優先されるパーツと、その色が分かったら、それに合うカラーを選んでいきます。

その前に、さっき変更した黄色と赤のカラーのところを「クリア」をクリックして変更前の状態に戻しておきましょう。(全部で8ヵ所)

今回のスキンは「Simple Blue」で、水色をベースとしたスキンとなっています。

この水色に合いそうなカラーを1色選んで、パーツの色を変更していきます。

このスキンの場合は、ヘッダー全体背景色は変えられないので、それ以外の下記のパーツを変更します。

・サイトキーカラー
・サイトキーテキストカラー
・文字色
・背景色
・ヘッダー全体文字色
・グローバルナビ色
・グローバルナビ文字色

 

今回のように1色だけカラーを加える場合には、全部を変更するよりもスキンの設定カラーを生かしながら部分的に変更を加えた方がまとまりやすいです。

 

➊.色の選び方・探し方

「1.選んだスキンの特性を知ろう」で行った、カラー変更と同じ手順で色を選ぶことが出来ます。

この方法でも色を探せないことはないのですが、この方法で自分の求めている色を見つけるのは至難の業です。

ここに無い色もたくさんありますしね。

そこでおすすめなのが、

すでに色が組み合わされている配色パターンを参考にする

という方法です。

Color Hunt – Color Palettes for Designers and Artists

こちらのサイトでは、すでに色が組み合わされた配色パターンが紹介されているので、1色を選ぶにしてもイメージがつかみやすいと思います。

 

 

➋.変更例 ビフォアー&アフター

参考までに「スキン+1カラー」の変更例がこちらです。

Before

スキン Simple Blue 変更無し

After その1

【 変更パーツ 】
・グローバルナビ色

After その2


【 変更パーツ 】
・サイトキーカラー
・グローバルナビ色
・文字色

 

After その3


【 変更パーツ 】
・背景
・グローバルナビ文字色
(グローバルナビ色は白にしました。)

スキンに1色プラスしただけでも、選ぶカラーと変更するパーツによって、こんなにサイトのイメージを変えることが出来ちゃいます。

スキン配色☆初級編 の今回は、お好きな色を1色選ぶだけ!

ポイントカラーとしてスキンの一部に1色プラスする感じなので、『色使いって難しい』とか『配色が苦手だな』と思っている方でも、わりと取り入れやすいと思います。

ぜひ、ポイントカラーがキラリと光るオリジナルサイトを作る際の参考にしてみてくださいね☆

 

 

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