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

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

スポンサーリンク

Cocoon・設定

2021.05.27 2020.02.24

この記事は約18分で読めます。

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

更に「隠れスキン（７種）」や「自作用サンプル」もあります。

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

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

Cocoon標準スキン全種の画面サンプルとカラーコード一覧

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

スポンサーリンク

目次

サンプル画像のみをスライドで見る方法
隠れスキンとは
子テーマにあるもの
- [Child]スキンテンプレート
親テーマにあるもの
スキンオプションから変更するサンプル

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

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

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)

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

Cocoon設定のスキン表示を制御するカスタマイズ方法

Cocoonに同梱されている隠れスキンを表示させる方法。任意のスキンを非表示にする方法。

子テーマにあるもの

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

モノクロ

Cocoonのデザインをモノトーン調にカスタマイズ・スタイリングしました

WordPress無料テーマ「Cocoon」のデザインをモノトーン調にスタイリングしてみました。CSSだけを用いています。この記事ではモノクロデザインの紹介をしていきます。

フォルダ：monochrome

＜構成＞

style.css

イノセンス

【Cocoon】居心地の良いスキン「イノセンス」を作成しました

この度、Cocoonのスキン「イノセンス」を作成しました。「イノセンス」をダウンロードする本スキンは知的さや大人っぽさを演出したいとはいえ可愛さも捨てがたいよねまあ要するに、居心地のいいスキンを探してるんです ...

フォルダ：skin-innocence

＜構成＞

images squ_ten2.png
functions.php
javascript.js
style.css

アリス

メープルの国のアリス | カナダワーホリとWordPressカスタマイズ

人生を楽しむカナダワーホリとWeb制作ブログ

フォルダ：maple-alice

＜構成＞

images empty.txt Alice-ScreenShot.jpg
.DS_Store
amp.css
functions.php
javascript.js
style.css

チェシャ猫（ピンク×パープル）

メープルの国のアリス | カナダワーホリとWordPressカスタマイズ

人生を楽しむカナダワーホリとWeb制作ブログ

フォルダ：maple-cheshire-cat

＜構成＞

images empty.txt Cheshire-Cat Screen Shot.jpg .DS_Store amp.css functions.php javascript.js style.css

白ウサギ(白×ブルー)

メープルの国のアリス | カナダワーホリとWordPressカスタマイズ

人生を楽しむカナダワーホリとWeb制作ブログ

フォルダ：maple-white-rabbit

＜構成＞

images empty.txt Alice-ScreenShot.jpg .DS_Store amp.css functions.php javascript.js style.css

SILK（シルク）

【Cocoonスキン】SILK（シルク）の使い方とカスタマイズ方法

SILK（シルク）はろこが作成した、WordPress無料テーマ「Cocoon」のデザインスキンです。SILKの使い方やおすすめのカスタマイズ方法、Cocoonスキンの作り方などを初心者にも分かりやすく解説します。

フォルダ：silk

＜構成＞

patterns comparison-table.php fullwide-columns.php linklist-box.php
amp.css
funtions.php
gutenberg.js
javascript.js
option.csv
style.css

みるらいと

Cocoonスキン「みるらいと」デモサイト

ふわっとシンプルなデザイン。「みるめも」を「らいと」に表現します。

フォルダ：mil-light

＜構成＞

option.csv
style.css

凸凹

Cocoonスキン「凸凹」デモサイト

Cocoonスキン「凸凹」（でこぼこ）のデモサイトです。サイトフォントは小杉丸ゴシックを選択しています。

フォルダ：skin-neumorphism

＜構成＞

customizer-preview.js
javascript.js
functions.php
skeyframes.css
style.css

シンプルスキン

WordPressテーマ、Cocoonのスキン【Simpleシリーズ】を作りました | TACLIMB

当ブログはWordPressの無料テーマ「Cocoon」を使っています。無料のテーマでありながら、豊富な機能が最初から備わっており、カスタマイズもしやすく、非常に使い勝手が良いので愛用しています。Cocoonに備わっている機能でも十分にカスタマイズすることはできるのですが、「より自分好みのデザインにしたい！」ということ...

フォルダ：simple-blue

＜構成＞

style.scss
style.css

その他のカラー

: シンプルネイビー

: シンプルグリーン

: シンプルピンク

: シンプルレッド

カラフルライン

Cocoonスキン『カラフルライン』の特徴

このページは「カラフルライン」について書いているので、サイドバーの「スキン切り替え」から「カラフルライン」を選択してください。前回のダークスキンからガラッと変わって、マウスホバーが派手な「カラフルライン」というスキンを作ってみました。この記

カラフルライン

カラフルライン

フォルダ：skin-colorful-line

＜構成＞

option.csv
style.css

ダークエンジ

Cocoonスキン『ダークスキン』の特徴

このページは「ダークスキン」について書いているので、サイドバーの「スキン切り替え」から「ダークエンジ」、「ダークルリ」、「ダークカモノハ」を選択してください。このサイトのヘッダーはグラデーションされていますが、スキンを適用してもグラデーショ

フォルダ：skin-dark-enji

＜構成＞

option.csv
style.scss
style.css

その他のカラー

ミックスグリーン

Cocoonスキン『ミックススキン』の特徴

以前からやろうと思っていた、ミックスシリーズ（ミックスグリーン、ミックスブルー、ミックスレッド）のアップデートがようやくできました！ミックスシリーズの特徴を書いてみます。サイドバーの上に「スキン切り替え」プルダウンを用意したので、それぞれの

ミックスグリーン

