Cocoonのデザインスキンは、標準で数十種類用意されています。
更に「隠れスキン（７種）」や「自作用サンプル」もあります。
各スキンで使われているカラーコードは以下にまとめています。
- サンプル画像のみをスライドで見る方法
- 隠れスキンとは
- 子テーマにあるもの
- 親テーマにあるもの
- てがきノート(ブルーコーラル)
- てがきノート(グリーンオレンジ)
- てがきノート(ピンクレモン)
- てがきノート(ホワイトバナナ)
- てがきノート(ダークスカイ)
- one
- Simple‐Darkmode
- Simple‐Darkmode Always（常時ダークモード）
- Natural（ブルー）
- Natural（グリーン）
- モノクロ
- イノセンス
- アリス（無印）
- アリス（チェシャ猫）
- アリス（白ウサギ)
- アリス（ユニコーン)
- アリス（ローズ)
- アリス（ビタミン)
- SILK（シルク）
- みるらいと
- 凸凹
- シンプルスキン
- カラフルライン
- ダークエンジ
- ミックスグリーン
- Veilnui Simplog（amber）
- Momoon（アクア）
- tecurio earth
- Season (Spring)
- COLORS（イエロー）
- Like Simplicity
- モダンブラック
- Fuwari -御召茶(おめしちゃ)
- Bizarre-food（グリーンソバ）
- 旅カメラ
- おでかけピンク
- いつものコーヒー
- サムライブルー（勝色）
- サムライブルー（無印）
- m-sora
- m-tomato
- Hygiene
- ドット・レイニーブルー
- ドット・ワインレッド
- ほんわかライトニング
- Metal Styles
- スキンオプションから変更するサンプル
サンプル画像のみをスライドで見る方法
このページのいずれかの画像をタップするとワードプレスのメディア機能でスライドして見られます。
PCでは 左右の矢印マークをクリックしてスライド
タブレットなどではスワイプ
隠れスキンとは
現在７つのスキンが標準では表示されない仕様になっています。
表示されないスキンは「Veilnui Simplog」シリーズの７色で、標準では１０色ですが、隠れスキンを合わせると１７色あり、以下が表示されるようになります。
- Veilnui Simplog (cyan)
- Veilnui Simplog (deep orange)
- Veilnui Simplog (light blue)
- Veilnui Simplog (light green)
- Veilnui Simplog (lime)
- Veilnui Simplog (purple)
- Veilnui Simplog (yellow)
隠れスキンについては以下の公式サイトをご覧ください。
子テーマにあるもの
[Child]スキンテンプレート
![[Child]スキンテンプレート](https://sec.ayaito.net/wp-content/uploads/2020/02/14581_01.jpg)
[Child]スキンテンプレート
フォルダ：skin-template
＜構成＞
- images
- empty.txt
- amp.css
- functions.php
- javascript.js
- style.css
親テーマにあるもの
てがきノート(ブルーコーラル)
フォルダ：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
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
Natural（ブルー）
フォルダ：natural-blue
＜構成＞
- style.css
- style.scss
Natural（グリーン）
フォルダ：natural-green
＜構成＞
- style.css
- style.scss
モノクロ
フォルダ：monochrome
＜構成＞
- style.css
イノセンス
フォルダ：skin-innocence
＜構成＞
- images
- squ_ten2.png
- functions.php
- javascript.js
- 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
SILK（シルク）
フォルダ：silk
＜構成＞
- patterns
- comparison-table.php
- fullwide-columns.php
- linklist-box.php
- amp.css
- funtions.php
- gutenberg.js
- javascript.js
- option.csv
- style.css
みるらいと
フォルダ：mil-light
＜構成＞
- option.csv
- style.css
凸凹
フォルダ：skin-neumorphism
＜構成＞
- customizer-preview.js
- javascript.js
- functions.php
- skeyframes.css
- style.css
シンプルスキン
フォルダ：simple-blue
＜構成＞
- style.scss
- 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
その他のカラー
- ミックスブルー
- ミックスレッド
Veilnui Simplog（amber）
シンプルなブログスキン（琥珀色）
フォルダ：veilnui-simplog-amber
＜構成＞
- images
- image.png
- functions.php
- style.scss
- style.css
その他のカラー
- Veilnui Simplog (blue)
- Veilnui Simplog (brown)
- Veilnui Simplog (green)
- Veilnui Simplog (deep purple)
- Veilnui Simplog (indigo)
- Veilnui Simplog (orange)
- Veilnui Simplog (pink)
- Veilnui Simplog (red)
- Veilnui Simplog (teal)
隠れスキンのカラー
- Veilnui Simplog (purple)
- Veilnui Simplog (lime)
- Veilnui Simplog (light blue)
- Veilnui Simplog (deep orange)
![Veilnui Simplog (cyan) [作者: veilnui]](https://sec.ayaito.net/wp-content/uploads/2020/02/14581_77.jpg)
Momoon（アクア）
このスキンの色を変更するカスタマイズは以下にまとめています。
Momoon（アクア）
フォルダ：skin-momoon-aqua
＜構成＞
- style.css
その他のカラー
- Momoon（グリーン）
- Momoon（オレンジ）
- Momoon（ピンク）
- Momoon（パープル）
tecurio earth
tecurio earth
フォルダ：skin-tecurio-earth
＜構成＞
- images
- empty.txt
- amp.css
- functions.php
- javascript.js
- option.csv
- style.css
その他のカラー
- tecurio lime
- tecurio grape
- tecurio mango
- tecurio moon
- tecurio peach
- tecurio sky
- tecurio soil
- tecurio sunset
Season (Spring)
Season (Spring)
フォルダ：skin-season-spring
＜構成＞
- images
- back-dot.png
- empty.txt
- amp.css
- functions.php
- javascript.js
- style.css
その他のカラー
- Season (Winter)
- Season (Autumn)
- Season (Summer)
COLORS（イエロー）
COLORS（イエロー）
フォルダ：skin-colors-yellow
＜構成＞
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
- style.scss
その他のカラー
- COLORS（グリーン）
- COLORS（ピンク）
- COLORS（ブラック）
- COLORS（ブルー）
- COLORS（レッド）
Like Simplicity
Like Simplicity
フォルダ：skin-simplicity
＜構成＞
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
- style.scss
モダンブラック
モダンブラック
フォルダ：skin-modernblack
＜構成＞
- option.csv
- style.css
Fuwari -御召茶(おめしちゃ)
Fuwari -御召茶(おめしちゃ)
フォルダ：skin-fuwari-omeshicha
＜構成＞
- option.csv
- style.css
その他のカラー
- Fuwari -褐色(かちいろ)
- Fuwari -海老茶(えびちゃ)
- Fuwari -海松茶(みるちゃ)
Bizarre-food（グリーンソバ）
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
サムライブルー（勝色）
サムライブルー（勝色）
フォルダ：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
m-sora
m-sora
フォルダ：m-sora
＜構成＞
- style.css
m-tomato
m-tomato
フォルダ：m-tomato
＜構成＞
- style.css
Hygiene
Hygiene
フォルダ：hygiene
＜構成＞
- images
- empty.txt
- javascript.js
- option.csv
- 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
シンプルな１カラムのスキンです。
Metal Styles
フォルダ：skin-metal
＜構成＞
- images
- empty.txt
- javascript.js
- style.css
スキンオプションから変更するサンプル
スキンからオプション変更サンプル（CSV）
スキンからオプション変更サンプル（CSV）
フォルダ：skin-demo-csv
＜構成＞
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
スキンからオプション変更サンプル（JSON）
スキンからオプション変更サンプル（JSON）
フォルダ：skin-demo-json
＜構成＞
- images
- empty.txt
- functions.php
- javascript.js
- option.csv
- style.css
スキンからオプション変更サンプル（PHP）
スキンからオプション変更サンプル（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
コメント
[…] 「Cocoon」のスキンは、種類が多くどれを設定すればよいか１つ１つ試すのは非効率的であるので、これもまたインターネットで「cocoon」におすすめのスキンを調べました。「カスタマイズほぼ不要、テーマ「Cocoon」のおすすめスキン」と「Cocoon標準スキン全種・画面サンプル一覧とファイル構成」を参考にして、「Season（spring）」にすることにしました。 […]
はじめまして。
ほんとにスキン多くて迷いますよね。
でも選択肢が多い事は素晴らしいと思います。
PS リンクありがとうございます。
はじめまして。
こちらを参考に、スキンを選びました。
SILK（シルク）を選んだんですけど、
リンク先がアリスになっていたり、
構成が若干間違ってるみたいです。
みんとさま はじめまして。
ご指摘ありがとうございます。
早速、修正しておきました。