MENU

当ブログ愛用のWordPressテーマ

広告

＼乗り換え先おすすめテーマ！／

SWELL公式サイトを見る ＞

／ブロガーとして本格的に取り組む＼

SWELLの評判レビュー記事
【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判...

✔優秀なデザイン性 ✔最新のSEO ✔サイト高速化に対応｜WordPressテーマ「SWELL」の評判・口コミ・感想レビューはこちら >>

SWELLの口コミ・評判・レビューはこちら >>

クリック

タップ

  1. ホーム
  2. ブログ
  3. Cocoon
  4. 【110種類】Cocoonスキン一覧｜おすすめと3つの選ぶポイントを紹介

【110種類】Cocoonスキン一覧｜おすすめと3つの選ぶポイントを紹介

広告
Cocoon

「スキン選びってどうやるの？」

「スキンのデザインを一覧で見たい…」

「おすすめのスキンを教えて」

この記事ではそんな方に向けて、Cocoonでスキン一覧とおすすめのスキンを解説します。

かめコンパス

こんにちは、かめコンパスです！

本記事の内容

＼読みたい箇所をクリック／

スキンとは…サイトデザインを変更できる機能のこと

この記事を読めば、あなたも簡単に

  • おすすめのスキンが分かる
  • すべてのスキンを一覧で確認できる
  • スキン選びを失敗しない

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、気に入ったおしゃれなデザインでサイト運営できています。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

あわせて読みたい
【Cocoon】使い方と初期設定を初心者向けに解説【WordPressテーマ】 「Cocoonの使い方が知りたい」 「Cocoonで行うべき初期設定は？」 「ブログ初心者でも分かりやすく説明してほしい」 この記事では、そんな方に向けて、WordPressテーマ…

本記事はWordPressテーマ「」で作成しているので、デザインが抜群にオシャレです！

当ブログ愛用のWordPressテーマ

＼もっと早く乗り換えればよかった…／

SWELL公式サイトはこちら ＞

使い心地バツグン、高機能でオシャレ！

URL：

>>CocoonとSWELLの比較｜デザイン・SEO・稼ぎやすさなど計9項目で比較

>>【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ

目次

Cocoonおすすめスキン｜3つの選ぶポイント別で紹介

Cocoonにはスキンが100種類以上あり、どのスキンを選んでいいのか悩む方もいるでしょう。

最初のスキン選びに失敗すると、のちに後悔することも出てきます。

かめコンパス

私も始めのスキン選びに1回失敗しましたｗ

そこでスキンを選ぶ際に、必ずチェックしておきたい「3つのおすすめポイント」を紹介します。

かめコンパス

自分の中でどのポイントを重要視するのか優先順位を決めるといいね！

個人的にスキンを選ぶおすすめの優先順位は以下のとおり…

  • デザイン
  • カスタマイズしやすさ
  • スキンの変更しやすさ

それぞれのおすすめポイントを詳しく解説します。

Cocoon公式サイトではよく閲覧されているスキンをランキング順で紹介されています。

公式サイト：スキンページ閲覧ランキング（1ヶ月集計結果）

①：デザインで選ぶ

サイトを運営する中でデザインは非常に重要な要素です。

  • 自分好みのデザインか？
  • サイトのデザインと紹介する商品やサービスがマッチしているか？
  • ターゲットユーザーが好みそうなデザインか？
  • どういうブランドカラーを形成したいか？

などを考える必要があります。

かめコンパス

ブログ初心者は自分好みのデザインで選ぶといいよ

Cocoonのスキンを“デザイン”で選ぶメリットとデメリットは以下のとおりです。

メリット
  • 自分好みのデザインを選べる
  • スキン選びに迷っている人の分かりやすい指標である
  • ユーザーや紹介するサービスと相性が良ければ購買意欲の向上につながる
デメリット
  • カスタマイズできない項目がある
  • 人気のデザインは他サイトと被りやすい
  • 今後スキンを変更するとデザインが崩れる可能性がある

以下の表は、私がCocoonのスキン110種類をすべて確認し、その中でデザインが良かったおすすめスキンを4つに絞って一覧でまとめたものです。

スキン名特徴レイアウト
grayish画像フルスクリーン表示デザインを見る
イノセンス大人かわいいデザインを見る
てがきノート親近感のあるデザインを見る
Fuwari和の雰囲気デザインを見る
かめコンパス

