【選ぶだけ!】Cocoonスキンでオシャレにサイトカスタマイズ スキンの選び方&色の変え方

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

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

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

サイトのテンプレートデザイン(スキン)を選んで、それぞれのパーツに好みの色を選ぶだけ。

「CSSにコードを追加貼り付け」なんて、難しそうなことは一切無し。

それでも充分に、個性あふれるオシャレなオリジナルのサイトが作れます。

もちろんこのサイトも、その方法で作られています。

Cocoonのスキンとカラーを選ぶだけ! だから初心者さんでも大丈夫!!

それでは、色に着目した「選ぶだけ!」の簡単オシャレにサイトカスタマイズを紹介していきます。

 

1.サイトのベースとなる「スキン」を選ぼう!

①ワードプレスを開いて、左側の「Cocoon設定」→「Cocoon設定」とたどってクリック。

 

②下記のようなCocoon設定の画面になるので、赤で囲んである「スキン」をクリック。

(こちらのCocoon設定で、各内容の設定が変更出来ます。)

 

③画面下側にスキン一覧が表示されるので、お好みのスキンを選択。

画像アイコン」にカーソルを合わせると、それぞれのスキン例が表示されるのでイメージを確認することが出来ます。

 

④スキンを選んだら、「変更をまとめて保存」をクリックします。

 

全体的なデザインがそれぞれのスキンによって違うのはもちろんですが、意外と細かいところにもそれぞれのスキンの個性が表れています。

・見出しのデザイン
・目次のデザイン
・SNSなどのシェアマークのデザイン  など
それぞれのスキンの細かいデザインについては、「画像マーク」の隣の「スキン名」をクリックしてそのサイトへ行ってみると詳しく紹介されています。

 

 

2.選んだ「スキン」で各パーツのカラーを変更していこう!

選んだスキンのままでも充分すてきにデザインされていますが、サイトにちょっと個性を出してみたいなら、各パーツのカラーを自分色にしてみましょう!

(スキンによっては、もともとのスキンの設定が優先されて、選んだカラーが反映されないパーツも稀にあります。)

 

➊.全体のカラーを設定

Cocoon設定の画面で、赤で囲んである「全体」をクリック。

 

この「全体」の項目では、下記のカラーが設定出来ます。

サイトキーカラー
・サイト全体のポイントとなる部分に適用される背景色
(サイト内の「見出し」などの背景色になります。)
サイトキーテキストカラー

・サイト全体のポイントとなる部分に適用されるテキスト色
(サイト内の「見出し」の文字の色になります。)
文字色
・サイト全体の文字色
(記事の本文中の文字の色になります。)
背景色
・サイト全体の背景色

 

変更をまとめて保存」をクリックして設定を完了すると、Cocoon設定画面のプレビューに反映されて、変更後のイメージを確認出来ます。

プレビュー画面の右下(三角マークのところ)をドラッグすると、プレビュー画面の大きさを調節することが出来ます。

 

➋.ヘッダーのカラーを設定

Cocoon設定の画面で、赤で囲んである「ヘッダー」をクリック。

 

この「ヘッダー」の項目では、下記のカラーが設定出来ます。

ヘッダー全体背景色
・サイト上部の「サイト名」などが入る部分の背景色
(フッターはヘッダーと同じ色にした方が統一感が出ます。)
ヘッダー全体文字色
・サイト上部の「サイト名」などが入る部分の文字の色
グローバルナビ色
・グローバルナビ部分の全体の背景色
グローバルナビ文字色
・グローバルナビ部分の文字の色
(スキンによっては、スキンの設定色が優先されることがあります。)

 

変更をまとめて保存」をクリックして設定を完了すると、Cocoon設定画面のプレビューに反映されて、変更後のイメージを確認出来ます。

変更後のイメージは、「スキン」または「全体」の項目のプレビューで確認したほうがサイト全体のイメージがつかみやすいです。

 

 

3.「選ぶだけ!」でここまで出来ちゃう!サンプル見本

ここで紹介した「選ぶだけ!」の簡単 カスタマイズでも、こんなに個性あふれるオリジナルのサイトが作れます。

配色パターン①

配色パターン②

配色パターン③

配色パターン④

ベースとなるサイトのデザインは同じでも、色を変えるだけで、こんなにサイトのイメージを変えることが出来ちゃいます!

色のパワーってすごいんです!!

「選ぶだけ!」の簡単 サイトカスタマイズで、ぜひ個性あふれるオリジナルサイトを作ってみてくださいね☆

 

 

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