ここでは無料のWordPressテーマ「Cocoon(コクーン)」のスキンの設定とスキンの種類について紹介します。
目次
スキンのデザインの確認方法
Cocoonのスキンは、管理画面の [Cocoon 設定] を選択して [スキン] タブを選択するとスキン一覧が表示されます。
スキンには80以上の種類があります。デザインを確認するには、一覧のスキンタイトル左の画像アイコンにカーソルを当てるとスキンのデザインがプレビューされます。
スキンの設定
スキンの設定は一覧から設定したいスキンを選択して [変更をまとめて保存] ボタンをクリックします。
設定が保存されると、選択したスキンのプレビューが表示されます。ここでは「アリス」を設定してみました。
スキンを設定しても反映されない場合
・サイトのURLが「http://~」から始まっている場合、SSLが導入されていなためスキンが反映されないようです。SSLを導入してURLを「https://~」に必要があります。
・SSLが導入されていても反映されない場合は、[Cocoon 設定] → [キャッシュ削除] で「全てのキャッシュの削除」を実行してみてください。何度もスキンの設定を変更していたら反映されなくなり、「全てのキャッシュの削除」を実行したら直りました。
スキンの種類
スキンのプレビュー画像をキャプチャして掲載しています。スキン選択の参考にしてください。
モノクロ
イノセン
アリス
チェシャ猫(ピンク×パープル)
チェシャ猫(ピンク×パープル) [作者: Yuhomyan]
白ウサギ(白×ブルー)
SILK(シルク)
みるらいと
凸凹
Simple Blue
Simple Green
Simple Navy
Simple Pink
Simple red
カラフルライン
ダークエンジ
ダークカモノハ
ダークルリ
ミックスグリーン
ミックスブルー
ミックスレッド
サムライブルー(勝色)
サムライブルー(無印)
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(グリーン)
Momoon(オレンジ)
Momoon(ピンク)
Momoon(パープル)
tecurio earth
tecurio grape
tecurio lime
tecurio mango
tecurio moon
tecurio peach
tecurio sky
tecurio soil
tecurio sunset
Season (Spring)
Season (Summer)
Season (Autumn)
Season (Winter)
COLORS(イエロー)
COLORS(グリーン)
COLORS(ピンク)
COLORS(ブラック)
COLORS(ブルー)
COLORS(レッド)
Like Simplicity
モダンブラック
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-tomato
Hygiene
ドット・レイニーブルー
ドット・ワインレッド
ほんわかライトニング
Metal Styles
スキンからオプション変更サンプル(CSV)
スキンからオプション変更サンプル(CSV) [作者: わいひら]
スキンからオプション変更サンプル(JSON)
スキンからオプション変更サンプル(JSON) [作者: わいひら]
スキンからオプション変更サンプル(PHP)
スキンからオプション変更サンプル(PHP) [作者: わいひら]
[Child]スキンテンプレート
スキンテンプレート
まとめ
Cocoonテーマはスキンの種類が多過ぎて迷ってしまいます。また、設定する箇所も多くて難しそうですが、利用者が多くWeb上にCocoonに関する情報が豊富な点はメリットです。
デメリットはSSL化しないとスキンが利用できない点です。最初にXAMPPのローカル環境にインストールしてみたのですが、SSL化されていないためスキンが反映されませんでした。結局、SSL化しているレンタルサーバーで使っています。
私が使っているレンタルサーバー『ConoHa(コノハ)』では、WordPressをインストールする時に「Cocoonテーマ」を選択できますので、テーマのインストールは必要ありませんでした。
以上、Cocoonテーマのスキンの設定とスキンの種類について解説しました。