[temp id=2]
先日、以下のような記事を書きました。
３月１９日に「寝ログ」のわいひらさんより発表された新WordPressテーマ「Cocoon」について書いた記事ですが、あれから色々と触ってみて本当に素晴らしいテーマだと感じています。
特に「あったらいいな」と感じる機能が詰まっている「Cocoon設定」が本当に便利で、無料なのが信じられないくらいのテーマです。
テーマを変更して数日経ちましたが、当ブログのデザインが固まってきたので備忘録もかねて記事にしてみようと思います。
内容としては、初心者でも他のCocoonユーザーとデザインを差別化したいと思っている方向けにデザインを変更する方法を書いていきます。
cssも全くいじることなく変更しているので、初心者にとっても今すぐにでも取り組める内容だと思います。
サイト全体の色を変えてみよう
まずはサイトの色を変えてみましょう。
今ご覧いただいている当ブログの見た目はこんな感じです。
PC
＊広告は少しぼかしています。
スマホ
テーマ名「Cocoon」の意味は「繭」なので、白を基調にして全体的にシンプルな見た目を意識しました。
一時期ヘッダーの色を紺色っぽくしてましたけど、やっぱり白が一番「Cocoon」に似合います。
この記事では簡単に紹介していきますが、もっと詳しく知りたいという方はCocoonの公式ページを読んでもらえたらと思います。
https://wp-cocoon.com/key-color/
さて、それでは色を変える方法を紹介していきます。
「Cocoon設定」の「全体」を選びましょう。
するとこのように「プレビュー」と書かれた画面になっているはずです。
この画面を少しスクロールすつと、以下のような画面になります。
赤い枠で囲っている部分を変えるだけでも随分と印象が変わるのでやってみましょう。
- サイトキーカラー：ヘッダー背景色や見出しの色が変わる
- サイトキーテキストカラー：見出しやサイドバーの文字の色が変わる
- サイトフォント：サイト全体のフォントが変わる
- フォントサイズ：サイト全体のフォントのサイズが変わる
どう変えるかは本当に好みによるので何とも言えませんが、好みのブログの配色を真似てみるのも面白いかもしれません。
デフォルトだと数種類の色しかありませんが、下の画像のようにコードさえ分かれば色は好みのものに変更することができます。
色のコードを調べる時に便利なのがChromeの拡張機能「ColorPick Eyedropper」です。
カーソルを合わせればその場所の色が分かる優れものです。
こんな感じ↓
配色に関してはサルワカくんの色見本が参考になるので読んでおくといいかもしれません。
参考＞＞＞配色パターン見本４０選
見ているだけでも楽しくなるので参考にしなくてもとりあえず見にいってみて下さい。
フォントに関してはこだわりがなければデフォルトでも構わないかもしれませんが、フォントが変わると文章の印象まで違ってみえるので一度変えてみるのも面白いかもしれません。
ヘッダーのロゴや背景色を変えてみよう
ヘッダーにオリジナルのロゴを設定するとより個性的になるかもしれません。
ヘッダー部分にロゴを設定したり、キャッチフレーズの配置を変更することができます。
ぼくの場合ここは全くいじっていません。
背景画像や全体色、ロゴの部分の色を変更することもできます。
ぼくの場合だと先ほど紹介したサイト全体の色の変更の際にヘッダーの背景色までキーカラー（グレーっぽい色）と同じになっていたので背景色を白に変更にしています。
ここは正直その人のこだわりになるので変えても変えなくてもいいかもしれません。
ぼくはどうしてもヘッダーの背景色は白にしたかったので変えました（笑）
SNSシェアボタンを変えてみよう
サイト全体の色を変えると次はSNSのシェアボタンの色を変えたくなってきますよね？
というわけで変えていきましょう。
「Cocoon設定」の「SNSシェア」を選択します。
今ぼくが使用しているものがプレビューのところに出てきていますね。
下にスクロールしていきます。
本文上のシェアボタンから変更していきましょう。
ぼくの場合だとこんな感じです。
表示されるシェアボタンを１つ減らして、ボタンの色を「ブランドカラー」から「モノクロ」に変更しただけです。
さらにスクロールすると、以下も変更可能です。
ぼくはこの２つはデフォルトのままですが「シェア数の表示」とかは他のテーマでも反映している人が多いですかね。
本文上のシェアボタンの変更ができたら、同じ要領で本文下のシェアボタンも変更しましょう。
通知の色を変更しよう
ここまで変更したら通知の色まで変更したくなってしまうのはぼくだけでしょうか。
これまでと同様「Cocoon設定」から「通知」を選択。
ぼくは今グレーの背景に黒文字にしています。
デフォルトだと８色ですが、「色を選択」から自由に色を変えることができます。
初心者でも色を変えてみて個性を出そう
色を変えたからといって、デザインをおしゃれにしたからといって直接的な原因として検索順位が上がるわけではないですが、読む人の感じ方は変わります。
初心者でもヘッダーの画像を変えたり、色を変えて個性を出していいじゃないですか！
今回紹介したように「Cocoon」は初心者でも簡単にデザインを変えることができる素晴らしいテーマです。ぼく自身も全然知識もセンスもないですが、このくらいなら簡単にできましたよ。
難しく感じずに、あなたの「色」出していきましょう。
記事の内容は以上です。
最後まで読んでいただいてありがとうございました！
