Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
設定
この記事は約16分で読めます。

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

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

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

 

 

Cocoonスキン設定

 

Ver.2.1.7~ シンプルスキンが追加されました。

 

Ver.2.1.5~ カラフルスキンが追加されました。

 

Ver.2.1.0.4~ ダークシリーズ3パターンが追加されました。
ダークスキン詳細は以下の公式サイトをご覧ください。

 

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

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

 

 

スポンサーリンク

サンプル画像のみをスライドで見る方法

このページのいずれかの画像をタップするとワードプレスのメディア機能でスライドして見られます。

 

PCでは 左右の矢印マークをクリックしてスライド

タブレットなどではスワイプ

スライドで画像送り

 

隠れスキンとは

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

 

シンプルスキン

 

シンプルブルー

フォルダ: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)

シンプルなブログスキン(琥珀色)

フォルダ: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

その他のカラー

Season (Spring)

Season (Spring)

Season (Spring)

フォルダ:skin-season-spring

<構成>

images
back-dot.png
empty.txt
amp.css
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-modernblack

<構成>

option.csv
style.css

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

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

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

 

フォルダ:skin-fuwari-omeshicha

<構成>

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

サムライブルー(勝色)

サムライブルー(勝色)

サムライブルー(勝色)

フォルダ: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

フォルダ:m-sora

<構成>

style.css

m-tomato

m-tomato

m-tomato

フォルダ:m-tomato

<構成>

style.css

Hygiene

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

シンプルな1カラムのスキンです。

Metal Styles

Metal Styles

フォルダ:skin-metal

<構成>

images
empty.txt
javascript.js
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

 

コメント

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

    • 綾糸綾糸 より:

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

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

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