WordPressテーマ「Cocoon」デザインを設定だけで変更!【超初心者向け】

「Cocoon」の色変更

[temp id=2]

先日、以下のような記事を書きました。

無料WordPressテーマ「Cocoon(コクーン)」に変更!ざっくりレビュー!

3月19日に「寝ログ」のわいひらさんより発表された新WordPressテーマ「Cocoon」について書いた記事ですが、あれから色々と触ってみて本当に素晴らしいテーマだと感じています。

特に「あったらいいな」と感じる機能が詰まっている「Cocoon設定」が本当に便利で、無料なのが信じられないくらいのテーマです。

テーマを変更して数日経ちましたが、当ブログのデザインが固まってきたので備忘録もかねて記事にしてみようと思います。

内容としては、初心者でも他のCocoonユーザーとデザインを差別化したいと思っている方向けにデザインを変更する方法を書いていきます。

cssも全くいじることなく変更しているので、初心者にとっても今すぐにでも取り組める内容だと思います。

サイト全体の色を変えてみよう

まずはサイトの色を変えてみましょう。

今ご覧いただいている当ブログの見た目はこんな感じです。

PC

cocoon-design②

*広告は少しぼかしています。

スマホ

cocoon-design④

テーマ名「Cocoon」の意味は「繭」なので、白を基調にして全体的にシンプルな見た目を意識しました。

一時期ヘッダーの色を紺色っぽくしてましたけど、やっぱり白が一番「Cocoon」に似合います。

この記事では簡単に紹介していきますが、もっと詳しく知りたいという方はCocoonの公式ページを読んでもらえたらと思います。

https://wp-cocoon.com/key-color/

さて、それでは色を変える方法を紹介していきます。

「Cocoon設定」の「全体」を選びましょう。

cocoon-design④

するとこのように「プレビュー」と書かれた画面になっているはずです。

cocoon-design⑤

この画面を少しスクロールすつと、以下のような画面になります。

赤い枠で囲っている部分を変えるだけでも随分と印象が変わるのでやってみましょう。

cocoon-design③

  • サイトキーカラー:ヘッダー背景色や見出しの色が変わる
  • サイトキーテキストカラー:見出しやサイドバーの文字の色が変わる
  • サイトフォント:サイト全体のフォントが変わる
  • フォントサイズ:サイト全体のフォントのサイズが変わる

どう変えるかは本当に好みによるので何とも言えませんが、好みのブログの配色を真似てみるのも面白いかもしれません。

デフォルトだと数種類の色しかありませんが、下の画像のようにコードさえ分かれば色は好みのものに変更することができます。

cocoon-design⑥

色のコードを調べる時に便利なのがChromeの拡張機能「ColorPick Eyedropper」です。
カーソルを合わせればその場所の色が分かる優れものです。

こんな感じ↓

cocoon-design⑦

配色に関してはサルワカくんの色見本が参考になるので読んでおくといいかもしれません。
参考>>>配色パターン見本40選

見ているだけでも楽しくなるので参考にしなくてもとりあえず見にいってみて下さい。

フォントに関してはこだわりがなければデフォルトでも構わないかもしれませんが、フォントが変わると文章の印象まで違ってみえるので一度変えてみるのも面白いかもしれません。

ヘッダーのロゴや背景色を変えてみよう

ヘッダーにオリジナルのロゴを設定するとより個性的になるかもしれません。

cocoon-design⑫

cocoon-design⑬

ヘッダー部分にロゴを設定したり、キャッチフレーズの配置を変更することができます。
ぼくの場合ここは全くいじっていません。

cocoon-design⑭

背景画像や全体色、ロゴの部分の色を変更することもできます。
ぼくの場合だと先ほど紹介したサイト全体の色の変更の際にヘッダーの背景色までキーカラー(グレーっぽい色)と同じになっていたので背景色を白に変更にしています。

ここは正直その人のこだわりになるので変えても変えなくてもいいかもしれません。
ぼくはどうしてもヘッダーの背景色は白にしたかったので変えました(笑)

SNSシェアボタンを変えてみよう

サイト全体の色を変えると次はSNSのシェアボタンの色を変えたくなってきますよね?
というわけで変えていきましょう。

「Cocoon設定」の「SNSシェア」を選択します。

cocoon-design⑧

今ぼくが使用しているものがプレビューのところに出てきていますね。
下にスクロールしていきます。

本文上のシェアボタンから変更していきましょう。

cocoon-design⑨

ぼくの場合だとこんな感じです。
表示されるシェアボタンを1つ減らして、ボタンの色を「ブランドカラー」から「モノクロ」に変更しただけです。

さらにスクロールすると、以下も変更可能です。

cocoon-design⑩

ぼくはこの2つはデフォルトのままですが「シェア数の表示」とかは他のテーマでも反映している人が多いですかね。

coconn-design⑪
本文上のシェアボタンの変更ができたら、同じ要領で本文下のシェアボタンも変更しましょう。

AMPページでは反映されないようなので、AMP対応にしている方は注意してください。

通知の色を変更しよう

ここまで変更したら通知の色まで変更したくなってしまうのはぼくだけでしょうか。
これまでと同様「Cocoon設定」から「通知」を選択。

cocoon-design⑮

ぼくは今グレーの背景に黒文字にしています。

cocoon-design⑯

デフォルトだと8色ですが、「色を選択」から自由に色を変えることができます。

初心者でも色を変えてみて個性を出そう

cocoon色

色を変えたからといって、デザインをおしゃれにしたからといって直接的な原因として検索順位が上がるわけではないですが、読む人の感じ方は変わります。

初心者でもヘッダーの画像を変えたり、色を変えて個性を出していいじゃないですか!

今回紹介したように「Cocoon」は初心者でも簡単にデザインを変えることができる素晴らしいテーマです。ぼく自身も全然知識もセンスもないですが、このくらいなら簡単にできましたよ。

難しく感じずに、あなたの「色」出していきましょう。

記事の内容は以上です。
最後まで読んでいただいてありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください