theme

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

「Cocoon」の色変更

[temp id=2]

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

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」は初心者でも簡単にデザインを変えることができる素晴らしいテーマです。ぼく自身も全然知識もセンスもないですが、このくらいなら簡単にできましたよ。

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

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

2023/2/27

Anker『Soundcore Liberty 4』レビュー。これでいい、これがいい。

新しいイヤホン、買いました。 最近まで Apple の初代『AirPods Pro』を使っていたわけですが接続周りで Android端末との相性がよろしくなく、色々と探していたところ価格も性能も僕にとって「ちょうど良い」製品に出会いました。 今回紹介するのは Anker の『Soundcore Liberty 4』。たくさんのガジェットブロガーや YouTuber が紹介していて気になっていたのと、僕がイヤホンに求める条件に概ね当てはまっていたので購入したという流れ。 僕がイヤホンに求める条件 おおまかに ...

ReadMore

2023/2/20

【2022年版】ゲーム配信がしたい。私が揃えた機材やツール

すこし前に「Nintendo Switch を買いました」といった記事を書きました。その後しばらくは自分が楽しむためにひとりでゲームをしていたのですが、せっかくなら配信してみたいと思うようになりました。 というわけでネットや YouTube動画を中心に必要な機材やツールを探していたわけですが、ようやく配信できる環境が整ってきたのでブログでも紹介してみようかと。 配信するために最低限揃えておきたい機材やツール まずは最低限揃えておきたい機材やツールから紹介していきます。 ゲーム機|Nintendo Swit ...

ReadMore

2022/10/8

final『E3000』レビュー。フラットな音質で、動画編集にも最適

最近ゲーム実況をするようになって少しづつ動画編集を学んでいるところ。 私がメインで使っているイヤホン『AirPods Pro』は遅延も感じないしノイズキャンセリングも優秀なのでカフェで編集をするときには役に立ってくれています。 これからもメインのイヤホンとして活躍してもらうつもりではあるのですが長時間集中して作業しているとどうしてもバッテリーの持ちが気になってしまいます。というわけで「有線のイヤホンがほしいなぁ」と探していたところお値段も性能もちょうど良いものを見つけました。 final『E3000』を買 ...

ReadMore

2022/6/3

はじめての空気伝導ワイヤレスイヤホン。『Mu6 Ring』レビュー【PR】

骨伝導とは違ったアプローチーー。 音質にこだわりがなければ『AirPods Pro』を購入しておけば後悔は少ない。ワイヤレスイヤホンを購入するうえで選択肢に迷っている人がいれば、おそらく私はこのように答えるでしょう。 とはいっても、他のイヤホンも試してみたいと思ってしまうのがガジェット好きの性かもしれない。ありがたいことにメーカーさんから「うちの製品、紹介してもらえませんか?」と提供していただいた空気伝導ワイヤレスイヤホン。 試してみるとなかなか面白い製品だと感じたので紹介してみようかと。 「骨伝導」じゃ ...

ReadMore

2022/5/19

いまさらだけど『Nintendo Switch』買いました。購入したアクセサリーや気になっているタイトルなど

いまさらだけど、Nintendo Switch を買いました。ゲーム実況を見ていて「これはやってみたい」というタイトルがあったから。 私はもともとインドアな性格上、子どもの頃は外で元気に遊ぶというより自宅や友だちの家でゲームをして遊んでいた気がするのですが、社会人になってからはそうした機会はめっきり減ってしまっていた。 そうした背景がありながらも Switch を買ってからは毎日のようにゲームをする日々。ブログを書けば罪悪感も薄れそうな気がするのでキーボードをカタカタと叩いています。 ゲーム実況に時間を溶 ...

ReadMore

  • この記事を書いた人

むぎ

アラサーのモノ大好きブロガー。 素人なりに写真を撮るのが好きで、カメラはSONYのα6300を使っています。

-theme