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

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

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

Cocoonのデザインスキンは、標準で数十種類用意されています。

更に「隠れスキン(7種)」や「自作用サンプル」もあります。

たくさんのスキンの見た目を一気に見れるようにまとめました。

 

Cocoonスキン設定

 

各スキンで使われているカラーコードは以下にまとめています。

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

 

このページのいずれかの画像をタップすると
すべての画像をスライドして見られます。

 

隠れスキンとは

現在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)

 

隠れスキンについては以下の公式サイトをご覧ください。

 

子テーマにあるもの

場所:/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

 

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 リンクありがとうございます。

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