バージョン 2.3.1

ここでは無料のWordPressテーマ「Cocoon(コクーン)」のスキンの設定とスキンの種類について紹介します。

目次

スキンのデザインの確認方法

Cocoonのスキンは、管理画面の [Cocoon 設定] を選択して [スキン] タブを選択するとスキン一覧が表示されます。



スキンには80以上の種類があります。デザインを確認するには、一覧のスキンタイトル左の画像アイコンにカーソルを当てるとスキンのデザインがプレビューされます。


スキンの設定

スキンの設定は一覧から設定したいスキンを選択して [変更をまとめて保存] ボタンをクリックします。
設定が保存されると、選択したスキンのプレビューが表示されます。ここでは「アリス」を設定してみました。


スキンを設定しても反映されない場合

・サイトのURLが「http://~」から始まっている場合、SSLが導入されていなためスキンが反映されないようです。SSLを導入してURLを「https://~」に必要があります。
・SSLが導入されていても反映されない場合は、[Cocoon 設定] → [キャッシュ削除] で「全てのキャッシュの削除」を実行してみてください。何度もスキンの設定を変更していたら反映されなくなり、「全てのキャッシュの削除」を実行したら直りました。


スキンの種類

スキンのプレビュー画像をキャプチャして掲載しています。スキン選択の参考にしてください。

モノクロ

モノクロ [作者: yurukei20]


イノセン

イノセンス [作者: おはようポテト]


アリス

アリス [作者: Yuhomyan]


チェシャ猫(ピンク×パープル)

チェシャ猫(ピンク×パープル) [作者: Yuhomyan]


白ウサギ(白×ブルー)

白ウサギ(白×ブルー) [作者: Yuhomyan]


SILK(シルク)

SILK(シルク) [作者: ろこ]


みるらいと

みるらいと [作者: みるみ]


凸凹

凸凹 [作者: 北]


Simple Blue

Simple Blue [作者: ベーやん]


Simple Green

Simple Green [作者: ベーやん]


Simple Navy

Simple Navy [作者: ベーやん]


Simple Pink

Simple Pink [作者: ベーやん]


Simple red

Simple red [作者: ベーやん]


カラフルライン

カラフルライン [作者: y.hiroaki]


ダークエンジ

ダークエンジ [作者: y.hiroaki]


ダークカモノハ

ダークカモノハ [作者: y.hiroaki]


ダークルリ

ダークルリ [作者: y.hiroaki]


ミックスグリーン

ミックスグリーン [作者: y.hiroaki]


ミックスブルー

ミックスブルー [作者: y.hiroaki]


ミックスレッド

ミックスレッド [作者: y.hiroaki]


サムライブルー(勝色)

サムライブルー(勝色) [作者: y.hiroaki]


サムライブルー(無印)

サムライブルー(無印) [作者: y.hiroaki]


Veilnui Simplog (amber)

Veilnui Simplog (amber) [作者: veilnui]


Veilnui Simplog (blue)

Veilnui Simplog (blue) [作者: veilnui]


Veilnui Simplog (brown)

Veilnui Simplog (brown) [作者: veilnui]


Veilnui Simplog (deep purple)

Veilnui Simplog (deep purple) [作者: veilnui]


Veilnui Simplog (green)

Veilnui Simplog (green) [作者: veilnui]


Veilnui Simplog (indigo)

Veilnui Simplog (indigo) [作者: veilnui]


Veilnui Simplog (orange)

Veilnui Simplog (orange) [作者: veilnui]


Veilnui Simplog (pink)

Veilnui Simplog (pink) [作者: veilnui]


Veilnui Simplog (red)

Veilnui Simplog (red) [作者: veilnui]


Veilnui Simplog (teal)

Veilnui Simplog (teal) [作者: veilnui]


Momoon(アクア)

Momoon(アクア) [作者: タイジーWP]


Momoon(グリーン)

Momoon(グリーン) [作者: タイジーWP]


Momoon(オレンジ)

Momoon(オレンジ) [作者: タイジーWP]


Momoon(ピンク)

Momoon(ピンク) [作者: タイジーWP]


Momoon(パープル)

Momoon(パープル) [作者: タイジーWP]


tecurio earth

tecurio earth [作者: 風塵(ふーじん)]


tecurio grape

tecurio grape [作者: 風塵(ふーじん)]


tecurio lime

tecurio lime [作者: 風塵(ふーじん)]


tecurio mango