当ブログは「イノセンス」を使ってるよ！

現在はWordPressテーマ「SWELL」を利用しているのでデザインは異なります。

②：カスタマイズしやすさで選ぶ

ブログ始めたての頃は気にする必要はありませんが、ある程度ブログの執筆が上達してくると、

  • 目次の表示を変えたい
  • ヘッダーの色を変えたい
  • アイキャッチ画像を表示したい

など細かくカスタマイズしたいという欲求が出てきます。

ただ、スキンによってはスキン制御によりカスタマイズできず、あきらめないといけない場合もあります。

スキン制御とは…サイト内の細かな設定変更が制限されること

Cocoonでスキン制御されている項目の例
かめコンパス

私も初めはデザイン重視で選んでたけど、スキン制御により設定できない項目があってスキンを選び直した経験があるよ

Cocoonのスキンを“カスタマイズしやすさ”で選ぶメリットとデメリットは以下のとおりです。

メリット
  • カスタマイズの自由度が増す
  • 自分好みにブログ設計できる
  • カスタマイズで他サイトと差別化できる
デメリット
  • 好きなデザインを選べない
  • 不要・必要な設定の変更ができない
  • 今後スキンを変更しにくい

以下の表は、私がCocoonのスキン110種類をすべて確認し、その中でスキン制御の項目がないスキンを一覧でまとめたものです。

スキン名スキン制御の数レイアウト
one0デザインを見る ∨
Simple-Darkmode0デザインを見る ∨
Natural0デザインを見る ∨
Simple0デザインを見る ∨
モノクロ0デザインを見る ∨
カラフルライン0デザインを見る ∨
ミックス0デザインを見る ∨
サムライブルー0デザインを見る ∨
Momoon0デザインを見る ∨
Fuwari0デザインを見る ∨
旅カメラ0デザインを見る ∨
いつもの0デザインを見る ∨
m-0デザインを見る ∨
ドット0デザインを見る ∨
ほんわかライトニング0デザインを見る ∨
Metal Styles0デザインを見る ∨
スキンテンプレート0デザインを見る ∨
ふわっと追加0デザインを見る ∨
ゆっくり色が変化0デザインを見る ∨

※スキン制御の項目数については今後変わる可能性があります。最新の情報をお届けできるよう努めていますが、古い情報のままの可能性があることを何卒ご理解いただければ幸いです。

かめコンパス

スキン制御がなければ今後カスタマイズできない…ということがなくなるよ

上の表ではスキン制御がないスキンをまとめましたが、「この項目だったらスキン制御されてても気にしない」ということもあります。

ですので、今後カスタマイズする可能性の低い項目がスキン制御されているスキンも選択肢の1つに入れることもおすすめですよ。

Cocoonでスキン制御されている項目については、下の記事で詳しく解説していますのであわせてご覧ください。

Cocoonのスキン制御を解除する方法｜初心者向けにスキン制御の有無も一覧で紹介

③：スキンの変更しやすさで選ぶ

最初のスキン選びを間違えたり、サイトの雰囲気を変えたいと思った場合のことも考え、変更しやすいスキンを選ぶことも重要です。

変更しやすいスキンとは、同じ作者で種類が多いスキンになります。

Cocoonで同種類のスキンの例

変更したい場合は、同種類のスキン同士で変更しましょう。

かめコンパス

スキン選びに迷ったら、のちに変更しやすいスキンを選ぶのもおすすめだよ！

Cocoonのスキンを“スキンの変更しやすさ”で選ぶメリットとデメリットは以下のとおりです。

メリット
  • 好きなタイミングでスキンを変更できる
  • 選べるスキンの選択肢が多い
  • サイトデザインを崩さずスキンを変更できる
デメリット
  • 好きなデザインを選べない
  • カスタマイズできない項目がある
  • スキンの変更前後であまりデザインが変わらない

以下の表は、私がCocoonのスキン110種類をすべて確認し、Cocoonでスキンの種類が多い順に一覧でまとめたものです。

かめコンパス

２種類以上あるスキンのみを一覧でまとめているよ

