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

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

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

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

 

子テーマにあるもの

場所：/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スキン「みるらいと」デモサイト
ふわっとシンプルなデザイン。「みるめも」を「らいと」に表現します。
mil-light.milmemo.net

 

みるらいと

フォルダ：mil-light

＜構成＞

option.csv
style.css

 

シンプルスキン

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

 

シンプルブルー

フォルダ：simple-blue

＜構成＞

style.scss
style.css

その他のカラー

 

カラフルライン

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

カラフルライン

フォルダ：skin-colorful-line

＜構成＞

option.csv
style.css

ダークエンジ

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

ダークエンジ

フォルダ：skin-dark-enji

＜構成＞

option.csv
style.scss
style.css

その他のカラー

ミックスグリーン

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

ミックスグリーン

フォルダ：skin-mixgreen

＜構成＞

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

その他のカラー

 

Veilnui Simplog（amber）

Veilnui Simplog
Veilnui Simplogは「シンプル」であることをベースに開発されたCocoonのスキンです。DOWNLOADGitHubVeilnui Simplogの特徴 17種類の豊富なカラーバリエーションから選べます 。 「純色」「補色」は
simplog.veilnui.org
Veilnui Simplog (amber)

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

フォルダ：veilnui-simplog-amber

＜構成＞

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

その他のカラー

 

隠れスキンのカラー

Momoon（アクア）

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

 

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

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

 

Momoon（アクア）

Momoon（アクア）

フォルダ：skin-momoon-aqua

＜構成＞

style.css

その他のカラー

 

tecurio earth

tecurio
テクノロジー × 好奇心 = ⤴⤴⤴
tecurio.com
tecurio earth

tecurio earth

フォルダ：skin-tecurio-earth

＜構成＞

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

その他のカラー

Season (Spring)

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

Season (Spring)

フォルダ：skin-season-spring

＜構成＞

images
back-dot.png
empty.txt
amp.css
functions.php
javascript.js
style.css

その他のカラー

COLORS（イエロー）

Cocoonを少しリッチな見た目に「COLORS」スキン6種作成
サイトに合わせた色を選べるスキンを6色分作成しました。
wp-cocoon.com
COLORS（イエロー）

COLORS（イエロー）

フォルダ：skin-colors-yellow

＜構成＞

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

その他のカラー

 

Like Simplicity

Simplicityのようなスキン「Like Simplicity」を作成しました
SimplicityっぽいCocoonスキンの紹介。
wp-cocoon.com
Like Simplicity

Like Simplicity

フォルダ：skin-simplicity

＜構成＞

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

モダンブラック

WordPressテーマCocoonの黒系スキン「モダンブラック」を作りました
気軽にブログの着せ替えができるCocoonのスキン機能。シンプルなデザインを活かしつつ落ち着いた感じのスキンを作ってみました。
mizutama.blog
モダンブラック

モダンブラック

フォルダ：skin-modernblack

＜構成＞

option.csv
style.css

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

WordPressテーマCocoonのデザインスキン「Fuwari和色」を作りました
和色をベースにした主張しすぎないシンプルなWordPressテーマCocoonのスキンを作りました。
mizutama.blog
Fuwari -御召茶(おめしちゃ)

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

 

フォルダ：skin-fuwari-omeshicha

＜構成＞

option.csv
style.css

その他のカラー

 

Bizarre-food（グリーンソバ）

takasaki.work
takasaki.work
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

サムライブルー（勝色）

2018FIFAワールドカップ Cocoonの日本代表サムライブルースキン
いよいよ、2018年のFIFAワールドカップが始まりました。各国のトッププレイヤーの試合が楽しめるサッカー好きには待ちに待ったイベント。はっきりいって、オリンピックなんかよりワールドカップの方が盛り上がるようです。大会直前での監督解任など、
zvalinf.info
サムライブルー（勝色）

サムライブルー（勝色）

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

https://web.no-koto.net
web.no-koto.net
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できるスキンも考えました。
woma2.com
ドット・レイニーブルー

ドット・レイニーブルー

フォルダ：skin-dot-rainyblue

＜構成＞

images
blue-dot.jpg
style.css

ドット・ワインレッド

ドット・ワインレッド

ドット・ワインレッド

フォルダ：skin-dot-winered

＜構成＞

images
red-dot.jpg
style.css

ほんわかライトニング

Cocoon スキン「ほんわかライトニング」を公開します
WordPressに移行して早4年経ち、当初よく分からず使っていた無料テーマ”STINGER5”（実際はSTINGER3から始めた）も流石に古く感じられてきたので、今回思い切って、新しいテーマ「Cocoon」に移行しました。この無料テーマ「
lightning2014.ensyutsubu.com
ほんわかライトニング

ほんわかライトニング

フォルダ：lightning-skin

＜構成＞

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

Metal Styles

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

https://matometaru.com/post-2419/
matometaru.com
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. 超初心者によるWordPressに挑戦（３）初期設定 | 定年後のスローライフブログ より:
    2020-06-21 2:14 PM

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

    返信
    • 綾糸綾糸 より:
      2020-06-21 3:15 PM

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

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

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