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

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

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

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

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

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

sec.ayaito.net

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

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

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-cocoon.com

子テーマにあるもの

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

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

フォルダ：skin-template

 親テーマにあるもの

イノセンス

【Cocoon】スキン「イノセンス」を作成しました！

どうもおはようポテト(@ohayoupoteto22)です。 この度、Cocoonのスキン「イノセンス」を作成しました。 「イノセンス」をダウンロードする 本スキンは 知的さや大人っぽさを演出したい とはいえ可愛さも捨て ...

pote-chil.com

フォルダ：skin-innocence

アリス

メープルの国のアリス | カナダワーホリとかわいいWeb制作

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

yuhostyles.com

フォルダ：maple-alice

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

メープルの国のアリス | カナダワーホリとかわいいWeb制作

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

yuhostyles.com

フォルダ：maple-cheshire-cat

白ウサギ(白×ブルー)

メープルの国のアリス | カナダワーホリとかわいいWeb制作

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

yuhostyles.com

フォルダ：maple-white-rabbit

SILK（シルク）

Cocoonテーマ・スキンの初心者向けカスタマイズツール

WordPressテーマ「Cocoon」のカスタマイズ方法が分からない初心者向けに、スキン作成者がカスタマイズツールを配布します。自作のオリジナルスキンSILK（シルク）、Cocoonテーマ専用プラグインなど多数あり！

dateqa.com

フォルダ：silk

みるらいと

https://mil-light.milmemo.net/

mil-light.milmemo.net

フォルダ：mil-light

シンプルスキン

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

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

karasu-hc.com

フォルダ：simple-blue

その他のカラー

カラフルライン

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

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

zvalinf.info

カラフルライン

フォルダ：skin-colorful-line

ダークエンジ

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

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

zvalinf.info

フォルダ：skin-dark-enji

その他のカラー

ミックスグリーン

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

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

zvalinf.info

ミックスグリーン

フォルダ：skin-mixgreen

その他のカラー

Veilnui Simplog（amber）

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

simplog.veilnui.org

シンプルなブログスキン（琥珀色）

フォルダ：veilnui-simplog-amber

その他のカラー

隠れスキンのカラー

Momoon（アクア）

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

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

rn.bex.jp

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

CocoonのスキンMomoonをカスタマイズして新しいスキンを作る

CocoonのデザインスキンMomoonをカスタマイズしてみます。 はじめに スキンのカスタマイズを行う為に必要な手順についてです。 必要なもの FTPツール ...

sec.ayaito.net

Momoon（アクア）

フォルダ：skin-momoon-aqua

その他のカラー

tecurio earth

tecurio

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

tecurio.com

tecurio earth

フォルダ：skin-tecurio-earth

その他のカラー

Season (Spring)

Cocoonスキン「Season」 デモ

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

ponhiro.com

Season (Spring)

フォルダ：skin-season-spring

その他のカラー

COLORS（イエロー）

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

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

wp-cocoon.com

COLORS（イエロー）

フォルダ：skin-colors-yellow

その他のカラー

Like Simplicity

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

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

wp-cocoon.com

Like Simplicity

フォルダ：skin-simplicity

モダンブラック

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

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

mizutama.blog

モダンブラック

フォルダ：skin-modernblack

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

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

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

mizutama.blog

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

フォルダ：skin-fuwari-omeshicha

その他のカラー

Bizarre-food（グリーンソバ）

https://takasaki.work/cocoon_skin/

takasaki.work

Bizarre-food（グリーンソバ）

フォルダ：bizarre-foods-greensoba

その他のカラー

旅カメラ

旅カメラ

フォルダ：skin-ganchan21

おでかけピンク

おでかけピンク

フォルダ：skin-ganchan11

その他のカラー

フォルダ：おでかけブルー　skin-ganchan12
フォルダ：おでかけレモン　skin-ganchan13

いつものコーヒー

いつものコーヒー

フォルダ：skin-ganchan03

その他のカラー

フォルダ：いつものローズ　skin-ganchan02
フォルダ：いつもの深海　skin-ganchan01

サムライブルー（勝色）

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

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

zvalinf.info

サムライブルー（勝色）

フォルダ：skin-samuraiblue

サムライブルー（無印）

サムライブルー（無印）

フォルダ：skin-samuraiblue-muji

m-sora

Webのこと

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

web.no-koto.net

m-sora

フォルダ：m-sora

m-tomato

m-tomato

フォルダ：m-tomato

Hygiene

Hygiene

フォルダ：hygiene

ドット・レイニーブルー

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

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

woma2.com

ドット・レイニーブルー

フォルダ：skin-dot-rainyblue

ドット・ワインレッド

ドット・ワインレッド

フォルダ：skin-dot-winered

ほんわかライトニング

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

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

lightning2014.ensyutsubu.com

ほんわかライトニング

フォルダ：lightning-skin

Metal Styles

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

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

matometaru.com

Metal Styles

フォルダ：skin-metal

スキンオプションから変更するサンプル

スキンからオプション変更サンプル（CSV）

スキンからオプション変更サンプル（CSV）

フォルダ：skin-demo-csv

スキンからオプション変更サンプル（JSON）

スキンからオプション変更サンプル（JSON）

フォルダ：skin-demo-json

スキンからオプション変更サンプル（PHP）

スキンからオプション変更サンプル（PHP）

フォルダ：skin-demo-php

自作用スキンテンプレート

自作用スキンテンプレート

スタイルには何も入っていないひな形スキンです。

フォルダ：skin-template