ミックスグリーン

フォルダ：skin-mixgreen

＜構成＞

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

その他のカラー

: ミックスブルー

: ミックスレッド

Veilnui Simplog（amber）

Veilnui Simplog - メンテナンスモード

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)

Momoon（アクア）

cocoonのスキン「Momoon」を作りました

デザインっていうのは人それぞれ趣向が違うと思うけど、ぼく色でスキンを作ってみました。個人的に空白とか隙間とか、デフォルトだと気になるところがあったので。というか、デフォルトスキンはあえてデザインしやすいようにシンプルになっているんだと思いま

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

Momoon（アクア）

Momoon（アクア）

フォルダ：skin-momoon-aqua

＜構成＞

style.css

その他のカラー

: Momoon（グリーン）

: Momoon（オレンジ）

: Momoon（ピンク）

: Momoon（パープル）

tecurio earth

テクノロジー × 好奇心 = ⤴⤴⤴

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)

Cocoonスキン「Season」デモ

WordpressテーマCocoonのスキン「Season」のデモページです&#1...

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（イエロー）

Cocoonを少しリッチな見た目に「COLORS」スキン6種作成

サイトに合わせた色を選べるスキンを6色分作成しました。

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

Simplicityのようなスキン「Like Simplicity」を作成しました

SimplicityっぽいCocoonスキンの紹介。

Like Simplicity

Like Simplicity

フォルダ：skin-simplicity

＜構成＞

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

モダンブラック

WordPressテーマCocoonの黒系スキン「モダンブラック」を作りました

気軽にブログの着せ替えができるCocoonのスキン機能。シンプルなデザインを活かしつつ落ち着いた感じのスキンを作ってみました。

モダンブラック

モダンブラック

フォルダ：skin-modernblack

＜構成＞

option.csv
style.css

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

WordPressテーマCocoonのデザインスキン「Fuwari和色」を作りました

和色をベースにした主張しすぎないシンプルなWordPressテーマCocoonのスキンを作りました。

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

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

フォルダ：skin-fuwari-omeshicha

＜構成＞

option.csv
style.css

その他のカラー

: Fuwari -褐色(かちいろ)

: Fuwari -海老茶(えびちゃ)

: Fuwari -海松茶(みるちゃ)

Bizarre-food（グリーンソバ）

https://takasaki.work/cocoon_skin/

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

サムライブルー（勝色）

2018FIFAワールドカップ Cocoonの日本代表サムライブルースキン

いよいよ、2018年のFIFAワールドカップが始まりました。各国のトッププレイヤーの試合が楽しめるサッカー好きには待ちに待ったイベント。はっきりいって、オリンピックなんかよりワールドカップの方が盛り上がるようです。大会直前での監督解任など、

サムライブルー（勝色）

サムライブルー（勝色）

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

みなさん、こんにちは。まりんです。ようこそ、「Webのこと」へ。Webには沢山の情報があふれていますよね。その中から役立ちそうなものをピックアップしたいと思います。私が撮影した写真やWebネタなども掲載していきますので、是非ともご覧ください

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

ドット・レイニーブルー

WordPressテーマ「Cocoon」スキン｜ドットな「ワインレッド」と「レイニーブルー」を作りました

四月くらいからWordPressテーマを「Cocoon」へ変更させていただいています。自身のページのスキン作成に取り掛かりましたが、一緒にDLできるスキンも考えました。

ドット・レイニーブルー

ドット・レイニーブルー

フォルダ：skin-dot-rainyblue

＜構成＞

images: blue-dot.jpg
style.css

ドット・ワインレッド

ドット・ワインレッド

ドット・ワインレッド

フォルダ：skin-dot-winered

＜構成＞

images: red-dot.jpg
style.css

ほんわかライトニング

Cocoon スキン「ほんわかライトニング」を公開します

WordPressに移行して早4年経ち、当初よく分からず使っていた無料テーマ”STINGER5”（実際はSTINGER3から始めた）も流石に古く感じられてきたので、今回思い切って、新しいテーマ「Cocoon」に移行しました。この無料テーマ「

ほんわかライトニング

ほんわかライトニング

フォルダ：lightning-skin

＜構成＞

images: Lightning_original-bakgroundimg.jpg
javascript.js
option.csv
style.css

Metal Styles

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

https://matometaru.com/post-2419/

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

コメント

超初心者によるWordPressに挑戦（３）初期設定 | 定年後のスローライフブログより:
2020-06-21 2:14 PM
[…] 　「Cocoon」のスキンは、種類が多くどれを設定すればよいか１つ１つ試すのは非効率的であるので、これもまたインターネットで「cocoon」におすすめのスキンを調べました。「カスタマイズほぼ不要、テーマ「Cocoon」のおすすめスキン」と「Cocoon標準スキン全種・画面サンプル一覧とファイル構成」を参考にして、「Season（spring）」にすることにしました。 […]
返信
- 綾糸より:
  2020-06-21 3:15 PM
  はじめまして。
  ほんとにスキン多くて迷いますよね。
  でも選択肢が多い事は素晴らしいと思います。
  PS　リンクありがとうございます。
  返信
みんとより:
2021-03-28 11:21 AM
はじめまして。
こちらを参考に、スキンを選びました。
SILK（シルク）を選んだんですけど、
リンク先がアリスになっていたり、
構成が若干間違ってるみたいです。
返信
- 綾糸より:
  2021-03-28 1:28 PM
  みんとさま　はじめまして。
  ご指摘ありがとうございます。
  早速、修正しておきました。
  返信

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