【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい

Cocoonおすすめスキン Cocoon

本記事では、WordPressテーマCocoonを使用している方へ向けて、おすすめのスキンを4つ紹介していきます。

Cocoonのスキンはテーマに同梱どうこんされているものだけでも数十種類あって、何を選んだらいいのか悩みますよね。

私がブログを始めたときはこんなに種類は多くなかったんですが、それでも悩みましたからね。

あなたのお気に入りのスキンを見つける助けになれればと思います

それでは、スキンの概要や設定方法など基本情報をおさらいしてからおすすめスキンを見ていくことにしましょう。

▼Cocoonスキンのおさらい▼

スキン機能は”洋服を着替える感覚でサイトの外観を変更できるように”という目的で作られたデザイン変更機能です。

これにより、カスタマイズがよくわからない人やブログデザインに飽きてしまった時も簡単にデザインを変更ができるようになりました。

Cocoon設定スキンから好きなスキンを選んで変更を保存するだけでスキンの変更が完了します。

スキンの一覧まとめを確認したいという方は下のリンクからどうぞ

Cocoonおすすめスキン4選

それでは数十個あるスキンのうちから次の4つをおすすめとして紹介していきます。

  • イノセンス
  • SILK
  • Fuwari和色
  • COLORS

では具体的にどんなスキンなのか見ていきましょう。

イノセンス

▼当ブログイノセンス利用状況▼
イノセンス利用状況
スキン名イノセンス
作者おはようぽてとさん
作者様
ページ
【Cocoon】スキン「イノセンス」
を作成しました!
おすすめ
ポイント
大人可愛い居心地のいいスキン
好きな
デザイン
目次
H3見出し
シェアボタン

イノセンスは全体的に落ち着いた色を使用しており、いいかんじに知的な雰囲気を出してくれます。

▼見出しデザイン▼
▼H3が好きです▼
イノセンス見出しデザイン
▼みやすい目次▼
イノセンス目次
▼丸いシェアボタン▼
イノセンスシェアボタン

背景がタイルみたいになっていたりとほかにもチェックポイントがたくさんあります

ぜひあなたのブログでも試してみて、細部までデザインされたイノセンスを体感してみてください。

SILK(シルク)

▼当ブログシルク利用状況▼
シルク使用状況
スキン名SILK(シルク)
作者ろこさん
作者様
ページ
WordPressテーマ「Cocoon」
のカスタマイズとスキンの作り方
おすすめ
ポイント
マテリアルデザイン
の視覚的効果を取り入れたスキン
好きな
デザイン
アイコンボックス

スキンの紹介ページを見ると、たくさんカスタマイズ方法がのっていますので、Cocoonに慣れればなれるほどより自分の満足するデザインに変えていけるスキンだと思います。

スキンを入れるだけでもとてもキレイなデザインなので初心者も安心して使うことができます。

ブログカードが非常に特徴的な形になるので、シルク使いだすとシルクしか無理ってなるかもしれませんね。

▼見出しデザイン▼
シルク見出しデザイン
▼目次デザイン▼
シルク目次
▼ブログカードデザイン▼
縦型になりますね
シルクブログカード・アイコンボックス
▲アイコンボックスはとても好き▲

Fuwari和色

▼当ブログFuwari和色の御召茶適用中▼
Fuwari和色利用状況
スキン名Fuwari和色
作者アオイさん
作者様
ページ
WordPressテーマCocoonの
デザインスキン「Fuwari和色」を作りました
おすすめ
ポイント
海老茶えびちゃ海松茶みるちゃ御召茶おめしちゃ褐色かちいろの4色展開
和色ベースのふんわり雰囲気
好きな
デザイン
アイコンボックス

ミズタマブログより
▼見出しデザイン▼
Fuwari和色見出しデザイン
▼アイコンボックスおしゃれ▼
Fuwari和色アイコンボックスデザイン

主張しすぎないデザインでシンプルなスキンです。優しい雰囲気のブログに合うと思います。

COLORS

▼当ブログのデザイン▼
カラーズ利用状況
スキン名COLORS
作者わいひらさん
作者様
ページ
Cocoonを少しリッチな見た目に
「COLORS」スキン6種作成
おすすめ
ポイント
赤・青・黄・緑・桃・黒
のシンプル6色展開
好きな
デザイン
自分の感性にあった色
▼見出しデザインは見やすさ重視▼
カラーズ見出しデザイン

僕が使っているスキンですね。2019年ブログを始めた当時にあったスキンの中で、ごちゃごちゃしていなくてシンプルなデザインが良かったです。

そしてなんとなく緑がいいかなって思ってこのスキンを使い始めました。

サイトキーカラーの色変更は結構重要

ちょっとここでスキンの紹介とは別になりますがCocoonブログの色で個人的に大事だなってところを書いておきます。

Cocoon設定全体のところにあるサイトキーカラーの設定

サイトキーカラー設定

サイト全体のポイントとなる部分に適用される背景色を指定します

とありますので、いろいろな場所に影響してきます。例えば

  • 見出しの色
  • 表の色
  • 引用部分の色

などです。

統一感のあるブログにしたければ、スキンに使われている色を設定した方がいいと思いますし、個性的なブログにするならばあなたの好きな色を設定すべきです。

僕はスキンと同じ色を設定しているので、統一感のあるブログにできているのかなと思っています。

あなたもサイトキーカラーを設定していない場合は気に入ったスキンを入れたあと、いろいろな色で試してみると面白いですよ。

デモサイトはCocoon公式にて

気になったスキンの詳細デザインはCocoon公式にてスキン動作デモ機能を使うと簡単に確かめることができます。
公式>>Cocoon公式

▼Cocoon公式のサイドバーにスキン動作デモがある▼
Cocoon公式で動作デモ
▼スキンを選ぶと選んだスキンで表示される▼
動作デモスキン選択

スキンのデザインすみずみまで確認するならCocoon Blocks対応状況というページがおすすめです。ほぼすべてのブロックデザインを確認できます。

▼CocoonBlocks対応状況でスキンを確認してみよう▼
CocoonBlocks対応状況の場所

Cocoonのスキンで見た目をリッチにしよう

本記事では【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい

ということで、たくさんあるスキンのなかから僕のおすすめするスキン4種類を紹介してきました。

僕の場合はシンプルでふんわりな感じが好きなので、紹介したスキンはそっちにかたよっています。

  • もっとはっきりした色合いがいい
  • ダークな雰囲気を出したい
  • たくさん色を使いたい

など人の好みによって全然違ってくると思いますので、あなたの感性で好きなスキンを見つけてみてください。

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント