Cocoon(コクーン)トップページのデザイン例25選!

ブログ運営

ブログ5カ月目のtsenです。

このブログはCocoon(コクーン)という無料のワードプレステーマを使用しています。

Cocoon(コクーン)は、無料とは思えないほどの高機能テーマで

その1つに、スキンという便利な機能があって初心者でもそれっぽいデザインが作れるし、

スキンを変えればデザインチェンジも簡単にできちゃいます。

なので、一口にCocoon(コクーン)とはいっても、実はデザインは人によって様々です。

そこで、今回は私のTwitterでCocoon(コクーン)テーマを利用してブログをやっている方を募集し

デザイン事例を紹介してみたいと思います。

同じスキンを使っていても、全然違う見た目になっていたりして面白いですよ~。

スポンサーリンク

Cocoonのデザインベースはスキンで変更可能

Cocconのスキン一覧

Cocoon(コクーン)を使ったことがない方のために、

まずは、スキンって何?というところを説明しておきます。

Cocoonの設定画面で、スキン一覧というものがあり、これをぽちっと変えるだけで

簡単に色味やデザインチェンジができてしまう機能です。

どんなデザインになるのかは、

このピクチャーマークの部分にカーソルを置くとサンプル表示がされます。

コクーンデザイン
コクーンのデザインサンプル

ちなみに、当ブログは、Fuwari -褐色(かちいろ)-というスキンを使わせてもらっていますが

このサンプル表示を見ても分かるように、当ブログとちょっと表示が違いますよね。

つまり同じスキンであっても、そこから色々とカスタマイズできるので、

個人によって、それぞれ個性が出ます。

私は、上のメニューバーを紫にしたり、ブログタイトルのロゴが結構派手色だったりしているので

このサンプルとも違うデザインに見えると思います。

スポンサーリンク

Cocoon(コクーン)トップページのデザイン例25選!

では、早速Cocoon(コクーン)トップページのデザイン例を実際に見ていきたいと思います!

使用スキン:なし

使用スキンなしというのは、特定のデザインベースがなく、

1からご自身でヘッダーやメニューバーなどの色味を設定している形になります。

もやチャレ

コクーンデザイン例1

iromemo

コクーンデザイン例22

ちょっとここらで

コクーンデザイン例3

ミーハーライト.net

コクーンデザイン例24

使用スキン:Simple

飛ばない鳥はリモートではばたく

コクーンデザイン例4

Life is Cafe Blog

コクーンデザイン例5

ちゃーたーのひとりごと

コクーンデザイン例6

使用スキン:ミックス

ツナグ旅

コクーンデザイン例7

使用スキン:サムライ

これからぱーてぃ

コクーンデザイン例20

使用スキン:Veilnui Simplog

けいかブログ

コクーンデザイン例8

使用スキン:Momoon

新卒からセミリタイア 目指すFIREブログ

コクーンデザイン例9

おきくの日常ブログ

コクーンデザイン例
スポンサーリンク

使用スキン:tecruo

〇〇やってみた

コクーンデザイン例10

使用スキン:Season

うえけんの人生ブログ

コクーンデザイン例11

kurumico.com

コクーンデザイン例12

キノカバ

コクーンデザイン例13

ワーママの転職|転職ポーチ

コクーンデザイン例21

よったんのゆるりLife

コクーンデザイン例23

ぜきしゅん夫婦20代夫婦がFIREを目指すブログ

コクーンデザイン例

使用スキン:Fuwari

家memo

コクーンデザイン例14

NURSE≠ME

コクーンデザイン例15

使用スキン:bizarre-food

きれいの理由

コクーントップページ

使用スキン:おでかけ

しゅふフル

コクーンデザイン例16

Mamanookane

コクーンデザイン例

使用スキン:いつもの

楽しいライフハック!

コクーンデザイン例

使用スキン:m-sora

ぐるりのそら

コクーンデザイン例17
スポンサーリンク

まとめ

いかがでしょうか?

皆さん、個性があってとっても素敵なデザインですよね。

同じスキンでもカラーが違うだけでも、結構印象が変わりますが、

ヘッダー画像や背景などによって、かなりデザインが変わりますよね!

Cocoon(コクーン)でブログを作っている方や、これから作ってみたい方の
トップページデザインの参考になれば幸いです。

ここまで読んでいただきありがとうございました。

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