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

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

スポンサーリンク

設定

2020.06.01 2020.02.24

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

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

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

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

装飾が控えめな「シンプル」スキンを5種類追加

Takaさん作成のシンプルなスキンの紹介。コクーンに同梱済みです。

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

パステルカラー調のカラフルなスキン「カラフルライン」追加

様々な淡い色を利用したシンプルなスキンです。ホバーアニメーションも凝っています。

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

Cocoon初のダークスキン！「ダークエンジ」含む暗色スキン3種追加

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

シンプルスキン

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は「シンプル」であることをベースに開発されたCocoonのスキンです。DOWNLOADGitHubVeilnui Simplogの特徴 17種類の豊富なカラーバリエーションから選べます。「純色」「補色」は

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)

: Veilnui Simplog (cyan) [作者: veilnui]

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

コメント

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