tecurio mango [作者: 風塵(ふーじん)]


tecurio moon

tecurio moon [作者: 風塵(ふーじん)]


tecurio peach

tecurio peach [作者: 風塵(ふーじん)]


tecurio sky

tecurio sky [作者: 風塵(ふーじん)]


tecurio soil

tecurio soil [作者: 風塵(ふーじん)]


tecurio sunset

tecurio sunset [作者: 風塵(ふーじん)]


Season (Spring)

Season (Spring) [作者: ぽんひろ]


Season (Summer)

Season (Summer) [作者: ぽんひろ]


Season (Autumn)

Season (Autumn) [作者: ぽんひろ]


Season (Winter)

Season (Winter) [作者: ぽんひろ]


COLORS(イエロー)

COLORS(イエロー) [作者: わいひら]


COLORS(グリーン)

COLORS(グリーン) [作者: わいひら]


COLORS(ピンク)

COLORS(ピンク) [作者: わいひら]


COLORS(ブラック)

COLORS(ブラック) [作者: わいひら]


COLORS(ブルー)

COLORS(ブルー) [作者: わいひら]


COLORS(レッド)

COLORS(レッド) [作者: わいひら]


Like Simplicity

Like Simplicity [作者: わいひら]


モダンブラック

モダンブラック [作者: アオイ]


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

Fuwari -御召茶(おめしちゃ)- [作者: アオイ]


Fuwari -海松茶(みるちゃ)

Fuwari -海松茶(みるちゃ)- [作者: アオイ]


Fuwari -海老茶(えびちゃ)

Fuwari -海老茶(えびちゃ)- [作者: アオイ]


Fuwari -褐色(かちいろ)-

Fuwari -褐色(かちいろ)- [作者: アオイ]


Bizarre-food(グリーンソバ)

Bizarre-food(グリーンソバ) [作者: takasaki]


Bizarre-food(ピンクワイン)

Bizarre-food(ピンクワイン) [作者: takasaki]


Bizarre-food(ブラックバーガー)

Bizarre-food(ブラックバーガー) [作者: takasaki]


Bizarre-food(ブルーカレー)

Bizarre-food(ブルーカレー) [作者: takasaki]


Bizarre-food(ホワイトラーメン)

Bizarre-food(ホワイトラーメン) [作者: takasaki]


旅カメラ

旅カメラ [作者: がんちゃん]


おでかけピンク

おでかけピンク [作者: がんちゃん]


おでかけブルー

おでかけブルー [作者: がんちゃん]


おでかけレモン

おでかけレモン [作者: がんちゃん]


いつものコーヒー

いつものコーヒー [作者: がんちゃん]


いつものローズ

いつものローズ [作者: がんちゃん]


いつもの深海

いつもの深海 [作者: がんちゃん]


m-sora

m-sora [作者: marine]


m-tomato

m-tomato [作者: marine]


Hygiene

Hygiene [作者: ハイジ]


ドット・レイニーブルー

ドット・レイニーブルー [作者: をまつ]


ドット・ワインレッド

ドット・ワインレッド [作者: をまつ]


ほんわかライトニング

ほんわかライトニング [作者: ライトニング]


Metal Styles

Metal Styles [作者: まとめたる]


スキンからオプション変更サンプル(CSV)

スキンからオプション変更サンプル(CSV) [作者: わいひら]


スキンからオプション変更サンプル(JSON)

スキンからオプション変更サンプル(JSON) [作者: わいひら]


スキンからオプション変更サンプル(PHP)

スキンからオプション変更サンプル(PHP) [作者: わいひら]


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

[Child]スキンテンプレート [作者: わいひら]


スキンテンプレート

スキンテンプレート [作者: わいひら]


まとめ

Cocoonテーマはスキンの種類が多過ぎて迷ってしまいます。また、設定する箇所も多くて難しそうですが、利用者が多くWeb上にCocoonに関する情報が豊富な点はメリットです。
デメリットはSSL化しないとスキンが利用できない点です。最初にXAMPPのローカル環境にインストールしてみたのですが、SSL化されていないためスキンが反映されませんでした。結局、SSL化しているレンタルサーバーで使っています。
私が使っているレンタルサーバー『ConoHa(コノハ)』では、WordPressをインストールする時に「Cocoonテーマ」を選択できますので、テーマのインストールは必要ありませんでした。


以上、Cocoonテーマのスキンの設定とスキンの種類について解説しました。