>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

Cocoon標準スキン全種・画面サンプル一覧とファイル構成

Cocoon・スキン
この記事は約28分で読めます。
     

目次

Cocoon標準スキンについて

Q
標準スキンは何種類ある?
A
【2024年4月時点】
親テーマ:103種類
(隠れスキン:7種類)
子テーマ:1種類
スキンテンプレート:1種類
スキンから変更するサンプル:3種類
アニメーション効果のみ追加できるスキン:2種類

Q
画面サンプルのみ見たい場合
A
いずれかのサンプル画像をタップすると、メディアギャラリーで画像のみを順番に見られます。
左下にスキン名が表示されます。(下部に広告が出てしまっている場合は広告を閉じてください)

Q
隠れスキンとは?
A
現在7つのスキンが標準では表示されない仕様になっています。

表示されないスキンは「Veilnui Simplog」シリーズの7色で、標準では10色ですが、隠れスキンを合わせると17色あり、以下が表示されるようになります。

  • 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標準スキン全種の画面サンプルとカラーコード一覧
Cocoonのデザインスキンは、標準で数十種類用意されています。 更に「隠れスキン(7種)」や「自作用サンプル」もあります。 それらスキンのキーカラーのカラーコードを一覧にしてみます。 利用しているスキンにカスタマイズを加えたい時などに参考...

 

子テーマにあるもの

場所:/wp-content/themes/cocoon-child-master/skins

[Child]スキンテンプレート

[Child]スキンテンプレート

[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

grayish

grayish

フォルダ:skin-grayish-topfull

ファイル構成を見る

<構成>

editor-style.css
functions.php
javascript.js
option.csv
skin_admin_javascript.js
style.css

 

SILK(シルク)

SILK(シルク)

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(イエロー)

COLORS(イエロー)

COLORS(イエロー)

フォルダ:skin-colors-yellow

ファイル構成を見る

<構成>

images
empty.txt
functions.php
javascript.js
option.csv
style.css
style.scss

 

その他のカラー

 

Like Simplicity

Like Simplicity

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)

Season (Spring)

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 -御召茶(おめしちゃ)

Fuwari -御召茶(おめしちゃ)

Fuwari -御召茶(おめしちゃ)

 

フォルダ:skin-fuwari-omeshicha

ファイル構成を見る

<構成>

option.csv
style.css

 

その他のカラー

 

one

one

one

フォルダ:one

ファイル構成を見る

<構成>

images
empty.txt
amp.css
editor-style.css
functions.php
javascript.js
style.css
readme.txt

 

Simple‐Darkmode

Simple‐Darkmode

Simple‐Darkmode

 

フォルダ:simple-darkmode

ファイル構成を見る

<構成>

images
empty.txt
amp.css
functions.php
javascript.js
style.css
readme.txt

 

Simple‐Darkmode Always(常時ダークモード)

Simple‐Darkmode Always(常時ダークモード)

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

Hygiene

フォルダ:hygiene

ファイル構成を見る

<構成>

images
empty.txt
javascript.js
option.csv
style.css

 

Natural(ブルー)

Natural(ブルー)

Natural(ブルー)

 

フォルダ:natural-blue

ファイル構成を見る

<構成>

style.css
style.scss

 

Natural(グリーン)

Natural(グリーン)

Natural(グリーン)

 

フォルダ:natural-green

ファイル構成を見る

<構成>

style.css
style.scss

 

Simple Blue

Simple Blue

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)

Veilnui Simplog (amber)

フォルダ:veilnui-simplog-amber

ファイル構成を見る

<構成>

images
image.png
functions.php
style.scss
style.css

 

その他のカラー

 

隠れスキンのカラー

 

Momoon(アクア)

 

このスキンの色を変更するカスタマイズは以下にまとめています。

Momoon(アクア)

Momoon(アクア)

フォルダ:skin-momoon-aqua

ファイル構成を見る

<構成>

style.css

 

その他のカラー

 

tecurio earth

tecurio earth

tecurio earth

フォルダ:skin-tecurio-earth

ファイル構成を見る

<構成>

images
empty.txt
amp.css
functions.php
javascript.js
option.csv
style.css

 

その他のカラー

 

Bizarre-food(グリーンソバ)

Bizarre-food(グリーンソバ)

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

m-sora

フォルダ:m-sora

ファイル構成を見る

<構成>

style.css

 

m-tomato

m-tomato

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カラムのスキンです。

Metal Styles

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)

スキンからオプション変更サンプル(CSV)

スキンからオプション変更サンプル(CSV)

フォルダ:skin-demo-csv

ファイル構成を見る

<構成>

images
empty.txt
functions.php
javascript.js
option.csv
style.css

 

スキンからオプション変更サンプル(JSON)

スキンからオプション変更サンプル(JSON)

スキンからオプション変更サンプル(JSON)

フォルダ:skin-demo-json

ファイル構成を見る

<構成>

images
empty.txt
functions.php
javascript.js
option.csv
style.css

 

スキンからオプション変更サンプル(PHP)

スキンからオプション変更サンプル(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サイトに動きが出るアニメーションを追加する方法。「ふわっと追加」スキン同梱による機能。
LUCKLOGを運営されているらくさんが作成されたふわっと追加スキンを同梱させていただきました。 このスキンの追加により、Cocoonサイトに4種類のアニメーション効果を付加できるようになります。 サイトにアニメーション効果を付加する方法(

 

ゆっくり色が変化

好きな色を4色選び、背景色がゆっくり変わっていくスキン
Cocoonスキン「ゆっくり色が変化」を同梱追加
LUCKLOGを運営されているらくさんが作成されたゆっくり色が変化スキンを同梱させていただきました。 このスキンは「指定した4色で背景がゆっくり入れ替わっていくスキン」です。 このスキンはサイトに大きなデザインの変更が出るわけではないです。

コメント

  1. みんと より:

    はじめまして。
    こちらを参考に、スキンを選びました。

    SILK(シルク)を選んだんですけど、
    リンク先がアリスになっていたり、
    構成が若干間違ってるみたいです。

    • 綾糸 より:

      みんとさま はじめまして。
      ご指摘ありがとうございます。
      早速、修正しておきました。

  2. […]  「Cocoon」のスキンは、種類が多くどれを設定すればよいか1つ1つ試すのは非効率的であるので、これもまたインターネットで「cocoon」におすすめのスキンを調べました。「カスタマイズほぼ不要、テーマ「Cocoon」のおすすめスキン」と「Cocoon標準スキン全種・画面サンプル一覧とファイル構成」を参考にして、「Season(spring)」にすることにしました。 […]

    • 綾糸 より:

      はじめまして。
      ほんとにスキン多くて迷いますよね。
      でも選択肢が多い事は素晴らしいと思います。

      PS リンクありがとうございます。