スキン名種類の数レイアウト
Veilnui Simplog17デザインを見る ∨
tecurio9デザインを見る ∨
COLORS6デザインを見る ∨
アリス6デザインを見る ∨
てがきノート5デザインを見る ∨
Simple5デザインを見る ∨
Momoon5デザインを見る ∨
Bizarre-food5デザインを見る ∨
Season4デザインを見る ∨
Fuwari4デザインを見る ∨
ダーク3デザインを見る ∨
ミックス3デザインを見る ∨
おでかけ3デザインを見る ∨
いつもの3デザインを見る ∨
スキンからオプション変更サンプル3デザインを見る ∨
Simple-Darkmode2デザインを見る ∨
Natural2デザインを見る ∨
サムライブルー2デザインを見る ∨
m-2デザインを見る ∨
ドット2デザインを見る ∨
スキンテンプレート2デザインを見る ∨
かめコンパス

スキンの種類が多いほど、のちに変更しやすくなるよ！

Cocoonスキン一覧【110種類】

Cocoonで設定できるスキン110種類を一覧にしてまとめました。

※下のリンクをクリックすると見たいスキンへジャンプします。

それぞれ詳しく解説します。

かめコンパス

PC/スマホでの見え方をそれぞれチェックしてね！

Cocoon公式サイトでも以下のページでスキンを確認できるので、あわせてご覧ください。

右サイドバーにある「スキン動作デモ」でデザインスキンを選択すると確認できます。

なし

PC・スマホ画面で見たスキン「なし」
スキン名なし
作者ー
レイアウト一覧≫ Cocoon公式サイトへ

grayish

PC・スマホ画面で見たスキン「grayish」
スキン名grayish
作者Na2factoryさん
レイアウト一覧≫ Cocoon公式サイトへ

SILK(シルク)

PC・スマホ画面で見たスキン「SILK（シルク）」
スキン名SILK（シルク）
作者ろこさん
レイアウト一覧≫ Cocoon公式サイトへ

みるらいと

PC・スマホ画面で見たスキン「みるらいと」
スキン名みるらいと
作者みるみさん
レイアウト一覧≫ Cocoon公式サイトへ

イノセンス

PC・スマホ画面で見たスキン「イノセンス」
スキン名イノセンス
作者おはようポテトさん
レイアウト一覧≫ Cocoon公式サイトへ

COLORS

PC・スマホ画面で見たスキン「COLORS（イエロー）」
COLORS（イエロー）
PC・スマホ画面で見たスキン「COLORS（グリーン）」
COLORS（グリーン）
PC・スマホ画面で見たスキン「COLORS（ピンク）」
COLORS（ピンク）
PC・スマホ画面で見たスキン「COLORS（ブラック）」
COLORS（ブラック）
PC・スマホ画面で見たスキン「COLORS（ブルー）」
COLORS（ブルー）
PC・スマホ画面で見たスキン「COLORS（レッド）」
COLORS（レッド）
スキン名COLORS
作者わいひらさん
レイアウト一覧≫ Cocoon公式サイトへ

Like Simplicity

PC・スマホ画面で見たスキン「Like Simplicity」
スキン名Like Simplicity
作者わいひらさん
レイアウト一覧≫ Cocoon公式サイトへ

てがきノート

PC・スマホ画面で見たスキン「てがきノート(ブルーコーラル)」
てがきノート（ブルーコーラル）
PC・スマホ画面で見たスキン「てがきノート(グリーンオレンジ)」
てがきノート（グリーンオレンジ）
PC・スマホ画面で見たスキン「てがきノート(ピンクレモン)」
てがきノート（ピンクレモン）
PC・スマホ画面で見たスキン「てがきノート(ホワイトバナナ)」
てがきノート（ホワイトバナナ）
PC・スマホ画面で見たスキン「てがきノート(ダークスカイ)」
てがきノート（ダークスカイ）
スキン名てがきノート
作者ゆうそうとさん
レイアウト一覧≫ Cocoon公式サイトへ

Season

PC・スマホ画面で見たスキン「Season (Spring)」
Season（Spring）
PC・スマホ画面で見たスキン「Season (Summer)」
Season（Summer）
PC・スマホ画面で見たスキン「Season (Autumn)」
Season（Autumn）
PC・スマホ画面で見たスキン「Season (Winter)」
Season（Winter）
スキン名Season
作者ぽんひろさん
レイアウト一覧≫ Cocoon公式サイトへ

モダンブラック

