目次
- Cocoon標準スキンについて
- スキンの設定
- 子テーマにあるもの
- 親テーマにあるもの
- メイド・イン・ヘブン
- grayish
- SILK（シルク）
- みるらいと
- イノセンス
- COLORS（イエロー）
- Like Simplicity
- てがきノート(ブルーコーラル)
- てがきノート(グリーンオレンジ)
- てがきノート(ピンクレモン)
- てがきノート(ホワイトバナナ)
- てがきノート(ダークスカイ)
- Season (Spring)
- モダンブラック
- Fuwari -御召茶(おめしちゃ)
- one
- Simple‐Darkmode
- Simple‐Darkmode Always（常時ダークモード）
- Hygiene
- Natural（ブルー）
- Natural（グリーン）
- Simple Blue
- モノクロ
- アリス（無印）
- アリス（チェシャ猫）
- アリス（白ウサギ)
- アリス（ユニコーン)
- アリス（ローズ)
- アリス（ビタミン)
- カラフルライン
- ダークエンジ
- ミックスグリーン
- サムライブルー（勝色）
- サムライブルー（無印）
- Veilnui Simplog（amber）
- Momoon（アクア）
- tecurio earth
- Bizarre-food（グリーンソバ）
- 旅カメラ
- おでかけピンク
- いつものコーヒー
- m-sora
- m-tomato
- ドット・レイニーブルー
- ドット・ワインレッド
- ほんわかライトニング
- Metal Styles
- 凸凹
- スキンオプションから変更するサンプル
- アニメーション追加スキン
Cocoon標準スキンについて
- Q標準スキンは何種類ある？
- A【2024年4月時点】
親テーマ：103種類
（隠れスキン：7種類）
子テーマ：1種類
スキンテンプレート：1種類
スキンから変更するサンプル：3種類
アニメーション効果のみ追加できるスキン：2種類 - Q画面サンプルのみ見たい場合
- Aいずれかのサンプル画像をタップすると、メディアギャラリーで画像のみを順番に見られます。
左下にスキン名が表示されます。（下部に広告が出てしまっている場合は広告を閉じてください） - Q隠れスキンとは？
- A現在７つのスキンが標準では表示されない仕様になっています。
表示されないスキンは「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)
隠れスキンについては公式サイトをご覧ください。
スキンの設定
Cocoonのデザインスキンは、標準で100種類以上用意されています。
たくさんのスキンの見た目を一気に見れるようにまとめました。
設定は「Cocoon設定」の「スキン」タブから選択。
各スキンで使われているカラーコードは以下にまとめています。
Cocoon標準スキン全種の画面サンプルとカラーコード一覧
Cocoonのデザインスキンは、標準で数十種類用意されています。 更に「隠れスキン（７種）」や「自作用サンプル」もあります。 それらスキンのキーカラーのカラーコードを一覧にしてみます。 利用しているスキンにカスタマイズを加えたい時などに参考...
ayaito.net
2020.05.01
子テーマにあるもの
場所：/wp-content/themes/cocoon-child-master/skins
[Child]スキンテンプレート
子テーマに入っているスタイルには何も入っていないひな形スキンです。
フォルダ：skin-template
ファイル構成を見る
＜構成＞
- images
- empty.txt
- amp.css
- functions.php
- javascript.js
- style.css
親テーマにあるもの
場所：/wp-content/themes/cocoon-master/skins
メイド・イン・ヘブン
フォルダ：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
その他のカラー
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
その他のカラー
モダンブラック
フォルダ：skin-modernblack
ファイル構成を見る
＜構成＞
- option.csv
- style.css
Fuwari -御召茶(おめしちゃ)
フォルダ：skin-fuwari-omeshicha
ファイル構成を見る
＜構成＞
- option.csv
- 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
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
その他のカラー
モノクロ
フォルダ：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
その他のカラー
隠れスキンのカラー
Momoon（アクア）
このスキンの色を変更するカスタマイズは以下にまとめています。
フォルダ：skin-momoon-aqua
ファイル構成を見る
＜構成＞
- style.css
その他のカラー
tecurio earth
フォルダ：skin-tecurio-earth
ファイル構成を見る
＜構成＞
- images
- empty.txt
- amp.css
- functions.php
- javascript.js
- option.csv
- style.css
その他のカラー
Bizarre-food（グリーンソバ）
フォルダ：bizarre-foods-greensoba
ファイル構成を見る
＜構成＞
- option.csv
- style.css
その他のカラー
旅カメラ
フォルダ：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
シンプルな１カラムのスキンです。
フォルダ：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
アニメーション追加スキン
ふわっと追加
好きなスキンにふわっとフェイドインするアニメーションを追加できるスキン
Cocoonサイトに動きが出るアニメーションを追加する方法。「ふわっと追加」スキン同梱による機能。
LUCKLOGを運営されているらくさんが作成されたふわっと追加スキンを同梱させていただきました。 このスキンの追加により、Cocoonサイトに4種類のアニメーション効果を付加できるようになります。 サイトにアニメーション効果を付加する方法（
wp-cocoon.com
ゆっくり色が変化
好きな色を４色選び、背景色がゆっくり変わっていくスキン
Cocoonスキン「ゆっくり色が変化」を同梱追加
LUCKLOGを運営されているらくさんが作成されたゆっくり色が変化スキンを同梱させていただきました。 このスキンは「指定した4色で背景がゆっくり入れ替わっていくスキン」です。 このスキンはサイトに大きなデザインの変更が出るわけではないです。
wp-cocoon.com
Next Read: Cocoonテーマの更新方法・最新バージョンや過去バージョン »
View Comments (3)
はじめまして。
こちらを参考に、スキンを選びました。
SILK（シルク）を選んだんですけど、
リンク先がアリスになっていたり、
構成が若干間違ってるみたいです。
みんとさま はじめまして。
ご指摘ありがとうございます。
早速、修正しておきました。
はじめまして。
ほんとにスキン多くて迷いますよね。
でも選択肢が多い事は素晴らしいと思います。
PS リンクありがとうございます。