スキンの設定
Cocoonのデザインスキンは、標準で100種類以上用意されています。
設定は「Cocoon設定」の「スキン」タブから選択。
各スキンで使われているカラーコードは以下にまとめています。

子テーマにあるもの
[Child]スキンテンプレート
子テーマに入っているスタイルには何も入っていないひな形スキンです。フォルダ:skin-template
ファイル構成を見る
<構成>
- images
- empty.txt
- amp.css
- functions.php
- javascript.js
- style.css
親テーマにあるもの
NAGI
フォルダ:nagi
ファイル構成を見る
<構成>
- images
- empty.txt
- accordion.js
- amp.css
- editor-style.css
- fix-cta.php
- functions.php
- javascript.js
- nagi-css-custom.php
- nagi-customizer.php
- option.csv
- readme.txt
- style.css
メイド・イン・ヘブン
フォルダ:skin-made-in-heaven
ファイル構成を見る
<構成>
- assets
- CSS(h2,h3,h4,l,w)(admin.css,original.css)
- img(1.gif,2.gif,3.gif,camera.svg)
- js(block.js)
- lib
- function.php
- hook-cocoon.php
- hook-wp.php
- panel-color.php
- panel-eitor.php
- panel-main.php
- panel-visual.php
- tmp
- load(camera.php,cube.php,heart.php)
- css-custom.php
- css-editor.php
- js-custom.php
- list-category-columns.php
- functions.php
- style.css
grayish
フォルダ:skin-grayish-topfull
ファイル構成を見る
<構成>
- editor-style.css
- functions.php
- javascript.js
- option.csv
- skin_admin_javascript.js
- style.css
SILK(シルク)
フォルダ:silk
ファイル構成を見る
<構成>
- amp.css
- funtions.php
- gutenberg.js
- javascript.js
- option.csv
- style.css
みるらいと
フォルダ:mil-light
ファイル構成を見る
<構成>
- option.csv
- style.css
イノセンス
フォルダ:skin-innocence
ファイル構成を見る
<構成>
- images
- squ_ten2.png
- functions.php
- javascript.js
- style.css
COLORS(イエロー)
フォルダ:skin-colors-yellow
ファイル構成を見る
<構成>
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
- style.scss
その他のカラー
- COLORS(グリーン)
- COLORS(ピンク)
- COLORS(ブラック)
- COLORS(ブルー)
- COLORS(レッド)
Like Simplicity
フォルダ:skin-simplicity
ファイル構成を見る
<構成>
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
- style.scss
てがきノート(ブルーコーラル)
フォルダ:skin-tegakinote-blue-coral
ファイル構成を見る
<構成>
- editor-style.css
- functions.php
- keyframes.css
- style.css
てがきノート(グリーンオレンジ)
フォルダ:skin-tegakinote-green-orange
ファイル構成を見る
<構成>
- editor-style.css
- functions.php
- keyframes.css
- style.css
てがきノート(ピンクレモン)
フォルダ:skin-tegakinote-pink-lemon
ファイル構成を見る
<構成>
- editor-style.css
- functions.php
- keyframes.css
- style.css
てがきノート(ホワイトバナナ)
フォルダ:skin-tegakinote-white-banana
ファイル構成を見る
<構成>
- editor-style.css
- functions.php
- keyframes.css
- style.css
てがきノート(ダークスカイ)
フォルダ:skin-tegakinote-dark-sky
ファイル構成を見る
<構成>
- editor-style.css
- functions.php
- keyframes.css
- style.css
Season (Spring)
フォルダ:skin-season-spring
ファイル構成を見る
<構成>
- images
- back-dot.png
- empty.txt
- amp.css
- functions.php
- javascript.js
- style.css
その他のカラー
- Season (Summer)
- Season (Autumn)
- Season (Winter)
モダンブラック
フォルダ:skin-modernblack
ファイル構成を見る
<構成>
- option.csv
- style.css
Fuwari -御召茶(おめしちゃ)
フォルダ:skin-fuwari-omeshicha
ファイル構成を見る
<構成>
- option.csv
- style.css
その他のカラー
- Fuwari -海松茶(みるちゃ)
- Fuwari -海老茶(えびちゃ)
- Fuwari -褐色(かちいろ)
one
フォルダ:one
ファイル構成を見る
<構成>
- images
- empty.txt
- amp.css
- editor-style.css
- functions.php
- javascript.js
- style.css
- readme.txt
Simple‐Darkmode
フォルダ:simple-darkmode
ファイル構成を見る
<構成>
- images
- empty.txt
- amp.css
- functions.php
- javascript.js
- style.css
- readme.txt
Simple‐Darkmode Always(常時ダークモード)
フォルダ:simple-darkmode-always
ファイル構成を見る
<構成>
- css
- style.css
- scss
- style.scss
- .gitignore
- functions.php
- package.json
- package-lock.json
- style.css
- readme.txt
Hygiene
フォルダ:hygiene
ファイル構成を見る
<構成>
- images
- empty.txt
- javascript.js
- option.csv
- style.css
Natural(ブルー)
フォルダ:natural-blue
ファイル構成を見る
<構成>
- style.css
- style.scss
Natural(グリーン)
フォルダ:natural-green
ファイル構成を見る
<構成>
- style.css
- style.scss
Simple Blue
フォルダ:simple-blue
ファイル構成を見る
<構成>
- style.scss
- style.css
その他のカラー
- Simple Green
- Simple Navy
- Simple Pink
- Simple red
モノクロ
フォルダ:monochrome
ファイル構成を見る
<構成>
- style.css
アリス(無印)
フォルダ:maple-alice
ファイル構成を見る
<構成>
- images
- empty.txt
- Alice-ScreenShot.jpg
- .DS_Store
- amp.css
- functions.php
- javascript.js
- style.css
アリス(チェシャ猫)
フォルダ:maple-cheshire-cat
ファイル構成を見る
<構成>
- images
- empty.txt
- Cheshire-Cat Screen Shot.jpg
- .DS_Store
- amp.css
- functions.php
- javascript.js
- style.css
アリス(白ウサギ)
フォルダ:maple-white-rabbit
ファイル構成を見る
<構成>
- images
- empty.txt
- Alice-ScreenShot.jpg
- .DS_Store
- amp.css
- functions.php
- javascript.js
- style.css
アリス(ユニコーン)
フォルダ:maple-unicorn
ファイル構成を見る
<構成>
- images
- empty.txt
- Cheshire-Cat Screen Shot.jpg
- .DS_Store
- amp.css
- functions.php
- javascript.js
- style.css
アリス(ローズ)
フォルダ:maple-rose
ファイル構成を見る
<構成>
- images
- empty.txt
- Alice-ScreenShot.jpg
- .DS_Store
- amp.css
- functions.php
- javascript.js
- style.css
アリス(ビタミン)
フォルダ:maple-citrus
ファイル構成を見る
<構成>
- images
- empty.txt
- Alice-ScreenShot.jpg
- .DS_Store
- amp.css
- functions.php
- javascript.js
- style.css
カラフルライン
フォルダ:skin-colorful-line
ファイル構成を見る
<構成>
- option.csv
- style.css
ダークエンジ
フォルダ:skin-dark-enji
ファイル構成を見る
<構成>
- option.csv
- style.scss
- style.css
その他のカラー
- ダークカモノハ
- ダークルリ
ミックスグリーン
フォルダ:skin-mixgreen
ファイル構成を見る
<構成>
- images
- empty.txt
- javascript.js
- option.csv
- style.css
その他のカラー
- ミックスブルー
- ミックスレッド
サムライブルー(勝色)
フォルダ:skin-samuraiblue
ファイル構成を見る
<構成>
- images
- samuraiblue_background.jpg
- samuraiblue_header.jpg
- empty.txt
- javascript.js
- option.csv
- style.css
サムライブルー(無印)
フォルダ:skin-samuraiblue-muji
ファイル構成を見る
<構成>
- javascript.js
- option.csv
- style.css
Veilnui Simplog(amber)
フォルダ:veilnui-simplog-amber
ファイル構成を見る
<構成>
- images
- image.png
- functions.php
- style.scss
- style.css
その他のカラー
- Veilnui Simplog (blue)
- Veilnui Simplog (brown)
- Veilnui Simplog (deep purple)
- Veilnui Simplog (green)
- Veilnui Simplog (indigo)
- Veilnui Simplog (orange)
- Veilnui Simplog (pink)
- Veilnui Simplog (red)
- Veilnui Simplog (teal)
隠れスキンのカラー
- Veilnui Simplog (cyan)
- Veilnui Simplog (light blue)
- Veilnui Simplog (lime)
- Veilnui Simplog (light green)
- Veilnui Simplog (deep purple)
- Veilnui Simplog (yellow)
- Veilnui Simplog (deep orange)
Momoon(アクア)
このスキンの色を変更するカスタマイズは以下にまとめています。
フォルダ:skin-momoon-aqua
ファイル構成を見る
<構成>
- style.css
その他のカラー
- Momoon(グリーン)
- Momoon(オレンジ)
- Momoon(ピンク)
- Momoon(パープル)
tecurio earth
フォルダ:skin-tecurio-earth
ファイル構成を見る
<構成>
- images
- empty.txt
- amp.css
- functions.php
- javascript.js
- option.csv
- style.css
その他のカラー
- tecurio grape
- tecurio lime
- tecurio mango
- tecurio moon
- tecurio peach
- tecurio sky
- tecurio soil
- tecurio sunset
Bizarre-food(グリーンソバ)
フォルダ:bizarre-foods-greensoba
ファイル構成を見る
<構成>
- option.csv
- style.css
その他のカラー
- Bizarre-food(ピンクワイン)
- Bizarre-food(ブラックバーガー)
- Bizarre-food(ブルーカレー)
- Bizarre-food(ホワイトラーメン)
旅カメラ
フォルダ:skin-ganchan21
ファイル構成を見る
<構成>
- style.css
おでかけピンク
フォルダ:skin-ganchan11
ファイル構成を見る
<構成>
- option.csv
- style.css
その他のカラー
- おでかけブルー
- おでかけレモン
フォルダ:おでかけブルー skin-ganchan12
フォルダ:おでかけレモン skin-ganchan13
いつものコーヒー
フォルダ:skin-ganchan03
ファイル構成を見る
<構成>
- style.css
その他のカラー
- いつものローズ
- いつもの深海
フォルダ:いつものローズ skin-ganchan02
フォルダ:いつもの深海 skin-ganchan01
m-sora
フォルダ:m-sora
ファイル構成を見る
<構成>
- style.css
m-tomato
フォルダ:m-tomato
ファイル構成を見る
<構成>
- style.css
ドット・レイニーブルー
フォルダ:skin-dot-rainyblue
ファイル構成を見る
<構成>
- images
- blue-dot.jpg
- style.css
ドット・ワインレッド
フォルダ:skin-dot-winered
ファイル構成を見る
<構成>
- images
- red-dot.jpg
- style.css
ほんわかライトニング
フォルダ:lightning-skin
ファイル構成を見る
<構成>
- images
- Lightning_original-bakgroundimg.jpg
- javascript.js
- option.csv
- style.css
Metal Styles
シンプルな1カラムのスキンです。
フォルダ:skin-metal
ファイル構成を見る
<構成>
- images
- empty.txt
- javascript.js
- style.css
凸凹
フォルダ:skin-neumorphism
ファイル構成を見る
<構成>
- customizer-preview.js
- javascript.js
- functions.php
- skeyframes.css
- style.css
スキンオプションから変更するサンプル
スキンからオプション変更サンプル(CSV)
フォルダ:skin-demo-csv
ファイル構成を見る
<構成>
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
スキンからオプション変更サンプル(JSON)
フォルダ:skin-demo-json
ファイル構成を見る
<構成>
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
スキンからオプション変更サンプル(PHP)
フォルダ:skin-demo-php
ファイル構成を見る
<構成>
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
スキンテンプレート
スタイルには何も入っていないひな形スキンです。
フォルダ:skin-template
ファイル構成を見る
<構成>
- images
- empty.txt
- amp.css
- functions.php
- javascript.js
- keyframes.css
- style.css
アニメーション追加スキン
ふわっと追加

ゆっくり色が変化

コメント
はじめまして。
こちらを参考に、スキンを選びました。
SILK(シルク)を選んだんですけど、
リンク先がアリスになっていたり、
構成が若干間違ってるみたいです。
みんとさま はじめまして。
ご指摘ありがとうございます。
早速、修正しておきました。
[…] 「Cocoon」のスキンは、種類が多くどれを設定すればよいか1つ1つ試すのは非効率的であるので、これもまたインターネットで「cocoon」におすすめのスキンを調べました。「カスタマイズほぼ不要、テーマ「Cocoon」のおすすめスキン」と「Cocoon標準スキン全種・画面サンプル一覧とファイル構成」を参考にして、「Season(spring)」にすることにしました。 […]
はじめまして。
ほんとにスキン多くて迷いますよね。
でも選択肢が多い事は素晴らしいと思います。
PS リンクありがとうございます。