せいかつブログ

【Cocoon】スキンどれ選ぶ?特徴と評判をまとめてみた!

こんにちは、まちゃりさです。

Cocoon(コクーン)でサイト外装をボタン1つで変えることができる「スキン」、活用していますか?

今回の記事では、Cocoonユーザ向けに「スキン」の一覧と使用ユーザさんの評判について紹介します。

あわせて、「スキン」の設定方法も画像付きでご紹介します。

まちゃりさ
まちゃりさ

本記事は、このような方におすすめです!

  • Cocoonのスキンって何?
  • Cocoonのスキンの設定方法を知りたい!
  • Cocoonのスキン一覧を比較し、サイトイメージに合うデザインを選びたい!
  • Cocoonのスキンごとのおすすめポイントを知りたい!

今回の記事で、サイトイメージに合ったスキンを見つけ、色々試してみてください!

それでは、どうぞ!

\ブログに関するまとめ記事はこちら/

スポンサーリンク

Cocoonのスキンとは?

Cocoonのスキンって一体なに?

という方のために、最初にスキンについてご紹介します。

 

Cocoonの「スキン」とは?

ブログの外観を着せ替えることができる機能です。

ブログの外観のアレンジには、本来ならCSSなどの知識が必要です。

しかし、スキンを使えば、簡単に外観を変更することができます

Cocoonでは、たくさんの種類のスキンが用意されています。

ぜひ、ブログサイトのイメージに合ったスキンを選んで設定してみてください!

↑目次に戻る

Cocoonのスキン一覧と評判

今回、TwitterでCocoonを使用されている方にご協力をいただきました。

 

ここからは、

  • Cocoonで使用できるスキンの一覧
  • 【スキン別・使用ユーザ評価】気に入っているポイント
  • 【スキン別・使用ユーザ評価】不足しているポイント

上記のポイントにそって、ご紹介していきます。

まちゃりさ
まちゃりさ

使用ユーザさんの生の声、よければ参考にしてみてください!

 

Cocoonスキン一覧をご紹介する前の注意点です。

  • 「シリーズ」として、まとめているスキンもあります。
  • Twitterフォロワーさんの評価をいただいたスキンは「使用者あり(〇印)」にて表現しています。
  • 2021年9月2日時点のスキン一覧です。(紹介サイトのスキンに変更があった場合、リンクを削除させていただく可能性があります)
  • リンクをクリックすると、該当スキンの詳細説明にジャンプします。
  • リンクがついていないスキンは、現在作成中です。

上記のポイントについて、予めご了承ください。

 

Cocoonスキン一覧

Cocoonで使用可能なスキンの一覧です。

スキン名特徴種類数使用者
あり/
なし
詳細
ページ
リンク



モノクロ
スタイ
リッシュ
でシンプ
ルなモノ
トーン調
あり詳細
ページ


イノセ
ンス
大人かわ
いい
あり詳細
ページ


「アリス」
シリーズ
「不思議
の国の
アリス」
がモチ
ーフ

パステル
カラーの
デザイン
なし詳細
ページ


SILK
(シルク)
細かい
部分まで
配慮

完成度
が高い
あり詳細
ページ


みる
らいと
全体的
に柔ら
かい
印象
あり詳細
ページ


凸凹
(でこ
ぼこ)
デコボコ
とした
立体感
なし 詳細
ページ


「Simple」
シリーズ
装飾が
控えめ

シンプル
なデザ
イン
あり 詳細
ページ


カラフル
ライン
様々な色
を配色
した
綺麗な
スキン
なし 詳細
ページ


「ダーク」
シリーズ
暗色系の
雰囲気の
ジャン
ルに
おすすめ
なし 詳細
ページ


「ミック
ス」
シリーズ
シンプル
で色に
こだわり
あり
人気
2位
詳細
ページ


サムライ
ブルー
サッカー
日本代表
ユニホ
ーム
(勝色
モデル)
がテーマ
なし詳細
ページ


「Veilnui
Simplog」
シリーズ
カラー
デザイ
ンが豊富

シンプル
10なし 詳細
ページ


「Mom
oon」
シリーズ
パステル
カラー

シンプル
なし 詳細
ページ


「tecu
rio」
シリーズ
豊富な
グラデー
ション
 なし 詳細
ページ


「Season」
シリーズ
春夏秋冬
がコンセ
プト

柔らかな
デザイン
あり
人気
2位
詳細
ページ


「COLORS」
シリーズ
戦隊
ヒーロー
のレン
ジャー色
6種類
なし詳細
ページ


Like
Simp
licity
ワード
プレス
テーマ
Simpli
city
の見た目
に似た
デザイン
なし詳細
ページ


モダン
ブラック
モノクロ
でシック
なデザ
イン
なし 詳細
ページ


「Fuwari」
シリーズ
日本の
伝統色
(和色)
がベース
なし詳細
ページ


「Bizarre
-food」
シリーズ
奇妙な
食べ物
がコン
セプト
あり
人気
1位
詳細
ページ


旅カメラ
旅ブログ
向け
のコン
セプト
なし 詳細
ページ


「おでか
け」
シリーズ
春のおで
かけが
テーマ
なし 詳細
ページ


「いつ
もの」
シリーズ
背景
デザイン
付きの
スキン
なし詳細
ページ


