\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

cocoonカスタマイズの際に使える!HTMLカラーコード32スキン61カラーをまとめてみた

Cocoon いつもの カラーコード ブログデザイン
Cocoon いつものシリーズ カラーコード
この記事は約7分で読めます。

この記事では、WordPressテーマcocoonのスキンで使われているHTMLカラーコード32スキン61カラーをご紹介いたします。

ベテランさんのブログを見て、自分のブログも色々カスタマイズしていくうちに、テーマのスキンで使われているカラーと揃えたくなってきますよね。

しかしCocoonの公式ページを見てもどこに載っているかわからない

そんな方のために、今回は32スキン61カラーを徹底調査しました。

文字色や背景色も紹介しておりますので、ぜひカスタマイズにお役立てください。

スポンサーリンク

そもそも #20b2aa ←こういうのって何て言うの?

これはHTMLカラーコードと言います。

#の後ろの数字は、16進数(0~9+A~F)6桁の英数字で色を表したものになっています。

ブログを書く上でこの概念を知る必要は特にないので、HTMLカラーコードという名前だけ覚えておいてください。

cocoonカスタマイズに役立つ各スキンのHTMLカラーコード集

cocoonには合計45種のスキンがありますが、今回は比較的よく使用されている32種類のスキンについてご紹介いたします。

もし他にも紹介してほしいスキンがありましたら、私のTwitterや質問箱に入れていただけたら幸いです。

【豆知識】Webサイトに使われている色を調べる方法

おそらく気になると思いましたので、どうやってカラーコードを抽出したの? について、その方法を動画にしました。

Cocoon以外の色でもWebサイトで使われている色を調べたい時があると思いますので、ぜひスキルを盗んで帰ってください。

Bizarre-food(変な食べ物)スキン5種

Cocoon変な食べ物スキンカラーコード
Cocoon変な食べ物スキンカラーコード
緑の蕎麦#20b2aa
青いカレー #87cefa
ピンクワイン #ffb6c1
白いラーメン #f5f5f5
黒いハンバーガー#292929

参考URL https://takasaki.work/cocoon_skin/

Seasonスキン4種

Cocoon Seasonカラーコード
Cocoon Seasonカラーコード
Spring#89c997, #f19ec2, #cee8d3
Summer#00a0e9, #f6ff00, #99d9f6
Autumn#9b7b6c, #f39800, #d7cac4
Winter#88abda, #84ccc9, #b8cde9

参考URL https://ponhiro.com/cocoon-skin-season/

COLORSスキン6種

Cocoon COLORSカラーコード
Cocoon COLORSカラーコード
レッド#d3381c
ブルー#0095d9
イエロー#f8b500
グリーン#007b43
ピンク#e95925
ブラック#393f4c

参考URL https://wp-cocoon.com/skin-colors/

Like Simplicityスキン

Like Simplicityスキンは一色です:#f7f7f7

Cocoon Simplicityカラーコード
Cocoon Simplicityカラーコード

参考URL https://wp-cocoon.com/skin-simplicity/

Fuwari和色4種

 公式ページで出ているのは次の4つなのですが、 カスタマイズすることを考えると、背景の色とかちょっとしたポイントの色も必要なので、ついでに抽出しました。

Cocoon Fuwari和色カラーコード
Cocoon Fuwari和色カラーコード

こちらが、追加で抽出したものです↓

Cocoon_Fuwari和色_カラーコード2
Cocoon Fuwari和色カラーコード
海老茶(えびちゃ)#773c30, #d0968a, #f4e7e5
海松茶(みるちゃ)#5a544b, #a8a196, #edecea
褐色(かちいろ)#4d4c61, #9998ae, #eeeef1
御召茶(おめしちゃ)#43676b, #9ebfc2, #f4f5f7

参考URL https://wp-cocoon.com/skin-fuwari/

Hygiene

Cocoon Hygieneカラーコード
Cocoon Hygieneカラーコード
12時のところ(一番濃い色)#514692
2時のところ(薄むらさき)#a9a2e7
5時のところ(淡むらさき)#f2f0ff
7時のところ(薄ピンク)#ffcdf0
10時のところ(青っぽいピンク)#fa5acf

参考URL https://wp-cocoon.com/hygiene/

おでかけシリーズ3種

文字色が各スキン共通のようです。

Cocoon おでかけカラーコード
Cocoon おでかけカラーコード
おでかけピンク#ff6a6a, #f1edd0, #fffdf6
おでかけブルー#3f63f4, #c6e5d9, #e8f3f8
おでかけレモン#f1a800, #94b21c, #faeebe
共通文字色#2a363b

参考URL https://wp-cocoon.com/odekake/

いつものシリーズ3種

Cocoon いつものカラーコード
Cocoon いつものカラーコード
いつもの深海#1b4172, #feb500, #f4f5f7
おでかけブルー#eb7388, #c2dedc, #f2e7c7
おでかけレモン#594321, #1b4172, #95e5e7

参考URL https://wp-cocoon.com/itsumono-skin/

【最後に】Cocoonカスタマイズブログを書いている私が一つ後悔していること

当ブログはCocoonカスタマイズの記事がメインです。

なぜこのジャンルにしたかと言いますと、「初めてカスタマイズできた時に楽しかったから!」なのですが、実はここに関して3つ後悔していることがあります。

  1. カスタマイズ沼にハマってしまった
  2. 散々カスタマイズしたが、収益が上がりはじめ有料を買いたくなってきた
  3. 一度カスタマイズしたCSSの上から有料テーマを入れると表示崩れを起こす

特に一番困っているのが、散々カスタマイズしまくったところに有料テーマを入れると表示崩れを起こすことです。

重い表示崩れだと、文字がぐちゃぐちゃに表示されてしまう、モバイル表示時のメニューバーがおかしな位置にある、といったWordPressシロウトなのに難しい問題に直面してしまうはめに。

それにリソースを割くくらいなら記事執筆に時間をかけるべきです。

なのでお試しで無料テーマを使うのはOKですが、今後細く長くブログをやり続けていくなら絶対に有料テーマをおすすめします。

有料テーマの購入を迷う方へ「トップブロガーはみんな外観より執筆に専念」

有料テーマを買うか迷う時に、トップブロガーの方々がブログ初心者だった頃はどうしていたのか、というのが気になります。

そこでトップブロガーのマクリンさん、ヒトデさんのつぶやきをちらりと載せておきましょう。

↑でおっしゃられているように、見た目も大事ですが、ややり一番は記事執筆です。

また、トップブロガーのクロネコさんはCocoonを使っているけれどもカスタマイズしていない、とのこと。

クロネコさんの言う通り、ブログを継続し続けるための「愛着」は大事な要素です。

愛着を感じれないブログだとログインすらしなくなってしまうので。(だから私はカスタマイズしまくったのですが)

一日一記事を続けていく中で、ブログのカスタマイズに時間を取られるのはもったいないので、本腰を入れてブログをやっていこうと考えている方は一度有料テーマを覗いてみて下さい。

タイトルとURLをコピーしました