PC・スマホ画面で見たスキン「モダンブラック」
スキン名モダンブラック
作者アオイさん
レイアウト一覧≫ Cocoon公式サイトへ

Fuwari

PC・スマホ画面で見たスキン「Fuwari -御召茶(おめしちゃ)-」
Fuwari-御召茶（おめしちゃ）-
PC・スマホ画面で見たスキン「Fuwari -海松茶(みるちゃ)-」
Fuwari-海松茶（みるちゃ）-
PC・スマホ画面で見たスキン「Fuwari -海老茶(えびちゃ)-」
Fuwari-海老茶（えびちゃ）-
PC・スマホ画面で見たスキン「Fuwari -褐色(かちいろ)-」
Fuwari-褐色（かちいろ）-
スキン名Fuwari
作者アオイさん
レイアウト一覧≫ Cocoon公式サイトへ

one

PC・スマホ画面で見たスキン「one」
スキン名one
作者haijiさん
レイアウト一覧≫ Cocoon公式サイトへ

Simple-Darkmode

PC・スマホ画面で見たスキン「Simple‐Darkmode」
Simple-Darkmode
PC・スマホ画面で見たスキン「Simple‐Darkmode Always（常時ダークモード）」
Simple-Darkmode Always（常時ダークモード）
スキン名Simple-Darkmode
作者Hirositeさん
レイアウト一覧≫ Cocoon公式サイトへ

Hygiene

PC・スマホ画面で見たスキン「Hygiene」
スキン名Hygiene
作者ハイジさん
レイアウト一覧≫ Cocoon公式サイトへ

Natural

PC・スマホ画面で見たスキン「Natural（ブルー）」
Natural（ブルー）
PC・スマホ画面で見たスキン「Natural（グリーン）」
Natural（グリーン）
スキン名Natural
作者Takaさん
レイアウト一覧≫ Cocoon公式サイトへ

Simple

PC・スマホ画面で見たスキン「Simple-Blue」
Simple Blue
PC・スマホ画面で見たスキン「Simple-Green」
Simple Green
PC・スマホ画面で見たスキン「Simple-Navy」
Simple Navy
PC・スマホ画面で見たスキン「Simple-Pink」
Simple Pink
PC・スマホ画面で見たスキン「Simple-red」
Simple-red
スキン名Simple
作者Takaさん
レイアウト一覧≫ Cocoon公式サイトへ

モノクロ

PC・スマホ画面で見たスキン「モノクロ」
スキン名モノクロ
作者yurukei20さん
レイアウト一覧≫ Cocoon公式サイトへ

アリス

PC・スマホ画面で見たスキン「アリス（無印）」
アリス（無印）
PC・スマホ画面で見たスキン「アリス（チェシャ猫）」
アリス（チェシャ猫）
PC・スマホ画面で見たスキン「アリス（白ウサギ）」
アリス（白ウサギ）
PC・スマホ画面で見たスキン「アリス（ユニコーン）」
アリス（ユニコーン）
PC・スマホ画面で見たスキン「アリス（ローズ）」
アリス（ローズ）
PC・スマホ画面で見たスキン「アリス（ビタミン）」
アリス（ビタミン）
スキン名アリス
作者Yuhomyanさん
レイアウト一覧≫ Cocoon公式サイトへ

カラフルライン

PC・スマホ画面で見たスキン「カラフルライン」
スキン名カラフルライン
作者y.hiroakiさん
レイアウト一覧≫ Cocoon公式サイトへ

ダーク

PC・スマホ画面で見たスキン「ダークエンジ」
ダークエンジ
PC・スマホ画面で見たスキン「ダークカモノハ」
ダークカモノハ
PC・スマホ画面で見たスキン「ダークルリ」
ダークルリ
スキン名ダーク
作者y.hiroakiさん
レイアウト一覧≫ Cocoon公式サイトへ

ミックス

PC・スマホ画面で見たスキン「ミックスグリーン」
ミックスグリーン
PC・スマホ画面で見たスキン「ミックスブルー」
ミックスブルー
PC・スマホ画面で見たスキン「ミックスレッド」
ミックスレッド
スキン名ミックス
作者y.hiroakiさん
レイアウト一覧≫ Cocoon公式サイトへ

サムライブルー

PC・スマホ画面で見たスキン「サムライブルー（勝色）」
サムライブルー（勝色）
PC・スマホ画面で見たスキン「サムライブルー（無印）」
サムライブルー（無印）
スキン名サムライブルー
作者y.hiroakiさん
レイアウト一覧≫ Cocoon公式サイトへ（勝色）
≫ Cocoon公式サイトへ（無印）

Veilnui Simplog

PC・スマホ画面で見たスキン「Veilnui Simplog (amber)」
Veilnui Simplog（amber）
PC・スマホ画面で見たスキン「Veilnui-Simplog-blue」
Veilnui Simplog（blue）
PC・スマホ画面で見たスキン「Veilnui-Simplog-brown」
Veilnui Simplog（brown）
PC・スマホ画面で見たスキン「Veilnui-Simplog-cyan」
Veilnui Simplog（cyan）
PC・スマホ画面で見たスキン「Veilnui-Simplog-deep-orange」
Veilnui Simplog（deep orange）
PC・スマホ画面で見たスキン「Veilnui-Simplog-deep-purple」
Veilnui Simplog（deep purple）
PC・スマホ画面で見たスキン「Veilnui-Simplog-green」
Veilnui Simplog（green）
PC・スマホ画面で見たスキン「Veilnui-Simplog-indigo」
Veilnui Simplog（indigo）
PC・スマホ画面で見たスキン「Veilnui-Simplog-light-blue」
Veilnui Simplog（light blue）
PC・スマホ画面で見たスキン「Veilnui-Simplog-light-green」
Veilnui Simplog（light green）
PC・スマホ画面で見たスキン「Veilnui-Simplog-lime」
Veilnui Simplog（lime）
PC・スマホ画面で見たスキン「Veilnui-Simplog-orange」
Veilnui Simplog（orange）
PC・スマホ画面で見たスキン「Veilnui-Simplog-pink」
Veilnui Simplog（pink）
PC・スマホ画面で見たスキン「Veilnui-Simplog-purple」
Veilnui Simplog（purple）
PC・スマホ画面で見たスキン「Veilnui-Simplog-red」
Veilnui Simplog（red）
PC・スマホ画面で見たスキン「Veilnui-Simplog-teal」
Veilnui Simplog（teal）
PC・スマホ画面で見たスキン「Veilnui-Simplog-yellow」
Veilnui Simplog（yellow）
スキン名Veilnui Simplog
作者veilnuiさん
レイアウト一覧≫ Cocoon公式サイトへ

Momoon

PC・スマホ画面で見たスキン「Momoon（アクア）」
Momoon（アクア）
PC・スマホ画面で見たスキン「Momoon（グリーン）」
Momoon（グリーン）
PC・スマホ画面で見たスキン「Momoon（オレンジ）」
Momoon（オレンジ）
PC・スマホ画面で見たスキン「Momoon（ピンク）」
Momoon（ピンク）
PC・スマホ画面で見たスキン「Momoon（パープル）」
Momoon（パープル）
スキン名Momoon
作者タイジーWPさん
レイアウト一覧≫ Cocoon公式サイトへ

tecurio

PC・スマホ画面で見たスキン「tecurio earth」
tecurio earth
PC・スマホ画面で見たスキン「tecurio grape」
tecurio grape
PC・スマホ画面で見たスキン「tecurio lime」
tecurio lime
PC・スマホ画面で見たスキン「tecurio mango」
tecurio mango
PC・スマホ画面で見たスキン「tecurio moon」
tecurio moon
PC・スマホ画面で見たスキン「tecurio peach」
tecurio peach
PC・スマホ画面で見たスキン「tecurio sky」
tecurio sky
PC・スマホ画面で見たスキン「tecurio soil」
tecurio soil
PC・スマホ画面で見たスキン「tecurio sunset」
tecurio sunset
スキン名tecurio
作者風塵(ふーじん)さん
レイアウト一覧≫ Cocoon公式サイトへ

Bizarre-food

PC・スマホ画面で見たスキン「Bizarre-food（グリーンソバ）」
Bizarre-food（グリーンソバ）
PC・スマホ画面で見たスキン「Bizarre-food（ピンクワイン）」
Bizarre-food（ピンクワイン）
PC・スマホ画面で見たスキン「Bizarre-food（ブラックバーガー）」
Bizarre-food（ブラックバーガー）
PC・スマホ画面で見たスキン「Bizarre-food（ブルーカレー）」
Bizarre-food（ブルーカレー）
PC・スマホ画面で見たスキン「Bizarre-food（ホワイトラーメン）」
Bizarre-food（ホワイトラーメン）
スキン名Bizarre-food
作者takasakiさん
レイアウト一覧≫ Cocoon公式サイトへ

