ワードプレスの無料テーマで検索すると、必ずと言っていいほどオススメされる高性能&カスタマイズ性の高い優良テーマの “Cocoon”。
その Cocoon なら、初心者さんでも簡単に、自分のサイトを自分好みのカラーで、オシャレにカスタマイズ出来ちゃいます!
サイトのテンプレートデザイン(スキン)を選んで、それぞれのパーツに好みの色を選ぶだけ。
「CSSにコードを追加貼り付け」なんて、難しそうなことは一切無し。
それでも充分に、個性あふれるオシャレなオリジナルのサイトが作れます。
もちろんこのサイトも、その方法で作られています。
Cocoonのスキンとカラーを選ぶだけ! だから初心者さんでも大丈夫!!
それでは、色に着目した「選ぶだけ!」の簡単オシャレにサイトカスタマイズを紹介していきます。
1.サイトのベースとなる「スキン」を選ぼう!
①ワードプレスを開いて、左側の「Cocoon設定」→「Cocoon設定」とたどってクリック。
②下記のようなCocoon設定の画面になるので、赤で囲んである「スキン」をクリック。
(こちらのCocoon設定で、各内容の設定が変更出来ます。)
③画面下側にスキン一覧が表示されるので、お好みのスキンを選択。
「画像アイコン」にカーソルを合わせると、それぞれのスキン例が表示されるのでイメージを確認することが出来ます。
④スキンを選んだら、「変更をまとめて保存」をクリックします。
全体的なデザインがそれぞれのスキンによって違うのはもちろんですが、意外と細かいところにもそれぞれのスキンの個性が表れています。
・目次のデザイン
・SNSなどのシェアマークのデザイン など
2.選んだ「スキン」で各パーツのカラーを変更していこう!
選んだスキンのままでも充分すてきにデザインされていますが、サイトにちょっと個性を出してみたいなら、各パーツのカラーを自分色にしてみましょう!
(スキンによっては、もともとのスキンの設定が優先されて、選んだカラーが反映されないパーツも稀にあります。)
①.全体のカラーを設定
Cocoon設定の画面で、赤で囲んである「全体」をクリック。
この「全体」の項目では、下記のカラーが設定出来ます。
・サイト全体の背景色
「変更をまとめて保存」をクリックして設定を完了すると、Cocoon設定画面のプレビューに反映されて、変更後のイメージを確認出来ます。
プレビュー画面の右下(三角マークのところ)をドラッグすると、プレビュー画面の大きさを調節することが出来ます。
②.ヘッダーのカラーを設定
Cocoon設定の画面で、赤で囲んである「ヘッダー」をクリック。
この「ヘッダー」の項目では、下記のカラーが設定出来ます。
・サイト上部の「サイト名」などが入る部分の文字の色
・グローバルナビ部分の全体の背景色
「変更をまとめて保存」をクリックして設定を完了すると、Cocoon設定画面のプレビューに反映されて、変更後のイメージを確認出来ます。
変更後のイメージは、「スキン」または「全体」の項目のプレビューで確認したほうがサイト全体のイメージがつかみやすいです。
3.「選ぶだけ!」でここまで出来ちゃう!サンプル見本
ここで紹介した「選ぶだけ!」の簡単 カスタマイズでも、こんなに個性あふれるオリジナルのサイトが作れます。
配色パターン①
配色パターン②
配色パターン③
配色パターン④
ベースとなるサイトのデザインは同じでも、色を変えるだけで、こんなにサイトのイメージを変えることが出来ちゃいます!
色のパワーってすごいんです!!
「選ぶだけ!」の簡単 サイトカスタマイズで、ぜひ個性あふれるオリジナルサイトを作ってみてくださいね☆