「m-」
シリーズ
背景が
牧歌的
な空の
なし詳細
ページ


Hygiene
青と
ピンクの
グラデー
ション
が基調
なし詳細
ページ


「ドット」
シリーズ
ドット
背景柄
のスキン
なし詳細
ページ


ほんわか
ライト
ニング
優しい
デザイン
が特徴
なし詳細
ページ


Metal
Styles
1カラム
シンプル
なスキン
なし詳細
ページ
Cocoonスキン一覧

↑目次に戻る

↑目次に戻る

 

Cocoonスキン一覧(画像)

まちゃりさ
まちゃりさ

気になったイメージ画像をクリックすると、該当のスキンの説明記事にジャンプします。(※別記事

●「モノクロ」~「ミックス」シリーズまで

↑目次に戻る

●「サムライブルー」~「Bizarre-food」シリーズまで

●「旅カメラ」~「Metal Styles」シリーズまで

↑目次に戻る

Cocoonスキンの設定・変更方法

ここからは、【Cocoonスキンを設定・変更したい】場合のやり方をご紹介します。

設定手順は、次の4ステップです。

  1. バックアップ
  2. ワードプレス管理画面→「Cocoon設定」→「スキン」をクリック
  3. 設定したいスキン名の左にある白丸をクリック
  4. 黒丸が表示されたら、「変更をまとめて保存」をクリック
まちゃりさ
まちゃりさ

手順は簡単!すぐに変更できます!

↑目次に戻る

手順1.バックアップ

最初に行うのは、バックアップです。

まちゃりさ
まちゃりさ

スキンを変更しても特に問題ありませんが、万が一不具合があったときのために、実施しておきます。

バックアップ時はプラグインを使用するのが簡単でおすすめです。

私は、「UpdraftPlus Backup」を使用して、自動で定期的にバックアップデータを取得するようにしています。

バックアップには、プラグイン 「UpdraftPlus Backup」 が便利です。
バックアップには、プラグイン 「UpdraftPlus Backup」 が便利です。

※本記事では、詳細な説明は割愛します。

↑目次に戻る

手順2.「Cocoon設定」→「スキン」をクリック

次に、ワードプレス管理画面から「Cocoon設定」→「スキン」をクリックします。

「Cocoon設定」→「スキン」をクリック
「Cocoon設定」→「スキン」をクリック

↑目次に戻る

手順3.設定したいスキン名の左にある白丸をクリック

設定したいスキンを選びます。

写真のマークにカーソルをかざすと、イメージを確認できます。

写真のマークにカーソルをかざすと、イメージを確認できます。
写真のマークにカーソルをかざすと、イメージを確認できます。

 

スキン名の左にある、白丸をクリックします。

スキン名の左にある、白丸をクリックします。
スキン名の左にある、白丸をクリックします。

設定したいスキンが見つからないときは?

画面下部の「表示スキン」から、「全てのスキンを表示」にチェックを入れてみてください。

設定したいスキンが見つからないとき
設定したいスキンが見つからないとき

↑目次に戻る

手順4.「変更をまとめて保存」をクリック

選択したスキンの横に黒丸が表示されれば、「変更をまとめて保存」をクリックします。

選択したスキンの横に黒丸が表示される
選択したスキンの横に黒丸が表示される
「変更をまとめて保存」をクリックします。
「変更をまとめて保存」をクリックします。
まちゃりさ
まちゃりさ

これでスキンの設定は完了!実際の画面で表示を確認してみましょう。

↑目次に戻る

スキン変更時の注意点

スキンを変更するときの注意点です。

スキンの変更により、デザインが大きく変わることがあります。

過去に何度かスキンを変更してきた私が、気付いたポイントについてご紹介します。

まちゃりさ
まちゃりさ

スキンによって制御方法が変わっています。これまでにできていたことが、できなくなったりするので注意!Twitterでは「スキン制御が嫌」という理由から、スキンを使用していないという声もありました。

 

スキンの変更で変わる項目例
  • テーマカラー
  • 目次の階層表示(数字)
  • HTMLのコピー機能
  • ブログカード
  • 案内ボックス、アイコンボックスなど

スキン変更後は、上記のような項目の表示をチェックすることをお忘れなく。

↑目次に戻る

まとめ:Cocoonスキンでサイトをおしゃれに着せ替え!

いかがでしたか?

今回は、 Cocoonスキンの一覧と使用ユーザさんの評判について紹介しました。

合わせて、スキンの設定方法や注意点もご紹介しました。

 

Cocoonのスキンを使えば、簡単にブログサイトの外観を着せ替えできます。

これは、Cocoonならではの魅力です!

「無料」で、「ボタン1つ」で、「誰でも簡単に」サイトのデザインを変更できるのは、本当にすごい!

まちゃりさ
まちゃりさ

実は、気分で即外装を変えられる「スキン」の機能。有料サイトにはないと聞きました!

 

ぜひ、サイトのデザインを「スキン」でおしゃれに着せ替えしてみてください!

以上、最後まで記事を読んでいただきありがとうございました。

 

最後に、本記事を執筆するにあたって、ご協力いただいたすべてのTwitterフォロワーさんに感謝します。

 

\Cocoonやワードプレスに関すること/

↑目次に戻る

コメント

SNS

最近の投稿

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