旅カメラ

PC・スマホ画面で見たスキン「旅カメラ」
スキン名旅カメラ
作者がんちゃんさん
レイアウト一覧≫ Cocoon公式サイトへ

おでかけ

PC・スマホ画面で見たスキン「おでかけピンク」
おでかけピンク
PC・スマホ画面で見たスキン「おでかけブルー」
おでかけブルー
PC・スマホ画面で見たスキン「おでかけレモン」
おでかけレモン
スキン名おでかけ
作者がんちゃんさん
レイアウト一覧≫ Cocoon公式サイトへ

いつもの

PC・スマホ画面で見たスキン「いつものコーヒー」
いつものコーヒー
PC・スマホ画面で見たスキン「いつものローズ」
いつものローズ
PC・スマホ画面で見たスキン「いつもの深海」
いつもの深海
スキン名いつもの
作者がんちゃんさん
レイアウト一覧≫ Cocoon公式サイトへ

m-

PC・スマホ画面で見たスキン「m-sora」
m-sora
PC・スマホ画面で見たスキン「m-tomato」
m-tomato
スキン名m-
作者marineさん
レイアウト一覧≫ Cocoon公式サイトへ

ドット

PC・スマホ画面で見たスキン「ドット・レイニーブルー」
ドット・レイニーブルー
PC・スマホ画面で見たスキン「ドット・ワインレッド」
ドット・ワインレッド
スキン名ドット
作者をまつさん
レイアウト一覧≫ Cocoon公式サイトへ

ほんわかライトニング

PC・スマホ画面で見たスキン「ほんわかライトニング」
スキン名ほんわかライトニング
作者ライトニングさん
レイアウト一覧≫ Cocoon公式サイトへ

Metal Styles

PC・スマホ画面で見たスキン「Metal Styles」
スキン名Metal Styles
作者まとめたるさん
レイアウト一覧≫ Cocoon公式サイトへ

凸凹

PC・スマホ画面で見たスキン「凸凹」
スキン名凸凹
作者北さん
レイアウト一覧≫ Cocoon公式サイトへ

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

PC・スマホ画面で見たスキン「スキンからオプション変更サンプル（CSV）」
スキンからオプション変更サンプル（CSV）
PC・スマホ画面で見たスキン「スキンからオプション変更サンプル（JSON）」
スキンからオプション変更サンプル（JSON）
PC・スマホ画面で見たスキン「スキンからオプション変更サンプル（PHP）」
スキンからオプション変更サンプル（PHP）
スキン名スキンからオプション変更サンプル
作者わいひらさん

スキンテンプレート

PC・スマホ画面で見たスキン「[Child]スキンテンプレート」
[Child]スキンテンプレート
PC・スマホ画面で見たスキン「スキンテンプレート」
スキンテンプレート
スキン名スキンテンプレート
作者わいひらさん

ふわっと追加

PC・スマホ画面で見たスキン「ふわっと追加」
スキン名ふわっと追加
作者らくさん
レイアウト一覧≫ Cocoon公式サイトへ

ゆっくり色が変化

PC・スマホ画面で見たスキン「ゆっくり色が変化」
スキン名ゆっくり色が変化
作者らくさん
レイアウト一覧≫ Cocoon公式サイトへ

Cocoonスキン設定と変更後に確認すべき2つの項目

Cocoonでスキンを決めたら、新しいスキンに変更しましょう。

STEP

WordPress管理画面で、Cocoon設定⇒スキンの順にクリックする

Cocoonのスキンを変更する手順-1
STEP

スキン一覧から別のスキンに変更する

Cocoonのスキンを変更する手順-2
STEP

変更をまとめて保存をクリックする

Cocoonのスキンを変更する手順-3

これでスキンを変更できます。

スキンを変更し直したら、以下の2項目を確認することをおすすめですよ。

  • サイト全体・見出し・目次・Cocoon専用ブロックのデザイン
  • Cocoon設定でスキン制御されている項目
