こんにちは、まちゃりさです。
Cocoon（コクーン）でサイト外装をボタン1つで変えることができる「スキン」、活用していますか？
今回の記事では、Cocoonユーザ向けに「スキン」の一覧と使用ユーザさんの評判について紹介します。
あわせて、「スキン」の設定方法も画像付きでご紹介します。
本記事は、このような方におすすめです！
- Cocoonのスキンって何？
- Cocoonのスキンの設定方法を知りたい！
- Cocoonのスキン一覧を比較し、サイトイメージに合うデザインを選びたい！
- Cocoonのスキンごとのおすすめポイントを知りたい！
今回の記事で、サイトイメージに合ったスキンを見つけ、色々試してみてください！
それでは、どうぞ！
＼ブログに関するまとめ記事はこちら／
Cocoonのスキンとは？
Cocoonのスキンって一体なに？
という方のために、最初にスキンについてご紹介します。
Cocoonの「スキン」とは？
ブログの外観を着せ替えることができる機能です。
ブログの外観のアレンジには、本来ならCSSなどの知識が必要です。
しかし、スキンを使えば、簡単に外観を変更することができます。
Cocoonでは、たくさんの種類のスキンが用意されています。
ぜひ、ブログサイトのイメージに合ったスキンを選んで設定してみてください！
Cocoonのスキン一覧と評判
今回、TwitterでCocoonを使用されている方にご協力をいただきました。
【Cocoonユーザさんへ】ご依頼です。
— まちゃりさ💁♀️気まぐれテキトー🐱 (@macharisa_blog) August 28, 2021
スキン別のおすすめポイントをまとめたような記事を作れればいいなと考えてます。
以下3点をリプで記述いただければ、当記事で紹介させていただきます。
❶使用しているスキン
❷スキンの気に入ってる部分
❸スキンで不足している部分(この機能が欲しいなど)
ここからは、
- Cocoonで使用できるスキンの一覧
- 【スキン別・使用ユーザ評価】気に入っているポイント
- 【スキン別・使用ユーザ評価】不足しているポイント
上記のポイントにそって、ご紹介していきます。
使用ユーザさんの生の声、よければ参考にしてみてください！
Cocoonスキン一覧をご紹介する前の注意点です。
上記のポイントについて、予めご了承ください。
Cocoonスキン一覧
Cocoonで使用可能なスキンの一覧です。
| スキン名 | 特徴 | 種類数 | 使用者 あり／ なし | 詳細 ページ リンク |
 モノクロ | スタイ リッシュ でシンプ ルなモノ トーン調 | １ | あり | 詳細 ページ |
 イノセ ンス | 大人かわ いい | １ | あり | 詳細 ページ |
 「アリス」 シリーズ | 「不思議 の国の アリス」 がモチ ーフ パステル カラーの デザイン | ６ | なし | 詳細 ページ |
 SILK （シルク） | 細かい 部分まで 配慮 完成度 が高い | １ | あり | 詳細 ページ |
 みる らいと | 全体的 に柔ら かい 印象 | １ | あり | 詳細 ページ |
 凸凹 （でこ ぼこ） | デコボコ とした 立体感 | １ | なし | 詳細 ページ |
 「Simple」 シリーズ | 装飾が 控えめ シンプル なデザ イン | ５ | あり | 詳細 ページ |
 カラフル ライン | 様々な色 を配色 した 綺麗な スキン | １ | なし | 詳細 ページ |
 「ダーク」 シリーズ | 暗色系の 雰囲気の ジャン ルに おすすめ | ３ | なし | 詳細 ページ |
 「ミック ス」 シリーズ | シンプル で色に こだわり | ３ | あり 人気 2位 | 詳細 ページ |
 サムライ ブルー | サッカー 日本代表 ユニホ ーム (勝色 モデル) がテーマ | １ | なし | 詳細 ページ |
 「Veilnui Simplog」 シリーズ | カラー デザイ ンが豊富 シンプル | １０ | なし | 詳細 ページ |
 「Mom oon」 シリーズ | パステル カラー シンプル | ５ | なし | 詳細 ページ |
 「tecu rio」 シリーズ | 豊富な グラデー ション | ９ | なし | 詳細 ページ |
 「Season」 シリーズ | 春夏秋冬 がコンセ プト 柔らかな デザイン | ４ | あり 人気 2位 | 詳細 ページ |
 「COLORS」 シリーズ | 戦隊 ヒーロー のレン ジャー色 6種類 | ６ | なし | 詳細 ページ |
 Like Simp licity | ワード プレス テーマ 「Simpli city」 の見た目 に似た デザイン | １ | なし | 詳細 ページ |
 モダン ブラック | モノクロ でシック なデザ イン | １ | なし | 詳細 ページ |
 「Fuwari」 シリーズ | 日本の 伝統色 （和色） がベース | ４ | なし | 詳細 ページ |
 「Bizarre -food」 シリーズ | 奇妙な 食べ物 がコン セプト | ５ | あり 人気 1位 | 詳細 ページ |
 旅カメラ | 旅ブログ 向け のコン セプト | １ | なし | 詳細 ページ |
 「おでか け」 シリーズ | 春のおで かけが テーマ | ３ | なし | 詳細 ページ |
 「いつ もの」 シリーズ | 背景 デザイン 付きの スキン | ３ | なし | 詳細 ページ |
 「m-」 シリーズ | 背景が 牧歌的 な空の 絵 | ２ | なし | 詳細 ページ |
 Hygiene | 青と ピンクの グラデー ション が基調 | １ | なし | 詳細 ページ |
 「ドット」 シリーズ | ドット 背景柄 のスキン | ２ | なし | 詳細 ページ |
 ほんわか ライト ニング | 優しい デザイン が特徴 | １ | なし | 詳細 ページ |
 Metal Styles | 1カラム シンプル なスキン | １ | なし | 詳細 ページ |
