Cocoon色設定など当サイト設定事例メモ(初心者向け)

ブログ
ブログ

当サイトの色設定はCocoonです。あれ?白いテーマがどうしてこんな茶色に?と思われた初心者の方向けに配色のカラーコードなどをメモしています。

はじめに

当サイトのWordPressテーマはCocoonを利用させて頂いています。オリジナルはファッションサイトのようにシンプルでエレガント!

CocoonというWordPressテーマは作者わいひら氏の傑作プロダクト。無料でこれだけ充実したテーマはないと皆さんおっしゃるように本当に多機能なのにシンプルでワードプレス初心者の方にもおすすめです。私などからすると天才か!と思うぐらい、様々な機能がデフォルトで備わっています。
(参考)わいひら氏の傑作テーマCocoonはコチラ

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

さて問題はCocoonというシンプルで真っ白でエレガンスなテーマがどうしてこんな茶色になってしまったか。この茶色っぽいサイトのどこがシンプルやねん!と思われる方もいるかもしれません。

アフロ子
アフロ子

(ぜんぜんCocoonのイメージと違う・・・もっさ)

そんなわけでどの辺をいじったらこうなってしまったか。あくまで素人的な気づきですが初心者がつまづいた点などをメモしておこうと思います。

■当サイトで行った配色設定など

とりあえず「土っぽいイメージ」という思いつきで茶色系(ブラウン系)で色を設定してみました。

適当にいじってたら何故かこんな色になってシマッタ(失敗カモ)という初心者に毛が生えた程度の設定事例😅

とらナイヅ 寅
とらナイヅ 寅

しまったシマッタ

ですが、もしかしたら当時の私のように「なんでもいいから具体的なカラーコードやらの事例をどっかに書いといてくれ」(後は適当に自分でアレンジすっから)という人もいるかもしれないと思い、拙サイトの配色を後悔しながら公開中しております。

寅山
寅山

色なんていじるんじゃなかったじゃねえか(後悔)

もちろん色設定なんて初期設定でよかったのに。しかもあとから素敵なスキンがたくさん出てきて尚更いじるんじゃなかったという後悔もあります(泣)。ま、まあCocoon初心者に意外とありがちな初心者あるあるのしくじり先生ということで地味にウザいカラーコード調べの設定を記しておきます。

さるナイヅ 山
さるナイヅ 山

良い子はマネしちゃなんねぞ

なお、以下の本文部分はカラーコードなどの配色設定項目のメモのみ。読み物とはいえませんがご容赦ください。

サイト配色(Cocoon 設定の色設定)

Cocoon設定の色設定は複数のタブ項目にまたがる。

  • 全体
  • ヘッダー
  • カラム
  • フッター

以下それぞれのタブ項目ごとに色設定をメモ。

全体

1.Cocoon設定全体

「全体設定 ページ全体の表示に関する設定です。」以下で次のように色設定。

キーカラー

(1)キーカラー

1)サイトキーカラー

(現在の色設定)
#ba7b58  rgb 186 123 88
(更新履歴)
#d8a373

2)サイトキーテキストカラー

(現在の色設定)
#d8a373 rgb 216 163 115

#000243 rgb 0 82 67

サイトフォント

(2)サイトフォント

文字色 サイト全体の文字色を変更します。

#ddd0b3 rgb 221 208 179

サイト背景色

(3)サイト背景色

背景色

色を選択#f7fcfe (rgv, 247, 252, 254)

備考:水色

(※コンテンツ幅を画面一杯または画像張りつけの場合はみえない)

水色予備色:#99d9ea(rgb, 153, 217, 234)※

※ロゴマーク背景色など(ただのMSペイントのデフォ色)

サイトリンク色

(4)サイトリンク色

リンク色

(現在の色)

#81d742

(更新履歴)

(デフォルト色:#2098a8)

(参考)Simplicity2の設定

リンクホバー色

マウスカーソルが乗ったときのリンク色です。(デフォルト色:#cc0033)

色を選択#0044CC

備考:マイクロソフトの検索エンジン「Bing」色「#0044CC」

サイト選択文字色

(5)サイト選択文字色

選択文字色 #ffccff rgb 255 204 255
#eeee22

サイト内のテキストを選択した際の文字色です。

(6)サイト選択背景色

選択文字背景色#008000 rgb 0 128 0
0 176 80

サイト内のテキストを選択した際の背景色です。

ヘッダー

ヘッダー全体色
ヘッダー全体背景色


色を選択

ロゴ部分やグローバルナビ全てを含めた背景色を選択します。

ヘッダー全体文字色


色を選択

ロゴ部分やグローバルナビ全てを含めたテキスト色を選択します。

ヘッダー色(ロゴ部)
ロゴエリア背景色


色を選択

グローバルナビ上のヘッダー背景色を選択します。

ロゴ文字色


色を選択

グローバルナビ上のヘッダーテキスト色を選択します。

グローバルナビメニュー色
グローバルナビ色


色を選択

グローバルナビ全体の背景色を選択します。

グローバルナビ文字色


色を選択

グローバルナビ全体のテキスト色を選択します。

(Simplicity2)

ヘッダー外側背景色

画面幅いっぱいに広がるヘッダーの背景色です。(デフォルト色:transparent)

色を選択

ヘッダー内側背景色

ヘッダー内側の背景色です。(デフォルト色:transparent)

色を選択

サイトタイトル色

サイトタイトルの文字色です。(デフォルト色:#222222)

色を選択

(現在)#4D1A06(rgv 77 26 6 )

(変更前)#6a1917

(備考)フッター色:20180504 #250d00 rgv 37 13 0

(備考2)固定ページ、投稿記事背景色:#4D1A06(77,26,6)
小紫・濃紫(こむらさき)
珈琲色(コーヒーいろ)
★これに決定!(20180504)

サイト概要色

サイトキャッチフレーズの文字色です。(デフォルト色:#777777)

色を選択#d8a373

(更新履歴)

20180603 #d8a373 rgv 216 163 115

20180504 #fce2c4 rgv 252 235 196

(変更前)#d8a373

備考:甘茶色?

モバイル時ヘッダー背景色

画面幅いっぱいに広がるモバイルヘッダーの背景色です。(デフォルト色:transparent)

色を選択

モバイルサイトタイトル色

モバイル時のサイトタイトルの文字色です。(デフォルト色:#222222)

色を選択#4D1A06

モバイルサイト概要色

モバイル時のサイトキャッチフレーズの文字色です。(デフォルト色:#777777)

色を選択#fce2c4

グローバルナビ色

グローバルナビ(メインメニュー)の背景色です。(デフォルト色:#f7f7f7)

色を選択#005243(rgv 0 82 67)

グローバルナビリンク色

グローバルナビリンクの文字色です。(デフォルト色:#111111)

色を選択#d8a373

(更新履歴)

20180603 #fafafa

(更新前)#d8a373

グローバルナビリンクホバー色

マウスカーソルが乗ったときのメニュー項目の背景色です。(デフォルト色:#dddddd)

色を選択#d8a373

(更新履歴)

20180603#d8a373

20180504#fce2c4

(変更前)#f7fcfe

メニューボタン色

モバイル用メニュー表示ボタンのアイコン色です。(デフォルト色:#333333)

色を選択#fce2c4

メニューボタン背景色

モバイル用メニュー表示ボタンの背景色です。(デフォルト色:transparent)

色を選択#d8a373

トップへ戻るボタン色

トップに戻るボタンのアイコン色です。(デフォルト色:#ffffff)

色を選択(デフォルト色:#ffffff)

トップへ戻るボタン背景色

トップに戻るボタンの背景色です。(デフォルト色:#aaaaaa)

色を選択#d8a373

フッター色

フッター部分の背景色です。(デフォルト色:#555555)

色を選択#250d00

その他

外観>プラグイン

TOC

#a0d26e

カラム

コンテンツ枠線色
ボーダー色


色を選択

メインカラムのボーダー色を設定します。未入力でデフォルトの透過色になります。

サイドバー枠線色
ボーダー色


色を選択

サイドバーのボーダー色を設定します。未入力でデフォルトの透過色になります。

フッター


フッター色
フッター背景色


色を選択

サイト下部(フッター部分)の背景色を指定します。

フッター文字色


色を選択

サイト下部(フッター部分)のテキスト色を指定します。

以上備忘用のメモでした。

(配色設定をよく忘れてしまうのでご容赦ください汗)


余談(色決めに迷ったとき)

余談ですが、色決めに迷ったときの私の体験談をメモしておきます。

色の設定作業は面倒ですが、ブログ関連の記事や本を拝見すると、色の設定のやり方などはどんな本にもよく書かれています。

ただ、個人的に気づいたのは、いきなり細かいカラーコードを選ぶよりも、コンセプト色(というかパッと思い付きのイメージ?)を決めておいたほうがぶれずに済むという点。

当サイトでもはじめは適当に、カラーコードを適当にいじって、コンセプト?など考えずに色設定をしていたので、微妙に色がころころ変わったりで落ち着きませんでした。

やっとタイトルはコーヒー色、サブタイトルは甘茶色(勝手な命名ですが、甘いミルクテーのイメージ?)と、何となくアイデアが思い浮かんだので、落ち着いてきました。

自分の場合は実際そんな感じて色決めしていきました。

ブログ初心者で実ははじめにけっこう迷ったので一応メモしておきます。

さるナイヅ 山

むしろブログ素人がおちいりがちな悪い例なのでおすすめはしません😅

あとがき

いかがだったでしょうか。

ここではサイト配色設定のうちCocoon設定画面のみで対応できる基本的な色設定について1つの事例として記しておきました。

なお、当サイトの配色設定の事例ですとCocoon設定のみでは対応できないコンテンツ(content)や本文の段落・パラグラフ(p)の背景色(background)などについては子テーマのCSSスタイルシート(style.css)で調整しています。

ただしこの辺は筆者がCocoon導入は当初は「スキン」という機能が開発段階だったためよせばいいのにムダな労力を費やしてしまった感が否めません。

よってもし本当にこれから初心者の方がCocoonで「なんとなく茶系のイメージ」のサイト配色をご検討中ならまずはCocoon「スキン」の豊富なカラーバリエーションから茶色系のスキンを選び、それをベースにこの稿でもふれたCocoon設定画面でできる配色をお試しになることをおすすめします。

(なおあくまで初心者向けしか意図してませんが万一上級者の方でワシのへんてこCSSに興味がおありの方がいれば・・・いやそんな需要はほぼないでしょうから適当にデベロッパーツールでチェックしてみていただけば幸いです。本音をいうと素人調整なのでcodeが固まらずちょこちょこ修正してるのでコード載せようにも落ち着かんのです。悪しからず。)

今回はこのへんでおひらきに。ご覧頂きありがとうございました。