サイト全体・見出し・目次・Cocoon専用ブロックのデザインの例
Cocoonでスキン制御されている項目の例

WordPress管理画面の左サイドバーにあるCocoon設定からスキン制御を確認できます。

かめコンパス

気になる箇所があればスキンを選び直してね

当ブログ愛用「SWELL」のデザインは洗練されていてオシャレ！

WordPressテーマ「SWELL」には以下6種類のデモサイトデータがあり、Cocoonのスキンみたいにデザインを着せ替えできます。

SWELL公式サイトで公開されているデモサイト01
画像引用：SWELL DEMO 01
SWELL公式サイトで公開されているデモサイト02
画像引用：SWELL DEMO 02
SWELL公式サイトで公開されているデモサイト03
画像引用：SWELL DEMO 03
SWELL公式サイトで公開されているデモサイト04
画像引用：SWELL DEMO 04
SWELL公式サイトで公開されているデモサイト05
画像引用：SWELL DEMO 05
SWELL公式サイトで公開されているデモサイト06
画像引用：SWELL DEMO 06

公式：SWELLのデモサイト一覧

かめコンパス

どれもデザインがおしゃれだね

さらに、SWELLオリジナルブロックを使ってサイト型トップページを作成することもできます。

サイト型トップページとは…目的や好みに合わせて記事やコンテンツが配置されたトップページ

before / ブログ型

当ブログのブログ型トップページの例-1
当ブログのブログ型トップページの例-2
当ブログのブログ型トップページの例-3
当ブログのブログ型トップページの例-4

after / サイト型

当ブログのサイト型トップページの例-1
当ブログのサイト型トップページの例-2
当ブログのサイト型トップページの例-3
当ブログのサイト型トップページの例-4

>>当ブログのサイト型トップページを見る

あなたもプロのデザイナーが作ったかのような美しいサイトを作ることができます。

かめコンパス

サイトがおしゃれだと良い気分にもなるね

SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。

SWELLの購入日を示す領収書
SWELL購入日：2024/04/26
SWELLの利用を示すWordPress管理画面
SWELL利用中

Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。

Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。

引用：Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト

一流のデザイナーが作ったかのようなオシャレなサイトを作りたい方は、SWELLをチェックしてみてください。

当ブログ愛用のWordPressテーマ「SWELL」
  • プロのデザイナーが作ったかのようなオシャレなデザイン性！
  • SWELL独自のブロックエディターが優秀！
  • 専門家との提携でサイトの表示速度が圧倒的に速い！
  • 専用プラグインでSEO評価が向上！
  • 記事を書くスピードが1段階アップする！
  • 計測機能付きでアフィリエイトで稼ぎやすい！

＼Cocoonからの乗り換え先おすすめテーマ！／

＞SWELL公式サイトを詳しく見る

／サイトをよりオシャレに！＼

>>テーマ移行手順を見る(5ステップのみ！)

Cocoonスキンまとめ

今回は、Cocoonでスキン一覧とおすすめのスキンを紹介しました。

本記事のおさらい

＼読み直したい箇所をクリック／

スキン選びを終えたら、次はサイト全体の設定＝サイト設計していきましょう。

Cocoonでサイト設計できる場所

以下の記事ではCocoonで設定できる項目について解説しているので、気になる記事から読んでみてください。

ヘッダーの設定
フッターの設定
カテゴリーの設定
ブログカードの設定
おすすめカードの設定
アピールエリアの設定
アイキャッチ画像の設定
表（テーブル）の設定
目次の設定
かめコンパス

ためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです！

・　　　・　　　・

本記事はWordPressテーマ「」で作成したので、デザインが抜群にオシャレです！

当ブログ愛用のWordPressテーマ「SWELL」
  • プロのデザイナーが作ったかのようなオシャレなデザイン性！
  • SWELL独自のブロックエディターが優秀！
  • 専門家との提携でサイトの表示速度が圧倒的に速い！
  • 専用プラグインでSEO評価が向上！
  • 記事を書くスピードが1段階アップする！
  • 計測機能付きでアフィリエイトで稼ぎやすい！

＼もっと早く乗り換えればよかった…／

＞SWELL公式サイトを詳しく見る

／テーマ移行も5ステップのみ！＼

Cocoon
Cocoonでスキン一覧とおすすめのスキンの記事

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次