Cocoonスキン一覧（画像）
気になったイメージ画像をクリックすると、該当のスキンの説明記事にジャンプします。（※別記事）
●「モノクロ」～「ミックス」シリーズまで
●「サムライブルー」～「Bizarre-food」シリーズまで
●「旅カメラ」～「Metal Styles」シリーズまで
Cocoonスキンの設定・変更方法
ここからは、【Cocoonスキンを設定・変更したい】場合のやり方をご紹介します。
設定手順は、次の4ステップです。
- バックアップ
- ワードプレス管理画面→「Cocoon設定」→「スキン」をクリック
- 設定したいスキン名の左にある白丸をクリック
- 黒丸が表示されたら、「変更をまとめて保存」をクリック
手順は簡単！すぐに変更できます！
手順１．バックアップ
最初に行うのは、バックアップです。
スキンを変更しても特に問題ありませんが、万が一不具合があったときのために、実施しておきます。
バックアップ時はプラグインを使用するのが簡単でおすすめです。
私は、「UpdraftPlus Backup」を使用して、自動で定期的にバックアップデータを取得するようにしています。
※本記事では、詳細な説明は割愛します。
手順２．「Cocoon設定」→「スキン」をクリック
次に、ワードプレス管理画面から「Cocoon設定」→「スキン」をクリックします。
手順３．設定したいスキン名の左にある白丸をクリック
設定したいスキンを選びます。
写真のマークにカーソルをかざすと、イメージを確認できます。
スキン名の左にある、白丸をクリックします。
設定したいスキンが見つからないときは？
画面下部の「表示スキン」から、「全てのスキンを表示」にチェックを入れてみてください。
手順４．「変更をまとめて保存」をクリック
選択したスキンの横に黒丸が表示されれば、「変更をまとめて保存」をクリックします。
これでスキンの設定は完了！実際の画面で表示を確認してみましょう。
スキン変更時の注意点
スキンを変更するときの注意点です。
スキンの変更により、デザインが大きく変わることがあります。
過去に何度かスキンを変更してきた私が、気付いたポイントについてご紹介します。
スキンによって制御方法が変わっています。これまでにできていたことが、できなくなったりするので注意！Twitterでは「スキン制御が嫌」という理由から、スキンを使用していないという声もありました。
- テーマカラー
- 目次の階層表示（数字）
- HTMLのコピー機能
- ブログカード
- 表
- 案内ボックス、アイコンボックスなど
スキン変更後は、上記のような項目の表示をチェックすることをお忘れなく。
まとめ：Cocoonスキンでサイトをおしゃれに着せ替え！
いかがでしたか？
今回は、 Cocoonスキンの一覧と使用ユーザさんの評判について紹介しました。
合わせて、スキンの設定方法や注意点もご紹介しました。
Cocoonのスキンを使えば、簡単にブログサイトの外観を着せ替えできます。
これは、Cocoonならではの魅力です！
「無料」で、「ボタン1つ」で、「誰でも簡単に」サイトのデザインを変更できるのは、本当にすごい！
実は、気分で即外装を変えられる「スキン」の機能。有料サイトにはないと聞きました！
ぜひ、サイトのデザインを「スキン」でおしゃれに着せ替えしてみてください！
以上、最後まで記事を読んでいただきありがとうございました。
最後に、本記事を執筆するにあたって、ご協力いただいたすべてのTwitterフォロワーさんに感謝します。
＼Cocoonやワードプレスに関すること／
コメント