ブログ5カ月目のtsenです。
このブログはCocoon(コクーン)という無料のワードプレステーマを使用しています。
Cocoon(コクーン)は、無料とは思えないほどの高機能テーマで
その1つに、スキンという便利な機能があって初心者でもそれっぽいデザインが作れるし、
スキンを変えればデザインチェンジも簡単にできちゃいます。
なので、一口にCocoon(コクーン)とはいっても、実はデザインは人によって様々です。
そこで、今回は私のTwitterでCocoon(コクーン)テーマを利用してブログをやっている方を募集し
デザイン事例を紹介してみたいと思います。
同じスキンを使っていても、全然違う見た目になっていたりして面白いですよ~。
Cocoonのデザインベースはスキンで変更可能
![Cocconのスキン一覧](https://tsenblognosusume.com/wp-content/uploads/2020/11/coccon.jpg)
Cocoon(コクーン)を使ったことがない方のために、
まずは、スキンって何?というところを説明しておきます。
Cocoonの設定画面で、スキン一覧というものがあり、これをぽちっと変えるだけで
簡単に色味やデザインチェンジができてしまう機能です。
どんなデザインになるのかは、
このピクチャーマークの部分にカーソルを置くとサンプル表示がされます。
![コクーンデザイン](https://tsenblognosusume.com/wp-content/uploads/2020/11/cocoon.jpg)
ちなみに、当ブログは、Fuwari -褐色(かちいろ)-というスキンを使わせてもらっていますが
このサンプル表示を見ても分かるように、当ブログとちょっと表示が違いますよね。
つまり同じスキンであっても、そこから色々とカスタマイズできるので、
個人によって、それぞれ個性が出ます。
私は、上のメニューバーを紫にしたり、ブログタイトルのロゴが結構派手色だったりしているので
このサンプルとも違うデザインに見えると思います。
Cocoon(コクーン)トップページのデザイン例25選!
では、早速Cocoon(コクーン)トップページのデザイン例を実際に見ていきたいと思います!
使用スキン:なし
使用スキンなしというのは、特定のデザインベースがなく、
1からご自身でヘッダーやメニューバーなどの色味を設定している形になります。
もやチャレ
![コクーンデザイン例1](https://tsenblognosusume.com/wp-content/uploads/2020/11/sample5.jpg)
使用スキン:SILK
さよなら、さめたごはん
![Cocoonデザイン例](https://tsenblognosusume.com/wp-content/uploads/2021/09/cocoon15.jpg)
使用スキン:ミックス
ツナグ旅
![コクーンデザイン例7](https://tsenblognosusume.com/wp-content/uploads/2020/11/sample3.jpg)
おかに日記
![](https://tsenblognosusume.com/wp-content/uploads/2023/01/cocoon7456.jpg)
使用スキン:Veilnui Simplog
けいかブログ
![Cocoonデザイン例](https://tsenblognosusume.com/wp-content/uploads/2023/09/sample7.jpg)
FIRE GAME
![Cocoonデザイン](https://tsenblognosusume.com/wp-content/uploads/2022/02/cocoon100.jpg)
使用スキン:Bizarre-food(ホワイトラーメン)
秩父のWeb屋さん
![Cocoonトップページデザイン例](https://tsenblognosusume.com/wp-content/uploads/2023/01/cocoon951.jpg)
使用スキン:アリス
おきくの日常ブログ
![](https://tsenblognosusume.com/wp-content/uploads/2023/09/sample8.jpg)
使用スキン:Season
kurumico.com
![コクーンデザイン例12](https://tsenblognosusume.com/wp-content/uploads/2020/11/sample6.jpg)
ワーママの転職|転職ポーチ
![コクーンデザイン例21](https://tsenblognosusume.com/wp-content/uploads/2020/11/sample21.jpg)
まとめて情報ポッケ
![](https://tsenblognosusume.com/wp-content/uploads/2023/01/cocoonde12.jpg)
使用スキン:Fuwari
NURSE≠ME
![コクーンデザイン例15](https://tsenblognosusume.com/wp-content/uploads/2020/11/sample16.jpg)
天国に一番近い個人旅行
![](https://tsenblognosusume.com/wp-content/uploads/2023/10/sample9.jpg)
使用スキン:bizarre-food
きれいの理由
![コクーントップページ](https://tsenblognosusume.com/wp-content/uploads/2020/11/cocoon25.jpg)
シンタローコード
![Cocoonデザイン例](https://tsenblognosusume.com/wp-content/uploads/2020/11/cocoon113.jpg)
Simple Navy
イピリカ主夫リーランスブログ
![](https://tsenblognosusume.com/wp-content/uploads/2023/10/sample12.jpg)
使用スキン:COLORS
えりこの家計ブログ
![](https://tsenblognosusume.com/wp-content/uploads/2023/09/無題.png)
まとめ
いかがでしょうか?
皆さん、個性があってとっても素敵なデザインですよね。
同じスキンでもカラーが違うだけでも、結構印象が変わりますが、
ヘッダー画像や背景などによって、かなりデザインが変わりますよね!
Cocoon(コクーン)でブログを作っている方や、これから作ってみたい方の
トップページデザインの参考になれば幸いです。
ここまで読んでいただきありがとうございました。